Project Overview
Path Finder is a mobile app and responsive website that helps new college graduates find the right career. Users can use the product to explore different careers, submit and track job applications, and find real career stories.
Project Type
Self Project
Duration
2 Weeks
Design Role
UI/UX Designer
Prototyping
User Testing
Tools
Figma
The Problem
Most new college graduates lack experience and skill and job applying experiences, which makes finding a good matching job while competing with senior professionals extremely challenging for them.
The Solution
The goal is to create an app and a corresponding website, and the final product that will be helping me to reach this goal is Path Finder. Path Finder is a job-finding application and website that was specifically designed for new college graduates. By using Path Finders powerful job match-making feature and career stories, users will explore more career possibilities without hassle.
The Path Finder app
The Challenge
The biggest challenge in this project is to create a user experience that is simple and easy to use but also effective at the same time. There are hundreds of job searching applications and websites in the world right now, and understand what my competition did correctly and what can be improved is the key to success for this project.
How might we make the job searching experience easier and more effective for new college graduates?
User Research
My target users are senior college students and recent college graduates who are seeking employment opportunities. I want to discover how my target uses the search for jobs, what they focus on during the job search, and how they feel about the process. I created a survey and conducted interviews to help me better understand my target users by identifying their mindsets during the process, behaviors, and pain points. In the end, I used the information I gathered to create an empathy map and personas.
Empathy map created based on research findings
User Pain Points
After conducting my user research, I listed the top three pain points of my target users. These are the pain points that are commonly shared among my survey results and my interview participants.
1
Users having a hard time keeping track of the jobs they have applied to and get updated applications statuses.
2
The job descriptions sometimes can be overwhelming and oftentimes unclear or misleading.
3
Users don't have a way to explore different jobs and roles in different industries and fields.
User Persona
Based on my findings, I have created two personas to reflect the lifestyles of my target users and gives me an idea of how to meet my users’ needs or challenges.
User persona 1
User persona 2
User Journey
I created a user journeys map off the empathy maps and user personas I have made. It allows me to identify the series of experiences a user has to achieve a specific goal and improvement opportunities.
User journey map
User Flow
To consider the needs and desires of my user, I have created a user flow to list out the exact steps for the user to complete a core task. While making the flow, I have kept some questions in mind: what are the users' expectations? Are there too many steps to complete the task?
User flow for submitting a job application
Ideation
After user research, I started the ideation process. I first start with an exercise called Crazy Eight. After completing the exercise, I begin to develop some of the ideas by drawing paper wireframes. I have adopted the mobile-first philosophy where I will design for mobile first then work mine to larger screens. I have made five iterations and one final design for each screen for mobile and used them as paper prototypes and tested them.
Some of the sketches and paper wireframes
Digital Wireframes
I converted my revised paper wireframe into digital wireframes using Figma, and made several iterations.
Digital wireframes
Usability Study
Before developing my high-fidelity mockups for the screens, I have conducted an unmoderated usability study with 5 participants on the low-fidelity prototype and gathered my findings into an affinity diagram. Here are my findings:
For most users, it is not clear that how to locate and find a previously applied job.
all users think that the job search and matching features are useful.
Insights:
A more powerful search and matching function can reinforce the experience.
uploading or reviewing a user's resume is unclear to all users.
Insights:
Users need a more intuitive way to upload and review their resumes.
Insights:
Users need a clear indication about the status of a job and search for previously applied jobs.
Usability study findings and insights
Design System
I have developed a design system that I can use throughout the app. It allows me to create a consistent design during the process and maintain the brand aesthetics. The design system has included design elements, colors, typography, and iconography.
Design system
High-Fidelity Mockup
After usability testing, I gathered and analyzed the feedback and insights. Based on my findings, I have made serval iterations on the design. Once I make sure all requirements have been met, I started to create high-fidelity mockups.
Onboarding
The Onboarding section of the app is an essential part of the user experience. It explains the basics of the app and includes a short six-question questionnaire that helps the app identify and match the most suitable job for that user.
Onboarding screens
Home
The Home screen is an essential part of the app. It displays the best matching job information to the users, carefully selected based on users' preferences, and the latest career stories for the users to explore different career paths. The home screen also displays new job openings and notifications. The user can also utilize the search function to search for jobs as well.
Notification, home, and search result
Applications
The Application screen provides the users the ability to track the status of their submitted applications. Each submitted application will be labeled as either In-Review, Interview, or Job Offer. Any closed job applications will be stored in the Archived section. The user can also view and apply for any jobs they saved earlier.
Application and job details screen
Messages
The Message screen allows users to be directly contacted by recruiters and hiring managers. Once a user has submitted an application, Path Finder will automatically create a conversation between the applicant and the recruiter or hiring manager. At the top of each conversation, there will be a section indicating which job application this conversation is related to. Both users and recruiters can utilize the conversation function to ask for questions or request more documents.
Message and conversation screen
Profile
The profile screen allows users to upload and review their resumes, edit profile images, and background information. Users can also access the settings menu in the upper right-handed corner of this screen.
User profile screen
Responsive Website Mockup
After I have finished all my mobile screens, I started to iterate my design to fit larger screens like a desktop or laptop. During the iteration, there are six crucial aspects that I always keep in mind. They are the screen size, the resolution, context of use, functionality, input methods, and content layout.
Home Page
The Home Page for the responsive website features a hero image, a prominent search bar, and a more detailed card view for best matching jobs and new openings. The goal for the website view is to keep the visual and functions consistent across both mobile and desktop platforms while providing continuous experiences.
-10.jpg)
Responsive website home page
-11.jpg)
Job Searching Page
The Job Searching Page displays the result of the job search based on the user's preference. It showcased a list view on the left side and job details on the right side, where the essential information, such as requirements and apply button, are placed at the top of the job details.
Responsive website job searching page
What I Learned
During the design process, I learned how to communicate and empathize with my participants. While I was trying to empathize with my real users, it is hard to keep my own bias out from research findings since I was a new college graduate, not a long ago. It can be very natural for me to shadow my feelings and thoughts on my participants. But I learned that being aware of my own bias is the first step of eliminates them and keeps my user's needs front and center.
Designing a corresponding responsive website also gives me a deeper understanding of the product, where I have to consider different use cases. Iterating a mobile app into a responsive website helps understands how users can utilize functions differently on other platforms and how important it is to build a continuous experience across two platforms.
The Next Step
It has been a fascinating and rewarding experience to design something for social good. If I can spend more time on this project, I will start other usability tests on the app. I believe there are more improvement opportunities if I can have international participants to be involved in this project. At the same time, I would also like to add more accessibility functions so the product can be more inclusive.
