Home

Student Learning Journey - UI

Ideation, picking solutions and UI design

CLIENT Meraki (Part of NavGurukul)

DURATION About 6 weeks

CONTRIBUTION Individual contributor

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.

🧑‍🔧 Context and Background

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.

🔮 Impact

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.

✨ First Steps: Usability Testing of Batches in the Old App

Originally, the app had these major functionalites:

  • Live classes (Workshop or doubt class): These were live lectures run by volunteers who help Meraki take these sessions on a part-time basis. Students had to enroll in the classes every time as per schedule of the course.
  • Course material: It had been prepared by Meraki curriculum team which includes theory, exercises and code examples.
  • Usually, students attended a workshop and then refered to the course material as reference/notes and completed the exercises.
  • Any quizzes or assignments were handled manually over Whatsapp or email.
solution

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:

  • Manual load of enrolling in the classes again and again has been eliminated. It let students focus on learning rather than schedule management.
  • We had used the word COHORT but it is not a familiar word in the rural areas. However, people know the word BATCH. We decided to change cohort to batch.
  • Successful implementation brought opportunities of talking to several state governments of Tripura, Delhi, Haryana and Maharashtra for Meraki's usage in government schools.
✨ Task Analyis (Optimized) and UI Design

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.

Task 1: Enrolling in a Python batch
  • A batch is collection of all the classes in which the student is enrolled all at once eliminating the need for manual enrollment everytime
  • A student logs in and wants to enroll in a batch: The batch card is shown to the user at the top. All students come from our partner institutions. The batches are linked to the partners and students only see the relevant partner's batch as they signup through a special link.
  • A students logs in but does not enrolls in a batch: This case is applicable where a student wants to do self paced learning. Courses are open, however, students wouldn't be able to take classes.
solution
solution
solution
Task 2: Enrolling to a Python doubt class

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.

solution
solution
solution
Task 3 (a): Attending Python worskshops from batch
  • A student is enrolled in a batch: The class details are shown. Join button is activated when the time is reached before 10 minutes.
  • Not enrolled in a batch after login: In this case, the student can only access course material and assessments. The classes are not available. Instead a list of available batches are shown to enroll if the student want to take live classes.
solution
solution
solution
Attending Classes via Class Shortcuts

Class shortcuts are a means to quickly attend a class. Earlier, there was no proper means to find out the latest upcoming classes.

solution
solution
Task 3 (b): Enrolling and attending a revision class

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.

solution
solution
Task 3 (c): Attending a Python doubt class

Attending a doubt class is simply done by navigating to the class details and joining the class to open Google Meets.

solution
solution
Task 4: Navigating course content

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.

solution
solution
solution
Task 5: Run a code sample

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:

solution
solution
solution
Task 6: Practice Questions

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.

solution
solution
⏲️ Usability Testing of Taskflows

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:

  • All students were in agreement that the batch enrollment and only seeing the classses they need (instead of everything in a calendar) reduced confusion and the need to keep track of the schedule manually.
  • The horizontal top menu was seen as a quick way to navigate content. Initially, we removed the exercise names to keep it simple and linear however, students wanted to have a topic list for easier identification. Note: The topic list has added now.
  • In the practice questions, students mentioned that it would be great to have explanations of why the solution was correct or wrong. We added it to an iteration that you saw above.
🔬 Design Library

Android app is based on the material design with our own customizations. Currently, our library consists of the following:

solution
⏭️ Next Steps and Recommendations

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.

solution
💡 Reflections
What went well:
  • The team was supportive with usability testing and we did not directly jump into development.
  • We did many iterations and hence, it was not just that the first idea would be the best idea.
Challenges:
  • In the initial phases, I had problems with getting design feedback. While extended team does provide good feedback, but I was the only full time designer at the time. So, we enlisted help of volunteer designers. However, it was slightly bumpy as I needed to provide extensive context to them before design critique sessions.
  • The development team also has many volunteers (and a few full time people) and hence, the pace can be slow or sometimes erratic based on their availability. While, the designs were ready, some feature implementation took longer than expected. The team is getting more organized and stable now.
More Projects
Student learning journey - UX Research

Uncovering new challenges and analysis of tasks when learning with classes and self study material

Read In Depth
Tutor Management System for Admins

Keeping track of tutor status and work all in one place

Read In Depth