UI/UX Case study of an Educational App

Search the App instead of the street.

In this case study, I have described my process of creating an ed-tech app

Design Thinking Process

Problem Identification

The private tutor looking for students and still, it is not easy to find new students. I have to do a lot for advertising like publishing posters, social media, local listing etc. Search the App instead of the street. I tried creating an app which would minimize the gap between students and tutors. 

User Survey

My primary goal is to improve the entire experience of using the app, along with ensuring what the users actually need for which I’ll be doing the UX process from scratch.
Users research – Knowing the users

I conducted a survey using google forms to get an idea about how people use the app.

The sample size of the survey is 25 and I had used Google form to record the survey. Shown below is the quantitative data based on the survey.

How hard is it to get a home tutor?


If our tutor reaches at your doorstep for classes will you be exited?

The personas range from 17- 25 years of age and all are assumed to be familiar with the technology.

User Interview

  • How hard is it to get a home tutor?
  • Different medias involved in the search process?
  • Criteria for an ideal tutor?
  • How effective is the current system?

User personas

I have created 2 user personas, named them according to their regular lifestyle and drew their visual representations.

User Journey




Because of the variety of Intended audience, designing a universally easy to use app that wouldn’t add the burden of adding timetable to the process of requesting class was the biggest design challenge.

  • To initiate an engaging factor for the users.
  • To simplify the visual and functional aspect of the app.
  • To make the requesting, cancelling in easy way.
  • To create an app which would be well received across various age groups.

More than 80% of people are unsatisfied with current system.Experience, behavior and teaching skills define an ideal tutor. Many websites providing details of tutors are available now and still the results are not satisfactory. One have to make an advance payment to get the details and if the teacher is not available then the money and pain is in vain.

I narrowed these points down to:

Pain Point 1: Users are confused about where to search for a tutor.

Pain Point 2: Teachers work are not quite good enough …

Pain Point 3: High Cost.

Pain Point 4: No proper continuous guidance.

Pain Point 5: Need Regular classes.

Design Features

Design Features
  • Users can pick up the subject
  • Selecting a calendar Date and Time
  • The users can know the tutor before the pickup
  • Course description
  • Payment and booking online
  • Rescheduling or cancellation
  • Chat facility to interact with tutor to clear the doubts even after the class.
  • Access to the past lessons and upcoming lessons
  • Monitor learning progress


I generally tend to get attached to a single idea while sketching, but for this project, I detached myself from a particular idea and worked on multiple layouts.


17 Screens




04-Choose your way to learn


06- Choose your Course

07 -About teacher

08-Course descriptione


10-Schedule confirmation

11-Promotional offer & terms and conditions


13 -Personal home page

14-Upcoming course

15-Past courses

16- Progress

17- Teacher Notes


Visual Design

I didn’t like the feel of the old students app, Considering the app will be used by 17–25-year-olds it has to look and feel like that. So I came up with changing the product personality overall.

For the new product personality, I had three keywords in mind and I tried to stick to those while designing the visuals:

  1. Modern

The first thing I wanted to change was the logo as it clearly didn’t follow the product personality.

Color Palette

The color BLUE symbolizes confidence, intelligence, and purple is connected to power and wisdom, . Hence, a blue color palette is fitting for an app that promotes inspiration and motivation. Additionally, I used grey for the text and and included a great deal of white to give a calm and clean appearance.

Naming & Logo

The main reason to choose the name Freshman learn at home was practicality. I wanted to have the word ‘at home’ in the name as I felt this suits the app’s vision and therefore I chose  Freshman as a biginner and “Learn at home”.

I wanted the logo to be creative, reflecting the name itself. The logo looks like a teacher and student are high fiving because they reached their goal.


I built a Moodboard to inspire me, which would assist me in the decisions of choosing the typography, color, system grids, images, etc.

Once the Moodboard was done, I was able to create a visual identity system, where I laid those design decisions that I thought was relevant for users to feel familiar with the product.

Screen Explanation

Sign-Up and Sign-In

Home screen will be designed in such a way that is for both Teacher and Student.

Home Screen

The left menu bar is for student to login or  fill-up the registration application form

Naming & Logo

Onboarding Screen

Student can choose to study with the Zoom app or in a group class before signing up.

There is also some information about course and knowing the tutor is before  pickup The Subject.

Selecting a calendar Date and Time

There are terms and conditions as well  before payments.

The student can choose their subject and  some information about their teacher.

There is also some information about what they will learn in the course description.

The student can choose their level and select the time and availibility.

There are terms and conditions as well as offers just before payments.


This visual guide represents the skeletal framework of the app. It helped me arrange the interface elements while I focused on the functionality rather than what it looks like. Moreover, the simplicity of wireframes allows me to quickly test ideas without diving into the details.


High Fidelity

Students Homepage


12 Screens





10-Add Teacher Note

11- Edit and Remove The Student

12- Add new Student


06-TeacherSetting Edit Profile

07- Teacher Setting Edit Course Description

08 –Teacher grading and reporting

09-Teacher Setting Show Payments 

Teacher after login can go to setting and

write notes,

add or delete students

put the grade report

Grade Card

Providing grading report will aid the parents asses their children, how they are in studies, what to improve.

Warning grade will provide information about the studies and what are more care is to be given.The graph screen will be designed in such a way that we would be able to understand what is the grade.

Chat Screen

Future Iterations

Users can select their teacher from a list

Users can share their achievement in a social media platform sites like
twitter, facebook, WhatsApp etc., which makes them proud and also it
will be an unpaid promotion for our app.

Take Aways

Design is a solution to a problem.Art is a question to a problem. — John Maeda

This project improved my problem-solving skills, the idea nurtured further by thinking on the user perspective.

Refining and Redefining the product and user flow based on the usability testing will help the product to stay unique from competitors, repeat again from the ideation stage until the target user finds it as the featured solution

I’m delighted by the outcome of LEARN AT HOME and I firmly believe that this app will truly be a solution to the problem statement and will be accepted by the target user.

Special thanks to Neral for being a starting point for this project. Sarath Damodar and Joe Domenic for their support and also I need to thank people who took the time to tell me about their thoughts, pain-points, experience and test my prototype.