Shape—Career Discovery App

Mentorship Project / UX/UI, Branding
Overview

Many high school students are uncertain about what to do after graduation. Shape helps them explore potential career paths based on their interests, talents, and skills. The mentor feature lets students see what work might look like in multiple occupations.

Mentors

Nathan Ng and Scott Strathern from Engine Digital

Recognition

2024 RGD Student Award, UX Design Honourable Mention

Duration

March 2023 to April 2023

Roles

Research, Ideation, Branding, Logo Design, UI Design, Prototyping

Tools

Figma, Procreate, Adobe Illustrator

Many of Shape's app screens side by side with the app icon on the right side
The Problem

Many high school students are unsure about what to do after graduation

A lot of pressure is put on high school students to decide what their plans are after graduating. This makes them go through uncertainty and doubt as they try to make up their minds about what career options and post-secondary options to pursue.

Objective

Informing, inspiring, and guiding students

To design a mobile app that informs, inspires, and guides high school students to make a decision about different career options, post-secondary options, and trades available to them after graduation.

Target Market

High school students in grades 10 to 12 (aged 15 to 18)

Tone of Voice

Motivating, informative, friendly, playful

A screenshot of many pages of text and research
Research

Only... secondary?

For the secondary research, I looked at a lot of statistics, surveys, and polls. I drew up primary interview questions, but was unable to conduct the actual interviews so they were used for another round of secondary research. This time, I looked at online forums, academic articles, and also asked the questions to myself in order to find answers for them.

7 key insights were pulled from my research which turned into 3 project principles.

Key insights pulled from secondary research about high school students and who they go to for advice
Project principles, written in a student's point of view. They are: guide me, understand me, and inspire me
A busy image of many website screenshots with digital notes stuck on them
Competitive & Comparative Audit

For the competitive audit, I looked at what was already out there. I found that there were a lot of websites (like MyBlueprint, EducationPlannerBC, EngineerGirl, etc.), but not any apps.

As for the comparative audit, I looked at applications that did a lot of things really well (like Spotify and Duolingo).

For both audits, I looked at what worked and what I liked from what was already out there as well as opportunities and places where there could be improvement.

Strategy

For the strategy part of this project, I created user personas, an empathy map, user journeys, and looked at opportunities using the 5 E’s.

User personas of two high school students who are going through different issues related to graduation/post-secondary
An empathy map showing what students say, do, their pains, and their gains
A user journey showing that different stages that a student goes through when thinking/planning for post-secondary
Text showing the different opportunities that the app could provide using the 5 E's: entice, enter, engage, exit, extend
Branding

Many mood boards and more ideation

Aside from working on the UX/UI of this design, another aspect I personally wanted to improve on was creating a strong brand. The mood boards went through many iterations and sketching out logo concepts was a lot of fun too.

A mood board of the typography, colours, logo inspiration, and more for creating Shape's branding
A page of different words and name ideas for the Shape app, before it was called Shape
Pages of logo sketches and concepts
Digital artboards of the logo refinements
The final logo for Shape is three rectangles as a staircase in almost an S-shape and a circle on top
Final Logo

Shaping your path

The final logo for the career discovery app, named Shape, uses rectangles building on each other—the steps students are taking to get to their goal—with a circle on top to represent the student.

UI Design

Next step—turning the research and strategy into a visual solution

Text and flows with questions and words to decide on key screens
Key Screens

Here, we decided on key screens because there wasn’t enough time to complete the entire screen set. We looked at which screens would be the most important to show and would have the most impact.

Low fidelity sketches of app screens and layouts
More low fidelity sketches of app screens and layouts
Final Interface

After all the strategy, branding, design, presenting... Shape!

Four phone screens. One is the launch screen with the app icon and the others are the onboarding screens
Final Interface

Onboarding

During the onboarding, users are lead through fill-in-the-blank sentences about their interests, goals, and what they want to accomplish. This section informs other parts of the app so that the content would be curated to better fit the user.

Two screens of Shape's Progress section. The right screen has a planning timeline and the left screen displays quiz results
Final Interface

Progress

In Progress - Planning, users see an overview of the path they will be taking to get to their goal. Goal setting and exploring interests is already completed because it was done during onboarding. The journey has already started!

Progress - Quiz Results is where users view results from quizzes taken in the Discovery section.

Three screens of the Mentors section showing interviews and career advice that users can listen to, watch, or read
Final Interface

Mentors

A big part of the research pointed to how getting advice, talking to people, and having role models and people to look up to was an important part of the decision making process.

In Mentors, users can go through interviews, advice, day in the life, personal insights, and more content from people who work in specific jobs.

Reflection

What's next?

Moving forward with this project, I would like to create the complete screen set for the app as well as prototype it all and add motion. Additionally, I think it’d be really cool to make a branding package for Shape too.

In the timeframe that I had for this project, I learned a lot. A special thank you to Nathan for all the back and forth collaboration we went through and to Scott for his keen eye on design and critique whenever we had check-ins. This project wouldn’t be what it is without their guidance.

Thank you for making it to the end of this case study!