Introduction

UI/UX Case Study

Career Guide Platform

Career Guide provides comprehensive tools and resources to explore your potentials and career possibilities.

My Role: UX Researcher & UI Designer

View Prototype

Click to reveal 👇

1. The Problem

2. The Solution

3. Research Process

4. Personas

5. User Journey Map

6. User Flow

7. Typography & Colours

8. Visual Design

9. User Testing

10. Future Plan

THE PROBLEM

Have you ever had

trouble choosing a job?

Have you ever had

trouble choosing a job?

Have you ever had

trouble choosing a job?

70%

of high school students wish they had more information and support when exploring career options

- American School Counselor Association-

42%

of employers believe recent graduates aren’t ready for work because they didn’t get enough career guidance.

-Career Builder-

60%

of students feel uncertain about their career choices by the time they graduate

-Interest in Guidance-

ONLY

30%

of students report having meaningful career exploration experiences during high school

-National Career Development Association-

THE PROBLEM

Have you ever had trouble choosing a job?

70%

of high school students wish they had more information and support when exploring career options

- American School Counselor Association-

42%

of employers believe recent graduates aren’t ready for work because they didn’t get enough career guidance.

-Career Builder-

60%

of students feel uncertain about their career choices by the time they graduate

-Interest in Guidance-

ONLY

30%

of students report having meaningful career exploration experiences during high school

-National Career Development Association-

THE SOLUTION

A platform where users can …

Explore Careers

Find Apprenceticeship

Learn & Practice

Network and find mentors

Journalize Tasks

Have personalized guidance

Explore Careers

Find Apprenceticeship

Learn & Practice

Network and find mentors

Journalize Tasks

Have personalized guidance

Explore Careers

Find Apprenceticeship

Learn & Practice

Network and find mentors

Journalize Tasks

Have personalized guidance

Research Process

Starting with a question

How might we help career determine their interests and strengths, understand the tasks of their desired careers, and access relevant career statistics, including required commitment and potential challenges?

To validate the problem I was trying to solve, I conducted user interviews with the target audience that would give me valuable insights. Besides my primary target audience ,which is high-school students, I also interviewed undergraduate students and professionals to gain broader perspectives

Who are my users?

I decided to create three personas based on my findings: the career explore, career aspirant, career switcher, and career mentor. Among these personas, my main focus is the career explorer.

User Journey Map

The user interview helped me to map out my user journey map with the pain points and opportunities to solve the problems.

Designing a simple and enjoyable experience

The career guide app is tailored for tech-savvy individuals, ranging from teenagers to middle-aged adults. Keeping this in mind, the app's design should be modern and vibrant, with advanced features that maintain intuitive and manageable user flow.

It’s time to think about

colours and typography

Since blue is often associated with intelligence and trustworthiness. I decided to choose it to be my primary colour. And other vibrant colours including orange, pink, mint to complement blue colour and create the modern look for the app

Since blue is often associated with intelligence and trustworthiness. I decided to choose it to be my primary colour.

And other vibrant colours including orange, pink, mint to complement blue colour and create the modern look for the app.

Paper ketch to high-fidelity

60+ screens were designed

User testing to find the best solution ...

GOAL:

Users can easily read career info, learn, and connect with others

Winner

Option 1

In the tab bar, you can see three important actions. If you want to find more options, you can click on the hamburger menu to see the extra actions.

RESULT:

Users was able to quickly complete 3 main tasks.

Option 2

Navigation bar with 5 categories that users can navigate to complete their tasks

RESULT:

Users were confuse where to click to perform 3 main actions. They had to click on each tab to discover its content.

GOAL:

Users can easily scan information about a mentor and book appointment with them

Users can easily have information about a mentor and book appointment with them

Option 1

The CTA button is at the bottom near the tab bar. You can see the expertise listed as tags, which help users find other mentors with similar skills.

RESULT:

The CTA button occupies space, requiring users to scroll more to see all the information

Users were not aware the tags are clickable

Winner

Option 2

Mentor info categorized by tabs. CTA button is displayed under the mentor job title.

RESULT:

Users can view all information of mentor and locate CTA button to book a mentor session.

What’s next ?

The main lesson from this project is that more interaction and personalization really boost user engagement with the product.

For the next version of the platform, I’d like to explore:
How can we reach more people to attract a bigger audience?
What are our current user retention rates, and how can we encourage users to finish their lessons?