Brittany Hoover - Pathfinder Mobile Site

Pathfinder Case Study

A mobile website design for a free mentorship service for upcoming and recent high school and college graduates.

Role: UI/UX designer

Time length: 2 weeks

Problem statement: Users want a platform to receive personal and relevant career mentorship so I designed a mobile website to bring professionals and upcoming graduates together to discuss career readiness. The platform also gives users the ability to access digital career resources. The design includes flows for users to submit forms.

The Idea

Pathfinder is an organization that connects with professionals in different career fields to provide mentorship to people who are entering the workforce. The professionals who provide mentorship are volunteers. Professionals can also volunteer to write informative blog posts and host career- development workshops for mentees. The Pathfinder mobile website allows users to view mentor profiles and send a message to a mentor that may be a good fit. The mobile website also allows potential volunteers to apply to be a mentor or serve in another capacity.

The Problem

The user wants a free and accessible way to connect with professionals who can serve as mentors. The purpose of connecting with mentors is so they can receive guidance and support in the career development process.

Target User

The target user for Pathfinder is seeking career mentorship to help them find a career path and connect with professionals to understand what they do in their career field. The mentorship service is virtual, for users who are unable to connect with professionals in person or have a hard time networking and building relationships.

User Persona

The user persona was developed using demographic details of people who are early on in their career may seek career guidance or mentorship. The user persona for this project is Ella, a 20-year-old college student who lives in Los Angeles with her roommates. The research revealed that Ella wants to connect with professionals who have a career related to her major so that she can get clarity about the work that she can do once she graduates. She wants to connect with someone virtually or someone in the Los Angeles area. Currently, she is frustrated by her university’s career center which helps with job documents but doesn’t help students connect with mentors. Ella wants to see a list of mentors along with their career fields so that she can choose one that may be a good fit for her. She wants the process to be accessible. She also wants to participate in activities that will add to her career development, including workshops and webinars.

Initial Designs

Here are some paper wireframes that indicate the initial designs of the Pathfinder mobile website.

Photo of rough paper wireframe of design idea.

Research Plan and Usability Study

The goal of this research and usability study was to determine if users were able to complete the tasks of viewing mentors, sending a message to a mentor, viewing career paths, viewing resources, and submitting an application to volunteer. These are the main functions of the mobile website. Additionally, a part of the goal was to identify any pain points that users had while trying to complete these different tasks.

The usability study was remote, unmoderated, and took place on April 22, 2021. A total of 5 participants were asked to take part in the study and complete the tasks, which were presented in the form of prompts i.e. please navigate to the home screen to find the list of career paths to view. The session for each participant was 15 minutes. One of the participants was a recent high school graduate, which represents a target user for the mobile website.

Insights Learned

From the user research, it was discovered that users saw the mobile website as useful, usable, accessible, and enjoyable to use. All of the participants were able to complete the tasks successfully. The research did reveal some pain points. One of the issues was that the typography needed to be improved, as the text was difficult for some users to see. This was addressed by changing the emphasis of the typeface from light to regular and by increasing the font size from 14 to 16. Another pain point was the separation of different topics on the screen, users weren’t able to tell what concepts went together. This was addressed by adding more prominent headings with large font size and bold emphasis and by adding filled boxes and dividing lines.

Accessibility Considerations

One approach to consider accessibility was having a high contrast between the text and background colors. Another mobile approach to consider accessibility was making sure that the forms had clearly defined boundaries with labels so that users know where to put information and know what information they’re providing.

Mockup

Here is the mockup for the main screens of the mobile website. There is text, color, images, style, and other elements.

Screen grab of hi-fidelity design and all of its screens.

High-fidelity prototype

Here is a link to the high-fidelity prototype which contains the fully-developed design, complete with interactions and overlays. It presents a solution of a free career mentorship mobile website with recent and upcoming high school and college graduates as the target users.