Careergram

Helping students explore career pathways by improving mentor-mentee conversations with student reflection and AI analysis.

Overview

Careergram is a research project part of the UCI Design and Partnership Lab. The goal of Careergram is to help young people develop deeper identities toward career pathways by mapping out the aspects of experiences about careers, identity, and self around which young people develop their occupational identity over their lifetimes.

During the summer of 2023, I had the opportunity to own the design process for Careergram as the sole designer on the team, where I designed interfaces for student survey reflections and AI insights.

I also helped bring Careergram to life through lots of code and collaboration!

Problem

Many young people encounter challenges with defining their occupational identity, a crucial aspect that shapes their perception of future career paths. Students will tend to seek career guidance from mentors, yet it can be difficult to come up with effective questions and conversation starters to help them define their occupational identity.

Additionally, mentors may struggle with accurately understanding students' needs and goals, making it difficult to offer proper guidance and advice.

How might we help young people develop deeper identities toward career pathways by fostering stronger connections between mentees and mentors?

Solution

Careergram uses short surveys to collect reflective data from students. These surveys are based on five practical measures defined by the AXCIS Project. The data is analyzed using AI to provide actionable insights and questions for students to discuss with their mentors.

By doing so, this helps both mentors and mentees uncover information about career goals and values to provoke more engaging conversations.

Refining the Survey Questions

We first began refining the survey questions based on the five practical measures to encourage better reflection from students and better analysis from the large language model.

During this process, we acknowledged that our analysis is not meant to provide students with the answers, but rather to spur insights and conversation topics during in-person meetings, which led to including action items for students to pursue after reading their insights.

Using the new survey questions, I began brainstorming different ways to display the AI analysis of student inputs.

Visual Identity

For our brand's visual identity and design system, I focused on embodying a playful, bold, and fun spirit, drawing inspiration from tangrams typically found in the classroom. Our design system includes various colors, including those for our branding and individual practical measures.

It was a point of emphasis to be clear and consistent with color usage to ensure color contrast meets the WCAG 2 AAA threshold throughout the designs. The design system was also based on Tailwind CSS and Tremor UI to allow for easy handoff to developers.

Survey Inputs

A key area of focus was making sure the survey inputs were clear and straightforward in order to get accurate information for data analysis. We wanted to ensure that the survey intake process was quick and easy, in order to reduce friction for students. The inputs varied from audio response, free response, and scale-based response.

Call to Actions

To help facilitate mentor-mentee interaction, we introduced action items, such as reflection tasks based on their insights and suggested questions to ask their mentor. It was important to emphasize these sections at the beginning of each results page so students would not miss them.

Student Insights

To communicate student insights, it was important that the information was presented in a clear and engaging format to make it easily understandable for both mentors and mentees.

We also focused on the copywriting to incorporate a youthful and playful tone, catering to a young audience and increasing engagement for users as they read through their insights.

Loading Indicators

Because Careergram includes AI analysis to process data, it was important to communicate loading statuses and engage users during long loading periods. I created this loading animation using Figma and Lottie Files.

Looking Back...

During my time on this project, I learned the importance of communicating and consistently sharing what I'm working on. This helped our team iterate quickly and keep everyone on the same page.

Additionally, I learned different ways of asking for feedback based on where I am in the design process such as through Slack messages, asynchronous Figma feedback, or synchronous feedback on Zoom.

We are currently building these designs in development and I am helping contribute to the front end development of this app. In the future, we plan to use the fully built version for research purposes, but for now you can check it out here!