UX Research
Wireframing
Design System
UI Design
Prototyping
UX Designer (Me)
UX Researcher
1.5 Months
There are about 58 Million students enrolled in the Pakistani education system. Of those, 7.1 Million are Matriculation and Intermediate students (High school students). Many of these students attend supplementary classes in tuition academies to prepare for exams and give them a competitive edge. The advent of the covid pandemic led to a rapid adoption of e-learning methodologies and opened up a new problem space: How might we improve online learning so it can augment or substitute these tuition academies?
Our client, Punjab Group is the largest education network in Pakistan's private sector spanning 4 chartered universities, 451+ colleges, 15 Resource Academia Campuses, and 1500 Schools. They approached us to build an online learning app that could serve as a holistic learning and preparation platform.
Design a holistic supplementary learning app for high school students which helps them access a repository of knowledge & practice assessments, and receive detailed feedback.
Although our scope was limited to building a learning app for students, we also had to build a scalable design system so that it may be used to build a teacher portal to schedule and conduct classes and examinations as well as a parent portal to keep track of the students’ progress.
Before coming up with solutions, we needed to answer a few key questions around our users’ current practices, local and global competition, and prioritisation of features. Here is a summary of the research we conducted:
Our clients had conducted quite comprehensive research prior to approaching us. They had conducted focus groups to define existing user problems and brainstormed high level solutions. These solutions were:
We visited a tuition academy to observe how students currently conducted supplementary learning. We found that the academy was very similar to school structure with 4 hours divided into six 40 minute subject-wise classes back to back. Students were crammed into small classrooms ranging from 25-110 students per class. Teaching was largely lecture-based with teachers speaking and writing on the whiteboard and students taking notes. Direct student engagement in the form of questions or discussion was minimal.
A few key insights for our solutions were to brainstorm on how we could improve engagement, how to map current classroom tools such as whiteboards onto our teacher portal, and how to include a notification system similar to the notice board used in the tuition academy.
We conducted a survey of over 23000 students to get quantitative insights on existing online education and to probe for any issues that students faced on current online learning platforms. The results were as follows:
had taken online
classes before
took classes on mobile as opposed to laptop or tablet
took classes on
a shared device
A few key issues that students faced were:
One of the main implications of the survey results was that we had to go with a mobile first approach since most of our users preferred mobile phones as their primary device. There were also some key challenges highlighted such as connectivity issues and low engagement in online classrooms.
Teachers hosted whatsapp groups for students for updates, Q&A, and polls. We found that communication on whatsapp groups was largely one sided. The teacher posted updates and asked revision questions on polls. Student participation was limited to responding on these polls.
We conducted a competitive analysis of local and global competitors to review existing user flows and mental models, and to learn from and build upon existing solutions. For local competitors we analysed Maqsad, Abwaab, Noon, and STEP. For global UI competitors we analysed Duolingo, and Khan Academy. Check out the competitors below:
Once we had a deeper understanding of the problem space and our users, we went back to the feature list provided by our client and prioritised solutions for our MVP using the MoSCoW method. After this step, the researcher and I made user-flow diagrams and wireframe sketches. Once these were reviewed by the client and iterated upon, we moved to the design system and UI design stages.
The design system was a combination of components from Material UI and custom components built for our app. We started off with Material UI in order to speed things up and ease development. However, the app required special components such as cards for the home screen, custom calendars etc. So we had a library of smaller components to start with and kept adding to it based on the needs of the app. We also customised the design system to reflect brand fonts and colors.
Onboarding was pretty standard with login and signup options and OTP verification.
The homescreen houses all of our solutions including live classes, exams & assignments, lecture videos, performance, and other options. The home screen is customised according to users and paywalls are added to some features (e.g. Live classes) based on the user’s subscription plan.
The daywise plan is a daily schedule of classes, exams, & assignments. It helps students get a sense of their schedule in a few taps and keep up with their daily responsibilities.
The examinations section has written exams as well as MCQs. The MCQ section is minimal and intuitive with the ability to review answers before submitting. The written test uses image capture so students can submit handwritten exams.
The performance section gives subject wise grades and detailed review sections so students can go back and assess their weak areas. It also had a smart recommendation feature which identifies students’ strong areas, weak areas, and recommends educational material accordingly.
After we conducted the research, built out the design system, and fleshed out the initial screens, we handed over all the material to the client. Essentially, we built a foundation upon which to build their product. We also designed preliminary desktop screens to visualise how the app could adapt to larger screens. We also helped them hire a full-time designer by assessing the candidates’ skillset and conducting interviews.
The next steps of this process were to flesh out the remaining essential features, test out the app prototype with students and gather feedback. It would also be important to keep iterating on solutions and keep the design system updated accordingly.