CAREER PATH

A responsive website to help students transform their passion into their career

Time

November 2021 - December 2021

Project

Responsive Website Design

Category

Case Study

Learnings

1. Design is an iterative process but knowing when to stop is just as important as the iterations themselves.

This emphasizes the importance of making informed decisions when it comes to the completion of a design, recognizing that overthinking or endless iterations may not always lead to improvement.

2. When in doubt, always return to the users.

There were numerous instances where I struggled to design icons or pages. Each time, I revisited my research and reconnected with what I had learned about the users, which helped me better understand their needs and perspectives.

3. Each demographic requires a tailored approach.

Working with children and younger students taught me how perspectives on education can vary widely. It was essential to adjust my thinking and design approach to meet their unique needs and preferences.

View the Live Prototype

The Problem

To help students make an informed career decision, a career counselor is needed. However, most of the Indian institutes give the least importance to it.
Students are overwhelmed and confused when choosing a career path after their 12th grade. This causes students to turn to online resources to understand the different career streams in India. However, since most career guidance websites require a fee to help the student choose a career, many students are unable to use this opportunity. The information available on the internet seems overwhelming and hence many students in India choose a career that is recommended by their parents and relatives, unaware of whether the career chosen is their passion 

The Goal

A quick, easy and reliable way for students to know themselves better and choose a career best suited for their interests

EMPATHIZE

What do the newspapers say?

What do the users say?

How do users choose the right career?

Holland's theory of personality types

Pain Points

Navigation

Career guidance websites have lots of information, thus making it difficult to navigate

Time

Students feel they don't have enough time to properly research all the available career options

Share

Many students find it difficult to share their interest with their parents without proper information about the career

IDEATE

Meet the users

User Journey May

I mapped out the journey of Kartik, who is a student trying to choose his career path

Competitive Analysis and Brainstorming ideas

I carried out a competitive analysis on 3 popular websites used by students to choose their careers. Based on their features and pain points, I grouped the information together to find out the user pain points which need to be addressed. I brainstormed a few ideas to address these pain points and this formed the basis of the further steps in the project.


Information Architecture

After the brainstorming, I started creating a site map to gain a better understanding of the website I was about to design.

Paper Wireframes

IDEATE

Meet the users

User Journey May

I mapped out the journey of Kartik, who is a student trying to choose his career path

Competitive Analysis and Brainstorming ideas

I carried out a competitive analysis on 3 popular websites used by students to choose their careers. Based on their features and pain points, I grouped the information together to find out the user pain points which need to be addressed. I brainstormed a few ideas to address these pain points and this formed the basis of the further steps in the project.


Information Architecture

After the brainstorming, I started creating a site map to gain a better understanding of the website I was about to design.

Paper Wireframes

DESIGN

Low Fidelity Wireframes

User Testing wireframes

I conducted a usability study with 4 participants and gave each of them 3 tasks to complete.

Task 1: Take the first step to choosing your career, then navigate to one of the careers suggested for your personality
Task 2: Save the career to My Careers, proceed to the next step, and complete the process of choosing a career
Task 3: Try out the notes feature and return to the homepage

DESIGN

Low Fidelity Wireframes

User Testing wireframes

I conducted a usability study with 4 participants and gave each of them 3 tasks to complete.

Task 1: Take the first step to choosing your career, then navigate to one of the careers suggested for your personality
Task 2: Save the career to My Careers, proceed to the next step, and complete the process of choosing a career
Task 3: Try out the notes feature and return to the homepage

DESIGN

Low Fidelity Wireframes

User Testing wireframes

I conducted a usability study with 4 participants and gave each of them 3 tasks to complete.

Task 1: Take the first step to choosing your career, then navigate to one of the careers suggested for your personality
Task 2: Save the career to My Careers, proceed to the next step, and complete the process of choosing a career
Task 3: Try out the notes feature and return to the homepage

PROTOTYPE

High Fidelity Key Screens

Prototyping

The actual prototyping took longer than I had expected since I had to design a few more screens than I had initially created. I also had to create a few overlays, button animations, etc.

View the Live Prototype

PROTOTYPE

High Fidelity Key Screens

Prototyping

The actual prototyping took longer than I had expected since I had to design a few more screens than I had initially created. I also had to create a few overlays, button animations, etc.

View the Live Prototype

TEST

Usability testing

I conducted a second round of usability testing. I preferred to use an unmoderated remote user testing method. Using the Useberry plugin in Adobe XD, I carefully picked the 3 most important tasks a user must accomplish in order to choose a career

Task 1: Take the personality test to find your ideal career
Task 2: Choose "Graphic Designer" from the suggested careers and save it to “My Careers”
Task 3: Proceed to Step 3 and choose "Graphic Designer" and return to the homepage

Pain Point 1

Usability study revealed that most users found it difficult to find the suggested careers. Due to this reason, the suggested careers section has been moved to the top in such a way that a part of it appears above the fold and changed the section heading from Careers to Explore to Suggested Careers.

Pain Point 2

The usability study revealed that most users found it difficult to proceed to the next step in choosing a career. Hence, the Proceed to Step 3 button has been moved to make it easily accessible.


Pain Point 3

May participants in the usability study felt that the way to share the notes should be more obvious. To address this, the share icons have been placed above the fold. Thus making it easy to find.


TEST

Usability testing

I conducted a second round of usability testing. I preferred to use an unmoderated remote user testing method. Using the Useberry plugin in Adobe XD, I carefully picked the 3 most important tasks a user must accomplish in order to choose a career

Task 1: Take the personality test to find your ideal career
Task 2: Choose "Graphic Designer" from the suggested careers and save it to “My Careers”
Task 3: Proceed to Step 3 and choose "Graphic Designer" and return to the homepage

Pain Point 1

Usability study revealed that most users found it difficult to find the suggested careers. Due to this reason, the suggested careers section has been moved to the top in such a way that a part of it appears above the fold and changed the section heading from Careers to Explore to Suggested Careers.

Pain Point 2

The usability study revealed that most users found it difficult to proceed to the next step in choosing a career. Hence, the Proceed to Step 3 button has been moved to make it easily accessible.


Pain Point 3

May participants in the usability study felt that the way to share the notes should be more obvious. To address this, the share icons have been placed above the fold. Thus making it easy to find.


TEST

Usability testing

I conducted a second round of usability testing. I preferred to use an unmoderated remote user testing method. Using the Useberry plugin in Adobe XD, I carefully picked the 3 most important tasks a user must accomplish in order to choose a career

Task 1: Take the personality test to find your ideal career
Task 2: Choose "Graphic Designer" from the suggested careers and save it to “My Careers”
Task 3: Proceed to Step 3 and choose "Graphic Designer" and return to the homepage

Pain Point 1

Usability study revealed that most users found it difficult to find the suggested careers. Due to this reason, the suggested careers section has been moved to the top in such a way that a part of it appears above the fold and changed the section heading from Careers to Explore to Suggested Careers.

Pain Point 2

The usability study revealed that most users found it difficult to proceed to the next step in choosing a career. Hence, the Proceed to Step 3 button has been moved to make it easily accessible.


Pain Point 3

May participants in the usability study felt that the way to share the notes should be more obvious. To address this, the share icons have been placed above the fold. Thus making it easy to find.


REFLECTIONS

Accessibility considerations

High Contrast Ratio

The WCAG AA guidelines requires a contrast ratio of atleast 4:5:1 for normal text and 3:1 for large text. The color contrast of the website meets the WCAG AA guidelines

Compatible with Assistive Technology

Used labels for heading as ell as appropriate hierarchy and emphasis to aid users with screen readers

Consistent Components

Keeping the user interface consistent helps users with difficulty in reading to easily understand the different components even if the device is changed

Key Takeaways

1. Build, Test and Repeat: Continuously test the prototype at every stage of the process to uncover user needs.
2. Users should always be given the first priority. Always proceed with user research and the data gathered.
3. Observe the users: Keenly understand when the user is feeling confused, frustrated, irritated, etc. Other than understanding heatmaps and user flows, focus on the users reaction to the task, this truly helps us to understand the user needs better.

Impact

Users feel the website would be useful for any student in India since Internet connection is all a student needs to access the website

Quote from the usability study

"The users flow is really intuitive. I was able to find a career I love. And I will be exploring it"

REFLECTIONS

Accessibility considerations

High Contrast Ratio

The WCAG AA guidelines requires a contrast ratio of atleast 4:5:1 for normal text and 3:1 for large text. The color contrast of the website meets the WCAG AA guidelines

Compatible with Assistive Technology

Used labels for heading as ell as appropriate hierarchy and emphasis to aid users with screen readers

Consistent Components

Keeping the user interface consistent helps users with difficulty in reading to easily understand the different components even if the device is changed

Key Takeaways

1. Build, Test and Repeat: Continuously test the prototype at every stage of the process to uncover user needs.
2. Users should always be given the first priority. Always proceed with user research and the data gathered.
3. Observe the users: Keenly understand when the user is feeling confused, frustrated, irritated, etc. Other than understanding heatmaps and user flows, focus on the users reaction to the task, this truly helps us to understand the user needs better.

Impact

Users feel the website would be useful for any student in India since Internet connection is all a student needs to access the website

Quote from the usability study

"The users flow is really intuitive. I was able to find a career I love. And I will be exploring it"

REFLECTIONS

Accessibility considerations

High Contrast Ratio

The WCAG AA guidelines requires a contrast ratio of atleast 4:5:1 for normal text and 3:1 for large text. The color contrast of the website meets the WCAG AA guidelines

Compatible with Assistive Technology

Used labels for heading as ell as appropriate hierarchy and emphasis to aid users with screen readers

Consistent Components

Keeping the user interface consistent helps users with difficulty in reading to easily understand the different components even if the device is changed

Key Takeaways

1. Build, Test and Repeat: Continuously test the prototype at every stage of the process to uncover user needs.


2. Users should always be given the first priority. Always proceed with user research and the data gathered.


3. Observe the users: Keenly understand when the user is feeling confused, frustrated, irritated, etc. Other than understanding heatmaps and user flows, focus on the users reaction to the task, this truly helps us to understand the user needs better.

Impact

Users feel the website would be useful for any student in India since Internet connection is all a student needs to access the website

Quote from the usability study

"The users flow is really intuitive. I was able to find a career I love. And I will be exploring it"

Email

|

LinkedIn

© 2026 - Made with 🩵 by Leona Phebe Pinto

Email

|

LinkedIn

© 2026 - Made with 🩵 by Leona Phebe Pinto

Email

|

LinkedIn

© 2026 - Made with 🩵 by Leona Phebe Pinto

Email

|

LinkedIn

© 2026 - Made with 🩵 by Leona Phebe Pinto