Sabaq

Design to facilitate a better learning experience

Expertise

Research, Design & Interaction

Deliverables

UX, UI, Prototypes, Design System

5d14639969b5b

SABAQ is an educational technology company that makes applications, content and tools to aid learning in and outside the classroom

We worked on MUSE - their flagship Android application designed for use, both in and outside the classroom. It is a digital library of 1000+ lessons, interactive exercises and games being used in over 1800+ schools all over Pakistan 

Mockup-with-hand

What we did

We worked with the core team to use existing feedback on the application & user data to improve the experience of the application. This included:

  • New home page

  • UI refresh & Design system

  • New sign up and login flow

A new homepage

Looking at user data we noticed that a majority of our users were dropping off without consuming any of the content.

We realized that there were 3 interaction points where a user had to make a decision before they got to the first piece of content.

There was too much friction before a user actually got to see the value of the application.

choosing-subject-3

Choosing subject

choosing-topic-3

Choosing topic

choosing-the-content

Choosing the content

actual-content-1

Actual content

choosing-subject-3

Choosing subject

choosing-topic-3

Choosing topic

choosing-the-content

Choosing the content

actual-content-1

Actual content

We needed a way to aid discovery and reduce the friction to get to the first piece of content

We worked on 2 main things

  • Changing 3 interaction points to one, so the user was only one touch away from accessing their first piece of content

  • Surface our best content on the homepage via a browse section

UI Refresh 

With no design system or proper guidelines the current app had become inconsistent with how font-sizes, shadows, margins, paddings and color schemes were used.

The company also wanted to a rebranding of the application so we decided to a big revamp and turn everything into consistent standard that could be followed.

old-app-2

Existing app used highly saturated colors which made it difficult for the content to stand out especially as we moved towards highlighting it in the homepage.

new-app

New Design

Group-1159-2

We still wanted the product to have a playful and color aesthetic so we decided to lessen the saturation of the colors we used -> moving towards more pastel colors.

Colors-Default-5

We still wanted the product to have a playful and color aesthetic so we decided to lessen the saturation of the colors we used -> moving towards more pastel colors.

New sign up flow

We also addressed a bunch of usability issues that we had identified with the new UI refresh. One of the major ones was with the sign up flow

signupold1-1

We removed social media logins because of app store age restrictions 

signupold2

The loader kept spinning while the code was being sent which made users think the app had frozen

signupold3
signupold4

Their were unnecesary fields in the form that weren’t required

signupold5-1

Parents had to create seperate accounts with different emails for each child that was using the app and then log in and out

signupold6
new-sign-up-flow

New Signup flow

We also added support for multiple ptrofiles so parents didnt have to create multiple accounts and constantly log in and out of them

MULTIPLEPROFILES-1

View more work

MuawinDesigning financial services for novice technology users

QabilWebsite design for a recruiting & technical screening platform

GT PuzzleBranding & packaging for a local jigsaw puzzle