_edited.png){kind=small}
2020
Personal Mentorship Web Application
Web App UI/UX Case Study
Project Overview
JEE CARNOT is a group of IITians who aim to reduce feelings of stress, anxiety, and helplessness during JEE (Joint Entrance Exam) preparation by providing personal mentorship to budding aspirants. It is India's first personal JEE mentorship platform that connects aspirants (mentees) with students who have cracked the prestigious JEE (mentors) and are studying at top-ranked IITs.
How Carnot works?
Mentor Allotment
Student Analysis
Daily Connection
Final Exam
A mentor is assigned using a tried-and-true process that ensures the assigned mentor is the best fit for the student.
On the initial call, the mentor will assess the student's present level of preparation, retention power, and other key parameters in order to get to know the student better.
Mentor will be available to students by phone and WhatsApp at all times. The mentor will assess the student's weekly performance, provide guidance, and set goals for the next days. The magic happens in these calls and exchanges, which are at the heart of the program.
Until the final exam day, the mentor will be available to the student whenever they need it.
During my internship, I designed two web applications for Carnot. One was the Mentee side portal and another one was the Mentor side portal.
Please follow this link to visit the website:
My Role:
UI/UX Design Intern
Team:
Individual
Timeline:
June 2020 -August 2020
Problem
Preparing for a highly competitive exam like the JEE can be stressful and lead to feelings of helplessness and anxiety if one doesn't have proper guidance and a plan. The toxic coaching culture adds even more stress to the already drained-out students.
Solution
Having a mentor who has been through the same circumstances can greatly help a student who is just starting on their journey. The mentor will help the student at every preparation stage so that such negative feelings do not arise and students do not feel helpless.
Design Process
I followed Design Thinking methodology to design JEE Carnot.
Empathize
Define
Ideate
Prototype
Test
1. Empathize
Qualitative Analysis
To understand user behavior, needs, and motivation I did a Qualitative Analysis of potential users where I conducted user research by interviewing 10 students in 11th and 12th grades.
During the interview, the following questions were asked:
​
-
What is your name, and how old are you?
-
What grade do you belong to?
-
What are the most typical issues you encounter while studying for the JEE?
-
How frequently do you experience negative emotions?
-
Is there anything you do to avoid them?
-
What applications do you use to prepare for your exams?
-
Do you find it challenging to do so?
-
What do you do when you're feeling a little off-kilter?
-
Do you ever feel the need to have someone who can guide you better?
-
How important do you think a mentor is during JEE preparation?
The key emotions I discovered from the interview were:
.png)
Competitor Analysis
To identify the potential competitors and understand their strengths and weaknesses, I did market research and a competitor analysis.
2. Define
User Persona
After doing the user research I was able to form the personas of a typical JEE Carnot user.
Amey Shah
"I just want someone who can guide me"
Student
Amey is a Mumbai-based 12th-grader at Ryan International School. He enrolled in a coaching institute for JEE preparation in 11th grade but dropped out since he couldn't manage school and coaching classes simultaneously. He then resorted to self-study but quickly lost track and motivation.
-
Someone who can guide him throughout the whole JEE journey.
-
Personalized schedule for him and guidance on when to study and what to study.
-
A detailed review of the tests that he takes.
Wants and Needs
-
Does not know where to start from.
-
Frequently experiences worry, powerlessness, and burnout.
-
There's only a limited time left to prepare, yet there's a lot of material to cover.
Frustrations
Sarah Roy
"Lack of guidance is the biggest problem for me"
Student
Sarah is a Mumbai-based 11th grader at Springdale International School. She enrolled in a coaching program in 11th grade, but because these classes have a large number of students, the mentors do not provide each kid individual attention.
-
Wants a mentor who can provide her with one-on-one attention.
-
To get tips on Joint Entrance Examination preparation tricks.
-
To locate the most appropriate study material for each subject.
Wants and Needs
-
Overwhelmed with all the study material that is available online.
-
Setting unattainable goals and failing to meet them.
-
Not being able to keep up with her peers.
Frustrations
3. Ideate
Brainstorming
Collating the research findings, I began brainstorming on how the major problems of users can be addressed.
Storyboard
As part of empathizing with the users, I considered the scenario of Shanaya who wishes to have a personal mentor who can help her with all the problems she faces during her JEE preparation.
Information Architecture
After brainstorming ideas, I made information architectures for both the Mentee and Mentor side portals.
Mentee Side:
Mentor Side:
Sketches
After deciding on the information architecture, I made some simple sketches of the screens just to get an idea of what goes where.
Wireframes
The information architecture and sketches helped me decide the layout and flow of the application. So, I then went on to make the wireframes.
Mentee Side:
Home
.png)
Request Material (Subject)
.png)
Request Material (Material)
.png)
Past Requests
.png)
Feedback
.png)
Help and Support (Past Tickets)
.png)
Study Material
.png)
Request Material (Chapter)
.png)
Request Material (Summary)
.png)
Blog
.png)
Frequently Asked Questions
.png)
Help and Support (Chat)
Mentor Side:
.png)
Home
.png)
Material Requests
.png)
Your Mentees
.png)
Material Requests (Expanded)
.png)
Payment History
4. Prototype
Style Guide
I chose blue and orange as my primary colors since they work well together. Blue is a color that connotes trust, security, and loyalty. It promotes calmness and relaxation. The color orange is a happy color. It's a vibrant and energizing color that exudes warmth and enthusiasm.
#09206F
#F9A61A
#F0F3F8
To make the text look clean and crisp, I combined Roboto with Open Sans. This also gave elements a lot of space to breathe.
Aa
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Roboto
Aa
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Open Sans
Final Designs
Mentee Side:
The Mentee side portal has 6 tabs: Home, Study Material, Blog, Feedback, FAQ, and Help and Support. There are also two options available at the top bar: Notifications and User Settings (Profile, Account, and Logout).
Home
The Home Screen consists of details about the mentor: name, email, and phone number. On clicking the "Call Mentor" the student can directly call the mentor.
Study Material
The Study Material screen consists of two buttons: Request Material and Past Requests. There is also an option to see the previously issued material.
On clicking the "Request Material" button, a pop-up appears asking the student about the details of the material required like subject, chapter, and type of material. After the student selects the material, a summary of the cart is displayed. The student can add or delete the material and then click on the "Submit" button.
On clicking the "Past Requests" button, the student can see a history of the requests they have made in the past and the status of the request.
Blog
The Blog screen consists of articles related to time management, preparation strategy, etc that provide useful tips to students preparing for JEE.
Feedback
The Feedback screen consists of a feedback form that the student has to fill at the end of each month. It contains various parameters on which the mentor is assessed.
Frequently Asked Questions
The FAQ screen contains answers to all the frequently asked questions by the students.
Help and Support
The Help and Support screen contains a list of tickets generated in the past. On clicking the "Chat" button, the Carnot Bot will appear. The student can then chat and resolve their queries.
Profile
On clicking the User icon and then on the "Profile" option at the top right corner of the screen, the Profile screen appears which contains all the details of the student.
Account
On clicking the User icon and then on the "Account" option at the top right corner of the screen, the Account screen appears which contains the membership details of the student. There is also a button "Extend Membership" if the student wants to extend the membership. Then there is a Change Password option and a Payment History which contains the transaction details of all the payments made by the student. There is also an option to download the invoice and to raise a concern.
Mentor Side:
The Mentor side portal has 4 tabs: Home, Your Mentees, Material Requests, and Payment History. There are also two options available at the top bar: Notifications and User Settings (Profile, Password, and Logout).
Home
The Home Screen consists of details about the mentor: name, email, and phone number. On the right side of the screen there is a To-Do list provided for the mentor.
Your Mentees
The Your Mentees Screen displays a list of students assigned to the particular mentor. It has various details such as Name, Email, Phone number, and the date on which the student was allotted to the mentor.
Material Requests
The Material Requests screen consists of a list of students who have requested the study material. It displays the name, date of request, and the number of items requested. On clicking the dropdown menu, the details of the items are displayed. The mentor can review them and then click on the "Approve" button. The material will then be sent to the respective student.
Payment History
The Payment History screen displays the past payment record of the mentor. The mentor can download the invoice and also raise a concern if required.
Profile
On clicking the User icon and then on the "Profile" option at the top right corner of the screen, the Profile screen appears which displays details of the mentor such as name, email, phone, alternate phone, college, year, and Carnot rank. There is also an option to edit these details which the mentor can use if they want to make any changes to their profile.
Password
On clicking the User icon and then on the "Password" option at the top right corner of the screen, the Password screen appears. The mentor can change the password by entering the old password and the new one and then clicking on "Save Changes".
5. Test
Usability Testing
I tested the prototype with five possible users after finishing the visual designs to see if they could use it easily. I asked them to complete the following tasks to see how they engaged with the application.
​
-
Sign up and edit profile.
-
Request for study material and view past requests.
-
Fill out the feedback form.
User 1
User 2
The participants breezed through the tasks and offered the following suggestions:
​
-
Include a feature that displays student progress graphically in the form of bar charts and pie charts.
-
Add a feature through which JEE Carnot students can interact with each other.
Impact
Achieved a significant 66.7% increase in the number of JEE Carnot subscribers within a span of just 3 months.
Learnings
-
The group discussions with the technical and design teams were the best part of designing for JEE Carnot. Every time we ran into a problem, each of us took a different approach to tackle it, which significantly boosted my problem-solving abilities.
​
-
I had to explore and learn several design approaches for designing web applications because I was designing a web application for the first time, which was pretty different from a standard website. I learned how to boost interaction and user engagement while keeping the interface simple and intuitive.
​
-
Another major lesson from this endeavor was that I learned to embrace change while also not being afraid to communicate my ideas and opinions about it. When my viewpoints diverged, I attempted to persuade my superiors that a different approach was required for a better user experience. It took some effort, but they were eventually convinced.