SubjectJoy
Duration: September 2023 - December 2023 (10 weeks)
Tools: Annota, Figma
Team: 5 UX Designers
My Role: UX Designer
Overview
SubjectJoy is a mobile application aimed at helping students discover careers they are passionate about. It features a variety of short, simple career-focused games that allow users to learn about different professions. With SubjectJoy, users have the freedom to explore whichever career paths they want at their own pace, making the process of career discovery both enjoyable and educational.
The Problem
Many students struggle to find effective ways to engage in career exploration. This issue is frequently rooted in the limited support provided by some schools or non-profit organizations, particularly in offering career-related extracurricular opportunities and resources. As a result, many students begin their career exploration later than ideal, feeling pressured to hastily choose a career path that may not align with their true interests and aspirations.
Needfinding
For this project, our goal was to develop a product pitch for the non-profit Your Future Is Our Business (YFIOB), which aims to support Santa Cruz County students in exploring career opportunities. To gain some insight into their mission and past efforts, each of us conducted qualitative analysis of interviews with the YFIOB staff. With a better understanding of their organizational goals and needs, we were able to start coming up with solutions to address their challenges.
Ideation
To help brainstorm solution concepts, we each came up with several How Might We statements to address the problem statement.
We also sketched storyboards to help visualize the How Might We statements and their corresponding solution concepts. These storyboards illustrated the user's needs, the sequence of events in discovering and interacting with the solution, and the value or benefits the user would gain.
After finalizing the How Might We statements and storyboards, we presented our ideas to a YFIOB representative. They provided feedback that helped us narrow our focus to the solution concept they found most feasible and aligned with the organization's needs. This is the solution concept we came up with:
To support students having trouble finding what subjects they are passionate about, “SubjectJoy” is a gamified survey app that provides students with small games and activities that immerse them in different career fields, records their responses, and tracks progress for them to review.
User Flow
We created a user flow to map out how users would navigate the app and complete different user tasks. Mapping out the flow of the app was particularly helpful in figuring out what additional pages needed to be added on top of the core ones we started with and designing the mechanics of each app feature.
Wireframe
To initially draft the core functions of our app, we wireframed the UI task flows of our app by sketching several key screens. This process allowed us to roughly lay out how we wanted certain features to look visually and think about how they would interact with other pages.
High-Fidelity Prototype
Based on our wireframe, we got to work building our app with Figma’s design and prototyping tools, starting with creating the high-fidelity designs of all the app pages and then making them come to life through wiring them up and making it functional as an interactive prototype.
Design
COlor Scheme
We chose a white background for pages like the Dashboard and Achievements to create a strong contrast with the career field pages, each of which features a unique color representing its respective career. This design choice enhances the sense of immersion, making it feel as if the user is transported into a distinct world when navigating through the career pages.
Career Icons (Circular Version)
For our career icons, we drew inspiration from Duolingo's lesson icons. What stood out to us was how Duolingo uses experience bars and crowns to indicate a user’s progress and level in each lesson. We incorporated a similar feature into our icons, allowing users to quickly see how much they have engaged with different career fields at a glance. Additionally, we liked how Duolingo’s icons function as navigation tools, leading users to specific lessons. We adopted this feature in SubjectJoy, where clicking on a career icon takes users to a dedicated page for that career.
Duolingo
SubjectJoy
Career Icons (Paint Splatter Version)
We developed an alternative design for the circular career icon to avoid making the Dashboard appear as a monotonous gallery of identical icons. The white background of the Dashboard reminded us of a blank canvas, which inspired the idea of a paint splatter design. While this new design maintains the same functionality as the circular career icons, it includes an added feature: the three career icons with the most experience points are prominently displayed at the top of the page for easy access.
Design Changes
1. The navigation to the About the Career Field page was improved.
Initially, the page was accessed through a 'Learn More' button at the top corner of each game library page. However, we realized this placement was not ideal and felt like an afterthought. Since the About the Career Field pages were designed to complement the game libraries by providing an overview of the career, we decided to make them equally prominent. To achieve this, we implemented a button that seamlessly toggles between the two pages, ensuring both are easily accessible.
Before
After
2. We originally planned to have a Progress Check page.
The Progress Check page was originally designed to track various data across the app through charts and graphs, such as the number of games, surveys, and career fields completed. However, we ultimately decided to scrap this page because the Dashboard and Achievements pages already provided the same information. The Dashboard tracks game progress via the experience meters on each career icon, while the Achievements page tracks various metrics through different achievements. Although the Progress Check page would have presented all the app's data in an organized and linear format, we determined that it did not offer significant additional value and would rather be redundant.
Introducing SubjectJoy
Discover Your Passion, Play Your Future
Dashboard
-
Gallery of different careers that can be explored
-
Each career field can collect points based on the number of career-based games that have been played
-
The top 3 career fields with the most points get displayed on top for ease of access
-
Game Library
-
Each career field has their own respective game library filled with a variety of career-based games created in collaboration with experts in the field
-
Each career-based game is designed to be short yet enriching
About the Career Field
-
Informational page that provides an overview of the career field
-
The contents of the page include:
-
Career overview video
-
Description about the career
-
A quick “How to Get Started” guide
-
List of related career fields
-
Achievements
-
Achievements that can be attained by completing certain tasks on the app
-
Completing achievements acts as small milestones to reward the user for engaging in the app in different ways
Potential Iterations
If we were to create a second iteration of SubjectJoy, there are a few things we would want to implement:
1. Profile Section:
We want to add a profile page to the app. While the app is designed to help users explore various career fields, it currently lacks any personalization features. Although this addition would not significantly impact the app's functionality, it would provide users with a sense of identity and contribute to a more cohesive overall user experience.
2. Career Assessment Tool:
We also want to add a career assessment questionnaire during user registration. Currently, the app assumes that users know which career fields they want to explore. However, some users may feel overwhelmed by the many options. A career assessment questionnaire would offer personalized career field recommendations based on their responses, giving users a sense of direction and reducing the stress of choosing a starting point, whether they are prepared or not.