Cara - a new solution for job hunting

Project type

UX design

Product type

Mobile app

Client

Student project

Timeline

September - December 2022

My role

Product designer
UX researcher
Solo student project for Digital Product Design Class - MS Information Experience Design - Pratt Institute

Cara

A tool to organize job search & make job hunting more efficient.

For the Digital Product Design Course in our MS Information Experience Design program at Pratt Institute, I was tasked with choosing a problem and creating a design solution to solve it.

As the sole designer in the project, I decided to create a mobile app that serves as a job search assistant, and makes job hunting more efficient.
‍

Given the limited time and resources, I created a prototype and conducted usability tests with 3 users before coming to the final design solution.

WHat makes job hunt inefficient

Job seekers need a good tool to save their job search results from multiple sources & keep track of the job applications,
‍rather than a manual work sheet.

The solution

A mobile application that allows users to organize job search results & make job hunting more efficient.

1. A personalized job board

Easily save and view job search results by positions, and companies
See the status of each saved job

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

2. Quickly save job search results

Simply copy and paste the link

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

3. Self-manage job applications

Update the current status of a job application
Save documents (resume, cover letter) associated with each application
Add personal notes, useful resources, or to-do list

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

4. Deadlines reminders

Never miss a job opportunity again

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Design process

DISCOVER + DEFINE

Meet Andi who is struggling with keeping track of the jobs he applied to

Product requirements

Before going into ideation and design exploration, I came up with a set of principles for the app, which later became helpful to decide the product’s features.

Ideate the solution

Information Architecture

This original sitemap visualized my idea for the product’s content structure and user’s in-app navigation.

Wireflow

A wireflow is a combination of wireframes of app screens and a flow chart. The wireflow shows user’s movements in the app and how the screen would look like for them in each step.

Design exploration

My first approach to create the solution

Create Jobs & Applications pages separately

JOB page - save job search results
The APPLICATION page - where users can view all the job that they had applied to

"Jobs" page

"Job application" page

A status bar for job application status updating

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Keyword highlighting feature

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

user Testing

Testing the first design approach with users

Method

Moderated user testing

Tool

Zoom, Figma

Participants

3 users

Living in NYC area

Currently in the job hunting process

Findings

100%

Understand the app's features

3.6/5

Ease of use rating

3/5

Likely recommend to others

User Quotes

I’m not sure how the job page work and what I can do on that screen.

Do I really need this whole application page?This look like the inside of the job board/job list but organized in a different way

I expect the status bar to look like a progress bar, which lets me know where I am in the process, these look like buttons. I'm confused.

User testings conducted via zoom

DESIGN IMPROVEMENTS

Major improvements in my design

Combine Jobs & Application pages

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

After - "My jobs" page

Before - "Jobs" page

Before - "Job application"

Improve the status bar

Final design

Second version

First version

Add Homepage for job hunting overview and deadlines reminders

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Styleguide

Reflection

What I would do differently

If I had more time and resources to start this project, I would conduct research from the beginning to verify the problem, and have a better understanding of users’ pain points, motivations, behaviors and thought process.

This research finding would be beneficial for the decision making throughout the designing process, hence creating an impactful and effective solution.

What I learn from this project

Through this project, I have learnt to create a design system for product’s user interface. This helped the design work become more efficient, and brought a consistency to the visual aspect of the product.

In addition, creating a product with a design system mindset allowed me to significantly improve my design thinking by considering different scenarios in which a user interacts with a design element in order to create different states for it.