From Frustration to Focus: A User-Centric Approach to Ed-Tech App Design

Published in

Bootcamp

3 min readJul 4, 2024

This redesign of the Scholar Planet app is a personal project for educational purposes only. It is not affiliated with Scholar Planet or intended to be a reflection of their current design choices. My aim is to explore the benefits of user experience design in education and showcase the potential of design iteration.

In another attempt to re-design an app for a better user experience, I gave ‘Scholar Planet’ — an ed-tech app—a new look while streamlining its user flow.

About Scholar Planet

Scholar Planet leverages technology to create a supportive and engaging learning environment for students of all ages worldwide. Their comprehensive online platform offers various learning modules tailored for students in India, including preparation for competitive exams, olympiads, and JEE. They also use gamification to make learning fun, awarding levels and ranks based on student performance.

Current Challenges

Usability and design limitations
Confusing onboarding process
Cluttered and outdated UI

Redesign Approach

Focusing on the student experience, I aimed to resolve these issues by redesigning the onboarding flow and overall look of the app to enhance usability and aesthetics.

Original Onboarding Flow

On opening the app as a first-time user, this is what the onboarding flow looked like:

5 screens showing the onboarding flow. The first screen shows a pop-up that appears when the user selects between student or teacher. The second screen shows that there is contact us option on this page. The third screen is the log-in screen, that asks the user to enter email id and password. The fourth and fifth screens show that once a person starts typing, the log in CTA gets hidden by the keyboard.

Key Usability Issues

Following are the problems I identified in the current design:

The user needs to tick the checkbox to agree to the terms of use before he could select Student/ Teacher options. This is not intuitive as a user’s intention would be to first choose between ‘Student’ and ‘Teacher’ and then proceed to agree with the terms of use, based on their position and visual hierarchy in the screen.

There’s a screen and two arrows pointing to the 2 problem areas in that screen. The first problem is that the app asks the user to choose between studnet and teacher but gives them the option of student, techer/content writer. This creates confusion. The second problem is that it shows contact us information on this screen which is unneccsary.

When the user starts typing, the keyboard appears and hides the CTAs. The user has to find a way to exit the keyboard, which in case of children or teachers who aren’t that tech-savvy might be a difficulty.

The background vectors are competing for attention and hampering the visibility of the text. The rank and score is again mentioned in the accent colour, and level is mentioned on a bright orange colour. Although, this seems to attract the user but the contrast ratios aren’t good enough for readability. The cards are creating cognitive overload for the user with bright accent color and harsh shadows. Overall the homepage design is looking pretty overwhelming and outdated.

Usability and User-delight for the Redesign

For the redesign, I prioritized a modern and intuitive design that prioritizes ease of navigation. Using the app’s existing brand assets, I revamped the UI and addressed the user flow issues. The redesigned version reflects this focus on usability.

4 different screens showing the 4 color options I experimented with for the background. It has different shades of purple in the background. I chose the darkest one since it provides better visibility and accessability.

2 screens showing different options for the screen where the user selects if he wants to continue in the app as a student or teacher. One version shows student and teacher option one below the other, it has small size icons. The second version shows these options one enxt to each other, it has big size icons. I chose the second one as it gives better visual cue to the user.

Shows 2 screens — The first screen shows the benefit of using a big bold heading saying ‘Welcome Back’ in the log in screen. It makes the user feel recognized and warm. The second screen shows that the continue button is in the right position such that it’s not getting hidden by the keyboard.

Create account screen designed in a similar way as the log-in screen that was described before.

2 versions of the home screen — the first one prioritizes user experience. Level, rank, and score are clearly displayed. Category selection simplifies navigation by reducing clicks to reach desired content. The bottom space can showcase user testimonials to build trust, while the bottom navigation bar, inspired by Jacob’s Law, provides intuitive and convenient access to key functions. The second one shows content in a bento grid, this helps utilize the space if we don’t have testimonials.

Addressing User Needs

This redesign prioritizes student needs by streamlining the onboarding flow and home screen. This creates a more intuitive and engaging experience, empowering students to take charge of their learning journeys, optimize their time spent on the platform, and avoid confusion.

Conclusion: Empowering Learners Through Design

This redesign experience underscored the importance of user-centered design in educational platforms. By fostering a future where technology empowers, not hinders, the learning process, we can create ed-tech platforms that lead to increased student engagement and improved learning outcomes.