Onboarding and connecting Chicago youth to local mentors.
Client Project
Overview
In Q3-4 2024, I worked with a non-profit that connects Chicago youth with qualified mentors. I was brought on to help design an app that facilitates these relationships and makes mentorship more accessible to teens and young adults throughout the metro area.
All deliverables included in this case study were created by me.
Team
I worked with 1-3 other designers within a larger product team encompassing development, project management, and QA.
My Role
I contributed key design deliverables, including feature prioritization, competitive analysis, workshops, wireframing, and prototyping.
Problem
Teens and young adults in the Chicago area have limited access to resources—including mentors—that can help develop their personal and professional passions.
74%
of adults who had a meaningful mentor in their youth say that person contributed significantly to their success later in life.
58%
of past mentees say their mentor has supported their mental health.
69%
of young adults say that past mentorship has helped them with issues related to their education.
Statistics from MENTOR National
Solution
An app that connects Chicago teens and young adults to passionate mentors and creative opportunities in their city.
Competitive Research
My competitive analysis revealed surprisingly few products designed to help young adults (especially those under 18) pursue their passions.
My CHI. My Future.
Meetup
ADPList
Duolingo
ClassDojo
Bumble for Friends
I identified two direct competitors (My CHI. My Future. and Meetup) and one indirect competitor (ADPList). My final report included value propositions, core audiences, tech platforms, and design principles for each competitor, with emphasis on how they do or do not meet the goals of our own target users.
I then took a closer look at these and several other apps identified by me or members of the team as potential inspiration. I cataloged aspects of these products that could help inform our future design decisions.
Value Innovation Pattern
“The product offers a new mash-up of cherry-picked features from competitors. The hybrid then offers a much better existing alternative for accomplishing a task.” — UX Strategy by Jaime Levy
For an optimal user experience, I recommended focusing on three key feature spaces within the value innovation pattern described above:
Design principles
We decided on three principles to act as success criteria for the team's early design decisions.
Defining these principles was largely for my and the other designers' own benefit—we could return to them whenever we were unsure about a certain design decision. I also shared these with the larger team as part of my competitive research report.
01
Our MVP should be attractive and appeal to users of all ages (i.e., childish=BAD) without being visually overwhelming. Content must be inclusive and accessible.
02
Early requirements described algorithmic matchmaking of mentees/mentors. We felt it more appropriate to leave the control in the hands of our users and carried that through to the rest of the design.
03
This product ultimately exists to facilitate relationships between people. Design decisions should never interfere with these relationships, except in the interest of safety.
Mapping the user journey
I created a map of what the end-to-end user journey might look like, including interdependencies between different user groups.
Sketching the interface
Sketching out the team's earliest ideas helped reveal gaps in the user experience before investing time in more detailed screens.
I based my sketches on the existing Product Requirements Document (PRD). This early ideation helped reveal some holes in the proposed user experience (e.g., how might young users determine if a mentor was a good fit for their goals before committing to long-term mentoring?).
I also realized that we didn't have enough information about the app's functionality to really flesh out the home page. The design team successfully advocated for pushing back this part of the design to a future sprint.
wireframes and User flows
Flow #1: Onboarding that supports the business and the user.
I was surprised by how much design work went into the onboarding flow. The original requirements focused exclusively on the organization's goals without really considering the mental load or trust of the user (i.e., "Why does this app need to know that?").
We advocated for splitting onboarding into several screens. This included moving some tasks outside of the registration flow to be completed at the user's own pace.
We also questioned the number of required form fields and offered suggestions for how to make the registration flow as efficient as possible while still collecting the necessary user data.
Flow #2: Finding and connecting to the perfect mentor.
It became clear early on that finding and connecting to mentors was going to be a core flow for mentees. If users were unsuccessful with this task, they were unlikely to continue using the app as a whole. I focused most of my attention on these screens.
Design exploration and iteration
With the core flows established, I started rapidly iterating on the most important components of the mentor search and onboarding screens.
Mentor Search Result Cards
Finding and selecting a mentor is an extremely important task for young users. The design team eventually landed on a simplified flow that prioritized browsing (à la flipping through a catalog) over alternatives like keyword search. I felt the best way to support this flow was with scannable, content-dense ‘search result’ cards.
My goal for this component was to provide a preview of each mentor, allowing mentees to easily narrow down their options without clicking in and out of every profile.
Past Iterations
Mentor Search Header
The mentor search cards can't function entirely on their own. The second piece of the puzzle is the search result header, which houses crucial navigation and filter controls.
Version 1
Working off of my earlier sketches, I fleshed out the search header to include a toggle allowing users to view mentors who are currently accepting new mentees. This felt like the most important user control given what we knew about our users and the mentor search flow.
I included a separate Filter button per the PRD. However, I wasn't sure what would be included within this menu.
Task List
A recurring theme in our discovery and ideation phases was the ability to display and track the user's progress toward specific goals. I chose to introduce the user to this component during the second phase of onboarding (as pictured below).
Because this component would be reused throughout the user's product experience—including in ways we may not be privy to at the MVP stage—it was important that the final design could accommodate many types of content.
At the time of writing, this component is still in mid-fidelity. It will be fleshed out in a future design sprint.
Past Iterations
Hi-Fidelity Screens
Onboarding teens and young adults.
Background image by Pedro Casanova
Browsing available mentors.
Connecting with potential mentors via chat.
Project takeaways
I enjoyed working with a larger team on a 0-1 product.
I was very excited to work within a bigger team but it also meant learning how to work around blockers caused by other disciplines. This was a big adjustment coming from past projects where I was largely responsible for my own design process.
I naturally found myself taking on more product-focused responsibilities in addition to my UX tasks. I’m very excited to continue growing this skill set and explore product design opportunities.
User research isn’t a given in the “real world.”
Our design team was pretty removed from the end user. Most user requirements came from stakeholders and other members of the product team. This game of telephone meant the designers had no way of knowing how representative the given requirements were of our actual users—not ideal!
I had to learn how to compensate for not having direct access to users in my design process. For example:
‣
I used competitive research to learn what existing apps were doing to accommodate similar user goals.
‣
I turned to established design patterns and best practices when making UI decisions.
‣
When I had a question that couldn't be answered with desk research, I utilized guerilla testing with non-representative participants.
Despite these hiccups, the project was a great learning experience. This likely won’t be the last product I work on that lacks sufficient research, and I've gained skills that will help me better advocate for the user’s voice in the future.
Design advocacy is extremely important in an Agile environment.
The product and development teams chose to follow an Agile workflow. Our design team had to figure out what that meant for collaboration and how we could stay in step with the rest of the team when our work didn’t fit neatly into two-week sprints.
Next steps
What's next for this project?
At the time of writing this case study, the onboarding and mentor connection flows are in early development. I hope to continue working with the product team to bring our designs to end users. I also hope to contribute to other sections of the app (e.g., Events, Goals) in future sprints.