UX Design Case study: Career Tracker

A tool to help people transition to or start a new career

Adeeba M
7 min readAug 11, 2022
Image of the career tracker responsive website mockups

Introduction

Hi, I am Adeeba. I recently completed Google’s UX Design Professional Certification program in association with Coursera. The third project was to design a dedicated mobile app and a responsive website. The prompt I have chosen was to design a tool to help people transition to or start a new career.

Role

UX Designer, UX Researcher

Responsibilities:User Research, Paper and digital wireframing, Low and high fidelity prototyping, Conducting usability studies and iterating on designs.

Project Duration

April 2022 — June 2022

The Problem

Users want a tool to find career fields that best fit them and encourage them to excel in that career.

The Solution

“Career tracker” is a tool that is intended by a fictional Service organization to help people find careers that are the best fit for them and also provide career mentorship. Career tracker provides career mentorship programs based on the user’s interested careers.

User Research

The problem is defined, next step was to conducting user research to know about the user, pain points and their needs.I conducted user interviews and understand the user needs and pain points.Based on the information from the interview, I created personas and user journey maps.

I conducted user research to find the pain points of the users when searching about career changes and starting a new career. I conducted interviews and created a user journey map to know the pain point of the users that I am designing for.

The user group was students and professionals between the age of 20–60 who want to start a new career or wish to transition to a career. The user research helped to know the pain points and start the initial design of the dedicated mobile app “Career Tracker”.Persona

Persona

Personas are fictional users whose goals and characteristics represents the needs of a large group of users.Here I created two personas for two different groups, one for the students who want to find career fields that matches with their interests. Second user group was professionals who wish to transition to a new career.

Persona 1: Amelia

Problem Statement : Amelia is a 3-year university student who needs to know more about career opportunities because she can prepare well for the job that is the best fit for her.

Persona 2: Ali

Problem Statment: Ali is an IT professional who needs to know more about job opportunities and career change because wish to transition to a new career.

Image of fictional user personas used in the research process of career tracker app.
user persona

user journey map

I mapped out the users’ steps to see how they normally search for career mentorship tools and career-changing options. Users normally search for career mentorship programs on websites and sometimes they are frustrated that they don’t get the results they wanted.

Image of user journey map used in the user research process of career tracker
User journey map

User Pain points

  • Confused about Career interests that are the best fit for them
  • Incomplete Information about Career fields
  • High payment in career mentorship programs that is not worthy
Image of list of user pain points
User pain points

Ideation

Based on the personas and user journey maps, I have got the initial design ideas to start the designing process.

The solution was to design “Career tracker”,A tool that is intended by a fictional Service organization to help people find careers that are the best fit for them and also provide career mentorship. Career tracker provides career mentorship programs based on the user’s interested careers.

Paper wireframes

Paper wireframing was done to group the initial big and small design ideas.

Images of paper wireframes
Paper wireframes

Design Decisions

After the ideation process I came up with three design solutions and the Career tracker app is built upon these three design decisions.

  • Career test for the first time users : For the first time users of the career tracker, there is a career test to know about the user and their career interests.
  • Career interests from the career test : based on the career test study report, interested career areas are generated.
  • Articles, Job Alerts and Events : Users will get the notifications about the articles, job alerts and events related to a specific career field.

User flow diagram

User flow is the path taken by a typical user on an app or a website, so they can complete a task from start to finish. For Career tracker app, User flow begins from a career test that is used to know about the career interests .

Image of user flow diagram
User flow diagram

Digital Wireframes

Tool : Figma

I created digital wireframes based on the paper wireframes and initial design solution by using Figma.

Digital wireframes of career tracker
Digital wireframes
Link to the low-fidelity prototype

By connecting the wireframes, A low fidelity prototype is created and is used in the usability study .

Usability Study

I conducted usability study with 5 participants to test the low fidelity prototype with users. Based on the findings from the usability study, I iterated on the initial designs and then I created mockups for the career tracker app.

Usability study findings

  • Search bar : Users wanted a search bar on the home page and career change page to easily get the desired results.
  • Notification button: Include notification button in the app bar to easily get the notification.
  • “Apply” button : Include apply button in the job alert option to directly apply for the job from the view itself.
  • Career interest filed layout : Change the appearance of the career interest field to easily understand the selected and unselected career fields.

these are the major findings from the usability study.

  • Connect with mentors : An option to interact with career mentors and added a call to action button on the home page.

I iterated on the initial wireframe and also added some design ideas into the wireframe,

  • Connect with mentors : An option to interact with career mentors and added a call to action button on the home page.
  • Mentor Profile : Added Mentor’s profile information in the Contact itself so that users can find their mentor’s qualification and educational background.
Image of Career tracker app home screen before and after usability study
Wireframe Designs before and after usability study
Image of Iterated digital wireframes of career tracker.
Wireframes after iteration process

Based on the iterated wireframes, Mockups and high-fidelity prototype is created for the career tracker app.

Mockups for the career tracker app
Mockups
Link to the high-fidelity app prototype

Accessibility considerations

  • Important page links are accessible from the home page(Articles,Jobs,Events and Connect with mentors)
  • Used Icons and buttons with labels.

Responsive web design

This project was to design a dedicated mobile app and a complementary responsive web site.I created a responsive website based in the career tracker app.

Sitemap:Created a sitemap to guide the organizational structure of each screen design to ensure a Consistent experience across devices.

Image of site map of the career tracker responsive website
Site map

Based on the site map and career tracker dedicated mobile app, I designed wireframe for the responsive website.

Image of wireframe of the career tracker responsive website
Responsive website wireframe

Iterated on the wireframes and mock ups for the website and web app is created.

Image of the responsive website mockup
Responsive website mocks
Link to the high fidelity prototype:website
Image of mockups of the career tracker web app
Responsive web app mocks
Link to the high-fidelity prototype: web app

Design System

Image design system
Design system

The Impact

The career Tracker app allows users to find anything related to a job field (Articles, new Jobs opportunities, and events).

User feedback — “This is what I am looking for for a long time “

What I learned

After Designing a dedicated mobile app and Complementary responsive website, I learn more about user experience and user journeys when a user addresses the same solution in different ways.

Thank you

--

--

Adeeba M

UI/UX Designer and Web Developer | Sharing insights and inspiration to fuel creativity.