Leo

UI, UX, Research

How do we help high school students strive towards a fulfilled future?

Every year, graduating high school students take a first step towards their professional futures. The are tools available to help them decide what to do next, such as aptitude tests, guidance counselors, and various online tools. But they are often outdated, too prescriptive, and fail to consider a students nuanced identity. These tools perpetuate the myth that the path to professional success is linear and predictable, when in fact the journey of a modern professional is fluid and dynamic. We designed a service that could give students a stronger sense of themselves, enable them to explore the professional landscape, and empower them to find a career that they can become passionate about.

Goal Guide high school students through figuring out their career aspirations after high school without judgment or stress

Why? High schoolers in the US are often forced to choose a career quickly leading to stress and anxiety that may not be conduces to them making realistic decisions

Key Flows 
- User questionnaire
- Professional timelines
- Student exploration pages
- LeoPrints

Team:
4 total

Product Design ••••


My role: 
Product Design

UX System Map, UI Design, Persona Mapping, User research (interviewing/qualitative)

Leo is a tool that helps students learn more about their own values and explore the professional landscape. A student first encounters Leo in the lobby of their guidance counselor's office their Junior year, while waiting to have their mandatory guidance meeting. They are prompted to take a values questionnaire: they are asked to compare themselves to a person who has certain qualities, and state how similar they feel this person is to themselves. Each value is assigned a graphic shape to symbolize the value and create a visual vocabulary for the system. When a student has completed the survey, their results are displayed in a spider graph they can dissect, seeing which of their responses shaped their graph.
 

The Leo app that the student encounters in their guidance counselor's office.

Leo then takes their top three values and creates a custom graphic shape illustrating the students' personality. Leo will then be customized to carry these shapes across the visual system, making every student's Leo unique to them.

After completing the values questionnaire, the student will be led into the Leo website, an built environment for open exploration.

Career guidance is never "one-size-fits-all"

In order to give students a realistic view of what a professional journey really looks like, story pages provide insight into real working professionals and their paths. Culling data from LinkedIn, story pages paint a broad picture of the journey of a professional, and allow students the opportunity to ask these real people questions. Professionals map the ups and downs of their path on a timeline, and students can ask questions pertaining to specific careers or decisions. Story pages are also tagged with relevant keywords, allowing students to search for stories that align with their values or address their concerns.

Showing students what a modern professional journey looks like

On their own profile page, they can revisit their values diagram and re-take the questionnaire if they feel they've changed. Leo will also make recommendations of certain jobs to check out based on a students recent activity, and direct them to other story pages that might be relevant.

An example of a student's profile page.

Reminding students of the what they need to do to achieve their goals

LeoPrints acts as a bridge between a student's private digital experience and their everyday lives. Although most of the students interaction with Leo is digital, we found it was important to have their online exploration and research manifest itself somehow in the physical world.

LeoPrints acts as a bridge between a student's private digital experience and their everyday lives. Although most of the students interaction with Leo is digital, we found it was important to have their online exploration and research manifest itself somehow in the physical world.

Once a student has completed the quiz and has spoken to their counselor, they are given a custom RFID Leo card that allows them to use the LeoPrints service and acts as a physical reminder to check out the website.

By personalizing and allowing the student to interact with Leo in both digital and physical contexts, we hope to give them a sense of control over their professional journey.

Some of my mockups of Leo. In this iteration, you can already see the idea of illustrating an individual career path taking shape. We had also already decided to implement a flat design structure to the site as well.

The color took a while to get tacked down. While we wanted it to feel young to be able to relate to the high schoolers, we also wanted it to be authoritative, to let them know that it was a site that they could trust to keep them in the loop about exploring their career paths. In this image you can also see our sketches of all of the shape combinations that the preliminary quiz can result in. We measured it along the 10 areas of personality mapped out by Schwartz.

Quick user flow of the app components of Leo.

Our simplified concept maps that illustrate how we view the goals of Leo.

Concept map in it's working state. We were later able to simplify it.

The beginnings of the concept map and the post it's pertaining to our original ideations. Our workflow was pretty fluid throughout the project and having a team with people of diverse backgrounds really helped us to think outside of the box.

© Copyright 2019 garvey smith