Case study:

SkillSeekers

Google UX Portfolio Project

Project Introduction

Introduction:

SkillSeekers empowers new college grads with a user-friendly job search service. With it’s streamlined application process, personalized job alerts and ability to network with industry professionals, users can discover career opportunities near their city, tailored to their interests and skills. 

Project Duration:

8 July 2023 to 5 August 2023

My role:

UX designer leading the app and responsive website design from conception to delivery

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Project Overview

The Problem:

Finding jobs can be challenging and frustrating especially for new college graduates. These individuals often struggle to find relevant job opportunities that match their skills and interests, and they lack effective networking opportunities to discover hidden job openings. 

The Goal:

To design a platform that simplifies and streamlines the job search process and facilitates networking to help find meaningful and suitable career opportunities.

Understaning the User

User Research - Summary:

The research conducted for SkillSeekers aimed to understand the job search challenges faced by new college graduates. It involved personas creation, user stories, and user journey mapping. The findings highlighted the need for a user-friendly platform that simplifies the job search process while emphasizing networking to discover meaningful career opportunities aligned with users' interests and skills.

User Research - Personas:

Based on the user research, I created two personas whose needs, goals, motivations and frustration represent the potenial users of my website

User Research - User journey maps:

Based on the personas, I created two user journeys. one for Rahula and other for Sophia. These journeys outline their interactions and experiences with the product, capturing the diverse paths and needs of our potenial users.

Ideation - Crazy Eights:

I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on simplifying the application process and integrating networking features.

Starting the design:

Starting the design - Paper Wireframes:

Using Crazy Eights as a foundation, I began creating paper wireframes. Iterating through each screen idea on paper, I ensured that the elements transitioning to digital wireframes effectively addressed users' concerns. On the Home Screen, I prioritized easy access to recommended jobs, streamlining the process and enhancing user convenience.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Starting the design - Digital Wireframes:

After ensuring the inclusion of all required features in the paper wireframes, I proceeded to design digital wireframes, basing the design on the findings from the user research.

Easy access to useful features

Featured jobs based on users' skill and interests



Simple and easy to use menu to fill application details



Easy access to app features from global navigation

Starting the design - Digital Wireframes:

Starting the design - Low-fidelity prototype:

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was applying for a job, so the prototype could be used in a usability study. 

View the low-fidelity prototype - Low-Fidelity Prototype

Testing and Iterating the designs - Round 1:

Summary

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. 

Parameters :

Methodology: Unmoderated Usability study

Location: Remote, India

Participants: 5 Participants, 3 Males, 3 Females and 1 Non-Binary Individual

Length: 1 Hour

Key Performance Indicators (KPIs):

Drop-off rates

Conversion rates

System Usability Scale

Findings

1

1

Users couldn’t go back to the previous screen

2

2

Users couldn't go back in the Application Method Screen

3

Users were frustrated because they couldn’t cancel their job application

Affinity diagram

After the usability study, I created an affinity diagram where I grouped similar observations in order to create themes

Iterations

Based on the insights from the usability studies, Participants couldn’t go back to the previous screen, So I provided a more obvious back button

Participants couldn't go back in the Application Method Screen, So I added an “X” icon to to exit the Application Method Screen

Participants were frustrated because they couldn’t cancel their job application, So I provided an option to cancel the application after applying for it

Refining the design

Refining the design - Typography and color:

Typography:

Logo: Heebo - Extrabold

Heading: Plus Jakatra Sans - Bold

Information: Plus Jakatra Sans - Regular

Color:

#5D00BA

#FFFFFF

#000000

Refining the design - Mockups:

Refining the design - High-fidelity prototype:

Using the completed set of mockups, I created a high-fidelity prototype. The primary user flow I connected was applying for a job, so the prototype could be used in a usability study. 

View the low-fidelity prototype - High-fidelity prototype

Accessibility Considerations

1

Clear labels for interactive elements that can be read by screen readers.

2

Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.

Responsive Design

Responsive Design - User Flow:

With the app designs completed, I started work on designing the responsive website. I began by doing the crazy eights exercise so I can find use cases for my website

Sitemap

After the doing the crazy eights exercise, I created a sitemap. The structure I chose was designed to make things simple and easy.

Responsive Design - Digital Wireframes:

Responsive Design - Low-fidelity prototype:

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was applying for a job, so the prototype could be used in a usability study. 

View the low-fidelity prototype -

Mobile Low-Fidelity Prototype and

Tablet and Desktop Low-Fidelity Prototype

(Note: To view the Desktop Prototype, switch to Desktop mode using the left menu in Figma)

Responsive Design - Mockups:

Responsive Design - High-fidelity prototype:

Using the completed set of mockups, I created a high-fidelity prototype. The primary user flow I connected was applying for a job, so the prototype could be used in a usability study. 

View the high-fidelity prototype -

Mobile High-Fidelity Prototype and

Tablet and Desktop High-Fidelity Prototype

(Note: To view the Desktop Prototype, switch to Desktop mode using the left menu in Figma)

Going Forward

Impact:

SkillSeekers transformed the job search for college grads. Users found it easy to navigate, with streamlined applications, personalized alerts, and meaningful networking, boosting engagement and application rates.

What I learned:

I learned the importance of designing for social good, empowering individuals with technology for meaningful opportunities and fostering an inclusive society. Additionally, I gained valuable experience in designing for multiple screens, ensuring a seamless user experience across devices.

Next Steps

1

Conduct follow-up usability testing for the different screen sizes of the website

2

Identify any additional areas of need and ideate on new features

Let’s Connect!

Thank you for your time reviewing my work on the SkillSeekers Project! If you’d like to see more or get in touch, my contact information is provided below.

Next
Next

CustomSpokes