Career Path Exploration

Role - UX Researcher and Designer

Duration - 2 weeks

Tools - Figma, Illustrator, Notion, Google Forms
‍
Team Size - 4 members

Background Research User Interviews Define

Data Synthesis Design Process Hi-Fi Prototype Next Steps

The challenge

The city of DC is looking for ways to help local residents find a plot a course for the jobs of their dreams. The goal is to eliminate the barriers keeping people from pursuing jobs that are of interest or best fit for them, being able to explore pathways and plan a course to pursue new careers.

Before defining the problem,

the team agreed that we needed to first conduct background research to better understand the business scope and type of users.

Upon reviewing the current DC government's website, we found it offered very limited resources, as well as being clunky and difficult to navigate. Although it showcased information surrounding local events, news updates, and highlights, it lacked any sort of relevant information for locals to explore career or jobs. The career resources page also led to an error.

Establishing research

From here, our research was conducted by

Setting Goals

• Expose users to careers aligned with interests

• Provide online courses covering career topics

• Allow users to explore new career pathways

• Supply information and resources

• Offer a mentorship program

Identifying Needs

• Provide comprehensive career information

• Have a profile and messaging system

• Contain a job board with filters and role details

• Resources including resume, interview preparation

• Easy to use and navigate user interface

To collect and compare data around other companies,

we conducted a competitive analysis. For direct competitors, we analyzed online employment service companies Linked and Indeed, as well as OaklandPic (Oakland Private Industry Council). Yelp, Foursquare and Tripadvisor were chosen as references of indirect competitors.

Our analysis involved evaluating features and functions such as: keyword search, notification system, friend or network list, reviews, filter, contact form, and a profile or account creation. We took the most succesful ones and made a note to incorporate into our product.

Seeking insights

Using a screener survey,

we interviewed 14 users to constrain a group of potential interview candidates targeting people who are: currently not working, and/or working but are not happy with their job.

Out of 52 respondents, we selected 14 to interview. Our questions were aimed at understanding peoples' career journey and obstacles they faced landing or working a job.

Clarifying the statements

Defining the problem

From key insights and takeaways from the user interviews, we sought to define the problem that users faced,

Local job seekers in DC need a convenient and personalizable tool along their career path that will provide the confidence, connections, and skills needed so that they can successfully secure a job with the specifications they want in the field they want.

Formulating the solution

Our redesign will provide resources for jobs seekers to find mentors, networking tips and events, job application review and support, in- person and online events, and more information about different types of careers.

It will allow for different levels of filtering to make it easier for job seekers to find opportunities that meet their needs, as well as more information on the job and company before applying. These resources will help DC residents feel more supported and confident as they pursue careers they are interested in.

Local job seekers in DC need a convenient and personalizable tool along their career path that will provide the confidence, connections, and skills needed so that they can successfully secure a job with the specifications they want in the field they want.

Representing the target user

Meet Timid Tina,

a persona created based on data from our user interviews. She feels lost and is struggling to find the help and resources necessary to support a career path.

Her frustration involves feeling insecure about what skills matches her needs, and is discouraged by how difficult the job process is.

Understanding the target user

To better interpret Tina's experience,

a journey map was created to help visualize the phases of browsing the site.

She begins by scanning the various career pathways and after finding one of interest, explores the resources and information associated with it. Over time, her initial thoughts and feelings of being unsure leads to a gain in confidence and skills.

After understanding the who, what, and why to solve for, the next step was beginning the design process with a

Site Map

Using our research data as a foundation, we began constructing the backbone of the website. We took notes to understand the current DC.gov information architecture, and made sure to incorporate an experience with straightforward and user-friendly navigation.

View Site Map

User Flow

Remembering the problem and HMW statements, we created a user flow depicting the various steps and decision points for a user navigating through the site. The final flow, although complex, shows the complete paths a user experiences when registering with a mentor, taking a course, creating a profile, and or viewing resources.

View User Flow

Sketching ideas

Beginning with the landing page, users can navigate to a screen depending on their need

In each respective page, carousel and galleries contain different media types (images and videos) to help present relevant information in an easy to understand and intuitive way.

Wireframing

I created mid-fi wireframes to bring the sketches to life

The main priority was to ensure all pages were easy to navigate, so users would be able to locate resources and information effortlessly without any issues.

We improved the current DC.gov website by helping

engage users with content in a visual and immersive method

improve scannability and navigation for finding information

provide different resources for users to explore at their own pace

incorporate an account sign-in to network by messaging and adding users

refresh the existing design by adding graphics and improve spacing

Iterating on the design

We sought feedback by conducting usability tests on a set of 4 users

Each user was given a specific task to complete, where we observed their interactions. Based on their speed and accuracy, we made improvements to our mid-fidelity prototype.

Adding color

Our style guide helped breathe color and a consistent typography style to the design

To ensure consistency across elements in our final design, we built a component library

This included a navigational dropdown menu, a footer, various icons, as well as an image carousel with navigational buttons.

View Component Library

Incorporating further improvements

Like our mid-fidelity iterations, we conducted usability testing to receive feedback for improving our high-fidelity prototype

Three different tasks were assigned, and we carefully noted the time and thought process each user experienced for each flow.

Next steps and reflections

Building improvements

As with many other UX projects, conducting further usability test and user research would be help determine areas to improve.
‍
Conducting a moderated card sort would help determine if the navigation was intuitive for users, as well as expand out job filters.

Shaping the reality

Connecting with developers at the handoff stage would ensure our design is feasible, while at the same time, monitor the use of the live site to see if our design does solve for the problem we determined.

Designing for needs and behaviors

The final product includes information and resources that were built upon understanding the needs of the user. While I consider the business requirement and user goals met, how can we further test the design and build upon it in the future? What methods or behaviors would we like users to feel?