Calima - An Arabic learning app for company training
“
Lessons of a few minutes, with quick questions, unit exams and badges.
BePro Consultancy
Apps, backend and landing page, 2019 to 2020
About the project
BePro Consultancy, an Amman training firm, wanted to bring its soft skills courses to companies through a phone app, which became Calima (كلمة, Arabic for “word”). Companies assign courses to their staff, who learn through short flash cards, unit exams and badges. In 2019 and 2020 we wrote the requirements, then designed and built the Arabic iOS and Android apps, an English iOS version, and the admin portal and backend.
Project
Calima Learning App
Industry
Corporate Training
Location
Amman, Jordan
Date
2019 to 2020
“
Client Request
BePro wanted its online courses on a simple mobile learning system built on flash cards, so its client companies could train their employees with it.
BePro Consultancy
Requirements document, September 2019
Design Pillars
Core UX Principles
A lesson is a stack of cards with text, a picture, a video or a quick question, and the learner swipes from one to the next.
The app was planned in Arabic only, so swipes, arrows, tabs and every layout run right to left.
Each course card shows its hours, units and lessons, then a progress bar or a score once the learner has started.
From the Requirements
Built for Companies and Their Staff
Assigned by the Employer
Employees log in with their email and a password the system generates, and the home screen lists only the courses their company assigned to them.
Reading Time Counts
Employers can see how long each employee spends on a course, so the timer starts when the learner taps Start Reading, and the app says so first.
Badges for Real Progress
Badges reward exam marks over 90, more than 20 hours of reading and finished courses, and a leaderboard ranks colleagues by their results.
The Challenge
Problem Statement
The Main Goal: Training Short Enough to Finish at Work
Employees take these courses between their daily tasks, so every course had to break into lessons they could finish in a few minutes, in Arabic and on any phone. BePro also needed each lesson, exam and badge to report back to the employer, and its content team needed to build courses card by card from an admin portal.
“
Short and concise lessons that take less than 3 minutes to complete.
Calima Onboarding Screen
English iOS version, 2020
Our Approach
Solution
Four Design Sprints, One Learning Flow
Requirements, user flow and user stories, then the UX, UI and build of the iOS and Android apps, the admin portal and backend, plus the Arabic landing page. It is an example of our EdTech Product Design work.
01 - Discovery and Requirements
Discovery meetings in the summer of 2019, a requirements document, the employee user flow and a list of user stories.
02 - Four Sprints for iOS and Android
Login and courses, lessons and exams, profile and badges, then menus and notifications, November 2019 to March 2020.
03 - English Version and Build
An English iOS version in February 2020, the landing page, and the build of the apps, admin portal and backend.
Before & After
The Blueprint & Evolution
Empty Tabs to Full Tabs
We designed what each tab shows before a learner has any courses in it.
Before: the Current and Completed tabs with nothing in them yet.
After: the same tabs with one course under way and two finished.
Design
Key Features
Seven Card Types
An introduction card opens each lesson, followed by text, image, video and tip cards, with quick questions in between.
Unit Exams
Every unit ends with an exam of fill in the blank, multiple choice, true or false and multiple answer questions, and a retake opens 8 hours later.
Design System
Visual Identity
Arabic Type
Helvetica Neue Arabic in bold and regular on every app screen, with Tajawal, the brand font, on the landing page.
Color Palette
Turquoise for titles and navigation, red for lessons and buttons, purple for units and exams, and orange for progress.
Save and Stop
Each lesson header has a Save and Stop button, and leaving a lesson, a unit or an exam asks for confirmation before it closes.
Impact
From Requirements to a Working App
Results for BePro Consultancy
BePro had the final Arabic iOS screens and the English version by March 2020 and the Android screens by July 2020. We built the apps and the admin portal and backend behind them.
BePro Consultancy
Result
By the Numbers
298 App Screens
Arabic iOS and Android, plus the English iOS version.
4 Design Sprints
From login and courses to badges and settings.
7 Card Types
Plus quick questions and four kinds of exam question.
Requirements
From Discovery to User Stories
Three Users, One System
The requirements describe three users: employees who learn in the app, client companies that assign courses and follow results, and the BePro team that sets up courses in an admin portal. We mapped the employee side as a user flow and user stories, then built the apps, the admin portal and the backend. You can see some of the results below.
Final Showcase
The Calima App
