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