Note: This is UI design part of the case study. If you would like to why and how, please refer to the user research part of this case study.
Meraki aims to bring free tech education (mainly Python programming) to young girls from low-income families in India.
Now some context of my work for this part of the case study. After insights from user research, we tested the batch based courses with the current students and finally redesign the app for the six main task flows that generated the problem points.
Update: The new design was launched in Feb-2022. We onboarded Maharashtra state government ITIs (technical institutes). Student feedback has been overwhelmingly positive. With introduction of practice questions, our new users jumped to 44K since March 2022.
The new design is about to release soon. However, we have been running the batches for several months. These are some figures: Average User Session went to 27 minutes 51 seconds, Engagement Rate saw 87.5% increase on an average for 17k+ active users and 89% for new users.
The success of the batches and proposal of the new design has led us to grab opportunities with many state governments in India. The biggest is from Haryana state government who would onboard more than 5000 students over a few months from their government schools.
Satisfation from the partners, ever since we launched the practice questions as they always wanted a mechanism to check the student learning progress. Earlier, students were given paper or questions on PDF which needed to be emailed to the tutor.
Originally, the app had these major functionalites:
Before moving to the redesign of taskflows and visuals, we had the infrastructure to convert the individual classes of Python into a batch of 28 classes where the student enrolled once and got invitations to all classes at once.
We have ran multiple Python batches (each batch consisting of more than 30 students on average) for approximately 2 months and these were some insights:
Our users interact to complete certain tasks on the app. The re-designs of the tasks with problem points are:
For full detailed taskflows of before and after user research insights, check the task analysis.
Doubt classes had been there before in the old app. These are standalone classes that are conducted by tutors if needed. Now, they appear as a banner in the course content and available on need basis if there is demand for it.
Class shortcuts are a means to quickly attend a class. Earlier, there was no proper means to find out the latest upcoming classes.
Revision Classes: These are new type of classes. Earlier, a tutor would just create a new class if there was a need for revision class. Now, a few options are presented to the student from other parallel batches to join in case they missed the class or need to revise. Tutors also do not need to create classes for revision again and again.
Attending a doubt class is simply done by navigating to the class details and joining the class to open Google Meets.
Course content can be navigated back and forth via the top horizontal menu items. It consists of class (batch) item, reading material and assessment items.
Code sample in the course content had a cumbersome flow. Running a code took the student to the compiler and then they have to come back. Simplified process is as below:
Practice Questions have been done manually until now. Teachers provide the questions or content has it as a document. Then students needed to upload their answers for teachers to give feedback. In the new flow, MCQs will be integrated in the content.
The above designs were tested with 10 students in a moderated session over Google Meets. I asked the students to go through the prototype and perform the tasks mentioned above while observing them. Some of the insights from the sessions were:
Android app is based on the material design with our own customizations. Currently, our library consists of the following:
Get the Mixpanel analytics integrated in the developed designs for better insights.
Planning to design for gamification to make Meraki really fun for programming education.