Techcardo - Arabic online courses for designers and developers
“
Pick a track, find a course in Arabic and follow it on any screen.
Techcardo
Responsive web app, 2015
About the project
Techcardo is an online learning platform in Arabic for designers and developers across the Middle East and North Africa. In 2015 we researched its audience, mapped the user flows and wireframed every page, then designed the full web app for desktop, tablet and phone. Learners choose a track, browse and buy courses, follow lessons and see their progress, all in Arabic.
Project
Techcardo Web App
Industry
Online Learning
Location
Jordan
Date
2015
“
Client Request
Techcardo wanted a platform where Arab designers and developers choose a learning path, learn from trainers in Arabic and keep building their skills.
Techcardo
Idea scope, May 2015
Design Pillars
Core UX Principles
Sign up asks which track you follow, then shows the courses for that track.
Every screen is written and laid out in Arabic, reading right to left.
When a search finds nothing, learners can request a course and take it for free once it is added.
What Users Need
Built for Learners in the Arab World
Courses in Their Language
Our designer persona found English courses on other platforms hard to follow and could not find good training in Arabic.
Short on Time
Two of the three personas named lack of time, so each lesson shows its length and each course shows how far you are.
Every Level
Our student persona could not tell if a course was for beginners, so the catalog filters courses by level.
The Challenge
Problem Statement
The Main Goal: Make Online Learning Easy to Follow in Arabic
A course on Techcardo goes through many steps: choosing a track, finding the course, paying, following lessons and sometimes leaving it. We set the rules for each step before the screens, such as giving the price back as credit when a learner leaves before 10% of the course.
“
Hiring Plexable was a smart move. Not only they create great designs, but they stimulate every cell in your brain as they brainstorm how to get to the best user experience possible; something every startup needs.
Mohammad Shaddad
Founder, Techcardo
Our Approach
Solution
One Web App on Every Screen
Audience research, personas, user flows, wireframes, a UI style guide and the final responsive UI for desktop, tablet and phone, all in Arabic. It is an example of our EdTech Product Design work.
01 - Research and Personas
We profiled the audience across the Arab world and wrote three personas: a designer, an educator and a student coder.
02 - Flows and Wireframes
A functionality map with a rule for each case, followed by 61 pages of desktop wireframes.
03 - Responsive UI
Final screens in four sizes, from a 1920 wide desktop down to a 320 wide phone, with a style guide.
Before & After
The Blueprint & Evolution
Wireframe to Final UI
We wireframed every page before the visual design.
Before: the course catalog wireframe, June 2015.
After: the final catalog with filters, a featured course and course cards.
Design
Key Features
Progress on Every Course
The course page shows the current lesson, a progress bar and each unit’s lessons with their length, with a tag on the free ones.
Credit Back When You Leave
Learners who leave a course before finishing 10% of it get the price back as credit for another course.
Design System
Visual Identity
Bilingual Type
GE SS Two for Arabic and Source Sans Pro for English, from bold 48 pt headings to light body text.
Color Palette
Techcardo blue for links and main buttons, green for enrolling and finished lessons, and black and gray for text and lines.
Rules for Every Case
The flow sets a rule for each case, like a password of at least five characters or a payment window that closes only with Cancel.
Impact
A Complete Responsive UI
Results for Techcardo
In July 2015 we handed over the final UI for desktop, web, tablet and phone, with the style guide and a copy of every screen without photos for development.
Techcardo
Result
By the Numbers
219 Screens and States
In the final desktop, web, tablet and phone files.
4 Screen Sizes
1920 and 1500 wide desktop, 768 wide tablet and 320 wide phone.
3 Personas
A designer, an educator and a student coder from Egypt, Morocco and Jordan.
User Flows
Mapping the Whole Platform
Every Rule Before the UI
Before any visual design, we mapped the whole platform, from signing in and search to course pages, payment and lessons. Each screen lists its content, and notes set the rules and cases, such as a wrong password or a search with no results. You can see some of the results below.
Final Showcase
The Techcardo Web App
