NCERT Solutions App Reloaded-UX/UI Case Study.

Udit Shakya

7 min readMay 15, 2020

Disclaimer

This is a personal project. I was not commissioned by anyone to make this app.

What are NCERT Solutions Apps?

As the name of these apps itself suggests these apps provide solutions to NCERT Books, and some private books too.

Why did I choose the NCERT Apps?

I was looking for something to work on for my portfolio and I wanted a product which I have already used and whose shortcoming I’ve already faced, to better understand other users.

I remember there were many apps that me and my friends used for NCERT books’ solutions but we had to use multiple apps and resources to get everything we required like video lectures, getting our doubts cleared, notes for each chapter, tests to analyze where we stand, it was too hectic to switch between different apps/websites so I decided to solve this problem and come up with a product which would provide all the necessary resources required for a school student at a single platform.

So here comes the BIG QUESTION, Is this a redesign of a particular app? NO! this is a reload of all the different apps out there which were lacking either in terms of UX or UI or even as a product whole.

Let’s get started!

Changed Colour Scheme

The first thing I want to talk about is the brand colour, the reason I chose Blue and its shades and tints is because According to Frank Mahnke there are age guidelines to follow, preschool & elementary school students prefer the warmer side of the palette (red/orange/yellow) while the high school & post-secondary level students gravitate towards the cooler side of the colour wheel (blue/green/mauve). These cooler tones help support study & increase calm, and works not only with focus but levels out hormones too!
Some research suggests that people with highly intellectual work, which requires a high cognitive load, for instance, programmers or academics, are more productive in a blue environment.

Logo

I’m not good at logo making, here are some explorations I came up with. I went for a very simple style, the letter ‘N’ represents the word NCERT. I decided to go for curved edges for the logo to make it look more friendly.

Research, Analysis & Wireframing

Research- I talked to my siblings, friends and neighbours who were under the age group of 13–20 years. I told them that there’s this app called NCERT Solutions which provides solutions to questions in NCERT Books, and asked them that besides the solutions, what else do they need to enhance their learning process and what are the different resources they use for their learning purposes. I also asked them about similar apps they’ve been using, and what are the problems they’ve faced with these apps to get a better understanding of shortcoming of the pre-existing apps in the market.

After interviewing these people I went to play store and collected all bad and good reviews of the pre-existing apps that those people were already using, I even used these apps myself to understand the problems and where do these existing apps lack. I went on the internet, Quora and searched about why E-learning is on pace today and what are the right things that various successful E-learning platforms have done.

Here are some shots from my research and wireframes

Analysis- By going through my research thoroughly and my experience with pre-existing apps.

I came to these conclusions about what a student wants from the app :

Videos lessons to learn even when they are not in a classroom.
Quizzes/exams to test what they’ve learnt.
Solutions to books by private authors along with NCERT books.
Notes/summary of chapters for quick revisions.
A system to clear all their doubts.
Offline usability of the app.
Previous year question papers for practice.

Problems with the pre-existing apps :

Screens were overloaded with the information it was confusing to navigate within the app.
Some apps had a feature to clear students’ doubts but it would take time for the educators to reply as they might not be online all the time.
None of the apps had a dedicated section for video lessons for students.
The content within the app was not very organised.
There were no notes and previous year papers provided.
The overall visual design of these apps was very poor.

Now let’s dive into solving the problems!

Solution Screen

The solutions screen or the first screen of the pre-existing apps was not very organised, the main features of the apps were displayed as small cards and these cards were placed at places hard to reach.
A student would have to tap on the solutions card, then choose a grade, subject from a long list, book and then a chapter to view its solutions every single time.

I went for a bottom app bar for solutions, videos, tests, doubts and notes section to make all the options easy to reach and organise everything.
I increased the size of the cards and used them as books and decided to give an ‘add’ button to add more books from other authors.
I decided to take information such as grade and streams(subject) of the students at the time of creating their account which eliminated the need to ask about the grade and select subject from a long list, every time the student would perform an action.

Selecting a chapter

I didn’t like the way how chapters are presented and the download and online buttons looked very weird to me.

I went for a cleaner and simple UI, I removed both the buttons and put a download icon to download the chapters for offline use.

Asking Doubts

So again there weren’t many apps providing an option to students to clear their doubts, I could find only one app with this feature.

All the doubts from different subjects were mixed.
The screen had four tab bar sections namely latest, recommended, My Q&A, Expert Answer.
There was a very small icon on the top right corner which could tell that a doubt is solved by an expert.
Students were not allowed to answer doubts of other students which made the process of getting an answer from educators slow as they might not be available all the time.
Ask doubt FAB was as same as the filter FAB and was placed right under filter FAB.

I divided the screen into different tab bar sections for each subject and a ‘My Doubts’ section which gave it a more organized look and made it easy to search doubts via subjects and asked by user.
I placed a grey ‘solved’ button on the right side of each doubt which would turn green when an educator had answered the doubt.
I also gave an answer button to each doubt, so that students can answer the doubts of other students, which would make asking doubts more interactive and also reduce the time taken to get a doubt solved.
I moved the filter button to the top and added a sort button too and I moved the ask doubt FAB to the top of the bottom app bar.

Test Screen

There were not many apps which were providing tests to students but only one.

Providing sections such as railway exams, defence exams, bank exams etc in an app for students under class 12 doesn’t make any sense to me as this app is not for the preparation of competitive exams, moreover It didn’t provide any tests for students under class 12.

I decided to include tests only for school syllabus as this is not an app for competitive exams.
I made two different sections, First Chapterwise, for those who want to test their progress after each chapter and Full syllabus, for those who want to test themselves just like a final exam.

Video Lectures

The UI was very poor in the pre-existing app, videos and chapters were shown as huge cards and there was no white space everything looked pretty congested.
There was no way to contact the educator about the video and ask questions about the videos.

First thing I did was to remove the cards and present the chapters in a simplified way and give screen some white space to breath.
I made a section of discussion to let users ask questions regarding the videos and a section of resources where the educator could leave the links to important notes/videos/tests etc.