FutureFinder is a mobile app that helps high school students explore interesting and relevant careers effortlessly.
CLIENTS
TEAM
1 Product Manager
2 UX Researchers
2 UX Designers
ROLE
UX Design Lead
PROBLEM
PROBLEM
How might we expose high schoolers to Pittsburgh high-demand careers in a way that's effective and meaningful to them?
A Pittsburgh regional report forecasted a shortfall of 80,000 workers by 2025. They also found that K-12 career preparation is hampered by educators' lack of time and ability to infuse classroom curriculum with relevant workforce info. This gap is an opportunity to help current students and future employers to address future workforce shortages.
SOLUTION
A career exploration app that prioritizes the student's interests.
Through research, we identified that when high schoolers are considering career options they are less interested in workforce demand, and more interested in discovering careers that map to their interests. This led us to focus on helping high schoolers identify their interests, then exposure to careers that are interesting to them and relevant to the future workforce. FutureFinder aims to make high school career exploration effortless.
Interactive Daily Questions
Each day, students answer a set of ten questions that assess their preferred work styles, drives, interests, and career personality.
Suggested Career Matches
After completing their daily questions, students are matched with five job cards related to their preferences. They can review and favorite jobs they are most interested in.
HOW DOES IT FIND MATCHES?
The algorithm is designed to promote diverse and high demand career exposure. It finds career matches on various degrees of connectedness to the student's profile. Learn more below.
Career Preferences Profile
Students can keep track of favorite jobs, their interests, work styles, drives, and personality assessments β all in one place.
Positively Reviewed by Students
Business Value for numo and Allegheny Conference
Filling a Gap in the Competitive Landscape
Many current career prep tools require high effort from the student. FutureFinder addresses a huge opportunity to provide broad career exploration at low effort.
Matching Mindful of Future Workforce Demand
The algorithm selects diverse job matches based on varying degrees of connectedness to the student's profile. In every output, it intermixes at least one relevant high-demand job.
Effective Exposure to High Demand Jobs
From user testing, we found that not only were students were interested in the FutureFinder app, but they were also likely to meaningfully favorite high-demand jobs.
PROCESS
End-to-End Design: Identifying Strategic Opportunity in a Broad Problem Space to a Dynamic, High-Fidelity Prototype
Literature Reviews
User Interviews
Affinity Diagraming
Speed Dating
Thinkalouds
User Testing
Co-Design Workshops
Ideation Workshops
Storyboarding
Wireframes
User Interface Design
Micro-Interactions
Sketch
Invision
Airtable
Framer + Coffee Script
HTML + CSS
Github
CASE STUDY
Scoping down the Large Problem of Career Preparation
To kick off the project, our team ran a Discovery Workshop to align on high-level questions we had about the career prep space. Some questions were: What current standards are in place for career prep? How are students thinking about their future? What perceptions/feelings exist around career thinking?
Through secondary research, exploratory stakeholder interviews, and affinity mapping, we noticed a trend of commonly experienced problems that students, parents, and teachers faced when understanding career. These were potential areas of opportunity to design within.
Discovery workshop to align on research goals.
Discovery workshop to align on research goals.
AREAS OF OPPORTUNITY
Increase Student's Career Exposure and Exploration
Most students have limited access to meaningful career information. This makes it difficult for students to make informed decisions when trying to map their interests to potential careers.
Close the Career Education Gap between Home and School
Parents rely on the education system to guide their children's career paths. However, educators often have high caseloads and limited resources when trying to help students with career-thinking.
Breakdown Mental Models that Inhibit Effective Career-Thinking
Pre-existing mental models of 'College First', 'Job Title' Hypnosis, and 'Later Career-Thinking' influence how major players think and act. They inhibit the process of starting career discovery earlier.
Understanding Student's Career Thinking and Career Paths
After consulting our client, we prioritized student career exposure due to feasibility and potential for immediate impact. To find some jumping-off points for design, we conducted detailed interviews to understand student's experiences around career-thinking. We also had the opportunity to visit a local high school and run student co-design sessions. We found common themes through affinity mapping, developed student archetypes, and started transitioning to design concepts through a walk the wall exercise.
Identifying common student painpoints.
Artifacts from student research workshops.
'Walking the wall' with our affinity map.
A matrix of our student archechetypes.
GENERATIVE RESEARCH
GOAL: UNDERSTAND STUDENT'S ATTITUDES + THINKING
β±οΈ Too busy to explore careers.
Students have a lot going on that pulls at their attention β school, friends, extracurriculars. Many career tools in school take too much time and effort.
π Not sure what's out there.
Students have limited resources that let them explore careers in a fun, engaging way. They have difficultly translating their interests to potential careers.
π€ Not sure how to translate it to now.
Careers-thinking is intangible, students struggle to translate a potential future with what they do now in their education and hobbies.
Career Exploration: Ideation and Validating Concepts
Our team ran multiple brainstorming exercises, including a Google Design Sprint, to rapidly generate many design concepts. To quickly assess each concept, we considered a few criteria: feasibility, impact, and potential end-user value. Eventually, we landed on four concepts, created storyboards, and conducted speed dating interviews ο»Ώwith potential users.
We found that some high schoolers had a difficult time with storyboards. So for the next round of testing, we decided to create rough wireframe prototypes in Invision to better communicate the experience. This parallel prototyping helped us determine which concept landed more with users.
Running an ideation Workshop with the team.
Storyboarding to visualize scenarios.
Rough Concept Wireframes for User Feedback
SPEEDDATING CONCEPTS
GOAL: EARLY FEEDBACK ON HIGH-LEVEL CONCEPTS
π Students Liked Self-Exploration
Students enjoyed being able to answer questions and learn more about themselves and their interests.
π§ Preferred Broad Exploration
Students didn't want to invest a lot of time in exploring only one or two careers. Concepts exploring many careers were preferred.
π± Clients Wanted a Scalable Solution
numo and Allegheny Conference wanted a solution that could easily scale to multiple students. Some concepts required more manual labor than others.
Refining the FutureFinder Concept through Iteration
This phase of the project was quite interesting because our FutureFinder concept evolved quite a bit as we went through three rounds of prototyping and testing. While refining our concept, we also developed a set of four design principles informed by our prior research and current user testing. These principles ultimately led us to our final concept.
Prototype V1 Whiteboard Wireframes
Prototype V1 Digital Wireframes
FutureFinder Prototype V1
V1: Career-Related Content Aggregator
In this early version, FutureFinder was a content aggregator aimed at serendipitous career exposure. It used interest assessments and user feedback as inputs to populate the newsfeed.
USER TESTING
GOAL: FEEDBACK ON FLOW AND FUNCTIONALITY
β€οΈ Loved the interactive questions
π Overwhelmed with content.
π Needed guidance to find careers.
π Wanted to feel more accomplished.
FUTURE FINDER'S DESIGN PRINCIPLES
These were informed by our previous research, user testing feedback, and business goals.
π‘ Diverse Career Exposure
There's a need to expose students to a diverse array of careers, even ones they might not expect to enlighten students interesting and relevant careers they haven't yet considered.
β±οΈ Quick & Easy to Use
Students often feel "too busy" with other extracurricular activities - so any tool they would use has to fit into their already busy schedule. Being succinct and action-oriented is helpful for students.
π Motivating to Use
There needs to be a clear benefit to students using the app. By applying certain psych-theories like peak-end theory, we can keep the student intrigued to come back again.
π Digestible Job Information
Job Information must be displayed in a way that resonates with the students. By understanding what information they find most engaging and helpful, we can design the content to fit their needs.
Prototype V3 Digital Wireframes
Prototype V3 Whiteboard Wireframes
Future Finder Prototype V3
V3: Daily Questions and Career Matches
Through multiple iterations, user feedback, and our design principles, we simplified the experience. In this close-to-final version, FutureFinder is a daily interest assessment, paired with a daily set of suggested job cards. Its goal is to help students map their interests to different careers.
USER TESTING
GOAL: FEEDBACK ON FLOW AND FUNCTIONALITY
β€οΈ Loved the interactive questions
π Liked the limited set of job matches
π Liked the organization of job info
π Liked that it had a defined ending
Designing the Algorithm Logic for Broad Exploration
FutureFinder's matching algorithm purposefully exposes students to a diverse array of careers. It finds matches using various degrees of connectedness to the student's career profile. This logic decenters what students might expect to be predictable matches. Additionally, the algorithm ensures that one of the five jobs is a high-demand job (HDJ). This addresses the business goal while exposing students in a way that is meaningful to their career exploration.
Delivering an Interactive Prototype with Final UI Elements
Through our concept prototypes, we tested out different looks and feel. Students responded best to the visual style that was fun and playful, but still professional and clean. To establish our final UI, we created a rough design system so that the visual style would be consistent throughout the entire experience.
Visual Style Iterations
FutureFinder Rough Style Guide
A Dynamic, High Fidelity Prototype
Our design solution benefited from a high-fidelity prototype with more realistic functionality. We used Airtable as a database to store 25 careers and Framer to build out the front-end and logic. Using code, we were able to explore finer UI micro-interaction and animations.
RETROSPECTIVE
What I Learned by Designing a Career App for High Schoolers
Scoping a large problem early is key.
When tackling a complex, ambiguous problem space, there will be many problems worth solving. Defining the project's scope early, backed by preliminary research, will lead to a more reliable final design.
Use the best prototyping method for your user.
Some of our high school users struggled with our storyboard prototypes, so we pivoted to rough wireframe prototypes. Finding the best prototyping method can lead to better feedback from users.
Algorithm logic benefits from user-centric design thinking.
Although algorithms aren't visual, they can make or break the experience. When designing an algorithm's logic, approaching it with a user-first mindset can go a long way in making the end experience meaningful for the user.