FutureFinder - CMU MHCI Capstone | Radha Nath's Portfolio

INTRO

Pittsburgh has Expected Future Workforce Shortages

According to a Regional Report prepared by Alleghency Conference, there's a forcasted shortfall of 80,000 workers by 2025 based on Baby Boomer retirements, modest job growth and a talent pipeline not large enough to fill these openings. In the same study they found that effective K-12 career awareness and preparation is hampered by educators’ lack of time and ability to infuse class-room curriculum with relevant workforce information. This problematic gap in youth career education is an opportunity to help both current students and future employers to close in on future workforce shortages.

CHALLENGE

How might we expose high schoolers to Pittsburgh high demand careers in a way that is both meaningful to them and effective?

SOLUTION

Prioritizing Students' Interests before Workforce Demand

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 and giving them exposure to careers that are interesting to them and relevant to future workforce.

FutureFinder is a mobile application that aims to make high school career exploration effortless. It provides teens with three key features:

Interactive Daily Questions
Easy to Digest Job Information
A Career Preference Profile

KEY FEATURE 1 —

Interactive Daily Questions

Each day, students answer a set of ten questions that assess their preferred work styles, drives, interests, and career personality.

Inspired by Peak's End Theory, questions were designed to be interactive and limited to engage the student and leave them excited to return. Questions tone and verbiage were thoughtfully considered to be match language meaningful to a high school student.

"The questions make it fun and make you want to come back to the app, which is cool." -10th grade student

KEY FEATURE 2 —

Easy to Digest Job Information

After answering questions, students receive five job cards relating to their preferences. Students can review the job's details and favorite jobs in which they are most interested.

Job content and layout were carefully designed and tested to information easy to read to reduce "Information Overload". This was a common compaint we observed with current high school career prep tools.

"I like that it’s not a listing of all different jobs. It just gives you a sample [of jobs], so that you can look at a few at a time in more detail and actually think about them." -10th grade student

KEY FEATURE 3 —

Career Preferences Profile

The profile has two sections: "My Future" and "Me". Students can access their daily questions and their favorited jobs in the "My Future" section. Then they can view their interests, workstyles, drives, and personality in the "Me" Section.

The profile was designed to highlight the differences of considering future options vs. understanding yourself, and how both are important parts of career-thinking.

"[It had] jobs that look interesting...that I’ve never looked at before,
or taken into account that my interests and workstyles might
intersect with them.." -10th grade student

Algorithm Promotes Diverse and High Demand Career Exposure

FutureFinder's matching algorithm and 5 job card output purposefully exposes students to a diverse array of careers. The algorithm matches students on various degress of connectedness based off their career profile factors. This logic decenters what they might expect are their predictible matches. Additionally, the algorithm ensures 1 of the 5 jobs is a high-demand job (HDJ) to expose students in a way that is meaningful to their career exploration. Below is a visual of how the alogorithm works and it's resulting output.

FutureFinder Fills a Gap in the Competitive Landscape

Looking at the market for career preparation, we identified an opportunity for a better design for broad exploration of many different jobs. FutureFinder helps students who haven't found taken interest in a career path yet, by exposure to many jobs at a high-level so they don't get overwhelmed with details.

Secondly, current products require high effort whether it's due to time required or amount of interactions. In our research, many students recognized the importance of career thinking, but were "too busy with other activities" to do it.

The absence of a tool that helps students explore broadly at a low effort is a huge opportunity that FutureFinder aims to fill.

WHAT I DID

What I Contributed to the Project

My Contributions to the Project

As part of the team, I wore many different hats from Project Lead, Design Researchers, UX Lead, UI Designer, and Frontend Developer. Here are some of my notable contributions:

Managing project timelines, running team meetings, delegation of work
Contributing to Research Plan, faciltating interviews and testing, assisting in research synthesis
Running team google design sprints, deciding methods to validate design decisions
Owning rapid prototype design and developing, creating wireframes through hi-fidelity designs
Developing the front-end of our interactive Hi-Fi framer prototype, Designing transitions

RESEARCH METHODS

Literature Review
Stakeholder + User Interviews
Affinity Diagramming
Speed Dating Interviews
User Testing Think Alouds
Usability Testing

DESIGN METHODS

Co-Design Workshops
Google Design Sprints
Concept Generation + Storyboarding
Whiteboard + HiFi Wireframes
Visual Design + Iterations
User Interface Design
Micro-Interactions

DESIGN + BUILD TOOLS

Google Drive / Cal + Trello for PM
Sketch for HiFi Designs + Concept Models
Invision for MidFi Prototype
Airtable for Data / Content Management
Framer + Coffee Script for HiFi Prototypes
HTML + CSS for Website Build
Github for Code Collab + Version Control

PROCESS

End-to-End Discovery Research to Design Validation

The design process leading to this career exploration app spaned seven months, and comprised of five major phases: Discovery, Generative Research, Concept Generation, Detailed Design, Prototype Build + Validation. These phases overlapped quite a bit as we ran in a lean and research-through-design approach.

Below I describe some the highlights in our research and design process.

The design process leading to this career exploration app spaned seven months, and comprised of five major phases: Discovery, Generative Research, Concept Generation, Detailed Design, Prototype Build + Validation. These phases overlapped quite a bit as we ran in a lean and research-through-design approach.

To name some of our most notable activities we did to arrive at our solution: multi-stakeholder interviews, affinity diagramming, co-design workshops, design sprints, concept modeling, personas, storyboarding & speed dating, prototyping (low to high fidelity), and plenty and plenty of user testing. Below I highlight these activities in more detail.

PHASE 1: DISCOVERY

Understanding the Career Readiness Landscape in Pittsburgh Public Schools

To kickoff the project, our team ran a Research Question Workshop (pictured below) where we wrote out most pressing questions and levelsetted the direction of our discovery and generative research phase. Some questions were: What current standards are in place for career readiness and prep? Who are the major players involved? How are students thinking about their future? What perceptions / feelings exist around career thinking?

Through Literature Reviews, additional Secondary Research, and Exploratory Multi-Stakeholder Interviews, we began to understand what career readiness and prep currently looks like for students in Pittsburgh Public Schools.

Through interviewed we gathered many sentiments from teens, parents, school counselors, goverment professionals from PA Department of Education, and local intermediaries. We organized our interview insights through Affinity Diagramming and a Digital Insight Matrix to understand common trends amongst our participants.

Major Areas of Opportunity

Increase Exposure to Diverse Careers
Most students have limited access to meaningful career information. They often learn from their parents and teachers, who also have limited knowledge. This makes it difficult for students to make informed decisions when trying to map their interests to potential careers.

Close the Gap between Home and School
Despite being one of the largest influencers, parents rely on the education system to teach the their student's potential career paths. However, guidance counselors and teachers often have high caseloads, limited tools, and limited resources when trying to help students with career-thinking.

Breakdown Pre-Existing Mental Models that Inhibit Effective Career-Thinking
Pre-existing mental models of 'College over Career-thinking', 'Job Title' Hypnosis, and 'Later Career-Thinking' influence how major players think and act on career-thinking. They largely inhibit the process of starting career discovery in high school.

PHASE 2: GENERATIVE RESEARCH

Delving Deeper into Major Areas of Career Exposure and Mental Models

From our discovery research, we decided to explore the areas of career exposure and these pre-existing metal models more. Our generative research consisted of more detailed student interviews and workforce (employee) interviews.

Interviews were followed by more affinity diagramming and a walk the wall synthesis session to start transitioning to design opportunities.

Workforce Employee Interviews

Through interviewing over 10 workers across various industries and professions, we started noticing a common trend among those who found satisfaction in their careers, and those that did not.

While most people found fulfilling careers through the trial and error method (Career Discovery Loop Model), we also recognized that as time goes by career thinking becomes more expensive and more difficult to start again. This eventually leads to the possiblity of getting stuck in an career that one may not be fully happy with. So, with that in mind we started thinking of how we might help highschoolers start this 'trial and error' career discovery earlier.

Employee Interview Notes to Concept Models

Career Thinking for High Schoolers

We performed more interviews in addition to a co-design session to further understand how students think about their futures and what barriers they come across to starting earlier.

We defined a few different Student Archetypes we found, but most importantly we a couple Major Friction Points when students are trying to explore future career thinking. The biggest of all being... "too busy" with other extracurricular activities.

Raw Notes to Archetypes + Identified Friction Points

Opportunities from Generative Research

Help Reduce Barriers to Early Exploration
How might we help students explore careers earlier with minimal effort / time?

Demonstrate Impact of Late Exploration
How might we illustrate the impact of 'I'll do it later' mentality to resonate with students?

Create Experiences to Motivate Students
How might we pair highly motivating experiences to help students explore earlier?

PHASE 3: CONCEPT GENERATION

Generating and Validating Design Concepts

Following the development of our generative research and identifying many opportunities, our team ran multiple brainstorming exercises (including a Google Design Sprint) to generate over 50 different concepts.

From these design concepts we narrowed in on four different scenarios, developed them into storyboards, and performed speeddating with potential users and related stakeholders: parents and guidance counselors.

We ran three separate rounds of concept iterations and speed dating until narrowing into a few concept we wanted to develop in a bitmore detail. In our final concept validation, we developed low-fidelity prototypes in Invision. This parallel prototyping helped us determine a which concept to move forward with more detailed iterations.

Design Google Sprints, Storyboarding, Lo-Fi Prototype Screens

Choosing one Concept and Iterating to Improve

We were very excited to move forward with FutureFinder. We outlined the features and functionality of the application, created high-fidelity wireframes, which we ultimately transformed to hi-fi prototypes using inVision and went through another round of user testing with more detailed questions.

High Fidelity Wireframes of FutureFinder V1

Testing Robust Functionality for FutureFinder V1

The earliest version of Future Finder had a robust amount of features. It was primarily an aggregator for career related content aimed at serendipitous exposure to career related content. It also included interest assessment and deliberate career exposure.

After a round of user testing, we discovered a huge challenge for our proposed design. While students found FutureFinder interesting and helpful, they felt like the solution was too time-consuming for their busy lives. This forced us to think about how we might simplify the concept.

Through two more rounds of designs and user testing, we landed on our final design concept through a set of design principles we definied and followed closely.

Simplifying for FutureFinder Version 3

By defining our four core design principles (seen below), we came to our final design concept our Version 3 of FutureFinder. There was a defined user flow and a narrowed set of functionality.

This version of FutureFinder was an daily interest assessment, paired with a daily set of job cards. It's goal was to help students map interests to different career they could potentially be interested in. Our final task was to refine our visual design.

Four Core Design Principles Informed by Feedback

Provides Diverse Career Exposure
There's a need to expose students to a diverse array careers, even ones they might not expect to enlighten students interesting and relevant careers they haven't yet considered.

Motivating to Use
There needs to be a clear benefit to students using the app. By appying certain psych-theories like peak-end theory, we can keep the student intrigued to come back again.

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.

Digestable 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.

PHASE 4: REFINING UI DESIGN

Defining a Look and Feel and Final Design System

Refining the User Interface was done iteratively as we started to finalize the design concept and features. To start to understand the look and feel we wanted, we created a moodboards. We decided we wanted

Our system componenets slowly evolved from one iteration to the next. As we came close to our final iterations, we created a rough design system so that we could keep consistency from one section of the app to another.

Iterating through Higher Fidelity Designs
We then moved to higher fidelity mockups of the product screens to explore, in higher detail, a few different ways we could present the features. We also explored multiple color and type options.

PHASE 4: HIGH-FIDELITY PROTOTYPING + VALIDATION

Building out a Framer Prototype and Final User Testing

Having gone through mid-fidelity user testing, we saw the need for a high-fidelity prototype with more realistic functionality to run more true-to-feel user testing.

We used Airtable as a Database to house 25 careers, and Framer as a tool to build out a fully-functioning prototype. I worked specifically on front-end development, so I was able to code out the finer UI micro-interactions and some animations.

We performed a final user testing session to see how students responded to the final product. There was a lot of positiive feedback, and we were able to validate some awesome stats for our design.

SCROLL TO TOP FOR FINAL DESIGN