Uprooted Academy
Uprooted Academy is a client project dedicated to simplifying the application and onboarding experience for prospective volunteers. The academy's mission is to empower low-income, first-generation students of color and reduce the stress surrounding the post-secondary selection and application process.
Roles
UX Designer, User Researcher
Duration
3 months
Sector
Education
Team
Jovin V. (Product Designer), Lisa K. (Product Manager), Minkush J. (User Researcher)
Introduction
Goal
Simplifying the application and onboarding experience for prospective volunteers.
Overview
Uprooted Academy is a client project dedicated to simplifying the application and onboarding experience for prospective volunteers. The academy's mission is to empower low-income, first-generation students of color and reduce the stress surrounding the post-secondary selection and application process.
Context
Target Users
Uprooted Academy volunteers, with a focus on 2 key groups: UCLA Practicum Students and HECA Independent College Counselors.
Business Goal
Make the volunteer onboarding process more efficient and streamlined to scale the volunteer model and take in more volunteers.
Key Stakeholders
Key stakeholders are Uprooted Academy, students, parents, and volunteers. Uprooted Academy oversees the platform, students and parents rely on it for college guidance, and volunteers provide support.
Constraints
We had to follow Uprooted Academy's design system and branding. Due to a limited timeline and the wide range of volunteer types, we narrowed the project scope. Technical limits also affected features, such as the inability to implement Google sign-in.
Problem
Uprooted Academy has 3 types of volunteers: HECA, UCLA, and individuals. They share similar steps like registration and background checks, but UCLA volunteers have additional requirements (e.g. submitting availability for one-on-one sessions). Currently, these workflows are managed manually through spreadsheets, Google Forms, and emails.
Target Users
Uprooted Academy volunteers, with a focus on 2 key groups: UCLA Practicum Students and HECA Independent College Counselors.
Current application processes via Google Forms
Research
User Flows
To understand the differences between volunteer pathways, we reviewed Uprooted Academy's website and identified key distinctions between HECA and UCLA volunteers. HECA volunteers offer monthly drop-in sessions, while UCLA practicum students provide consistent 1:1 counseling from September to December. We mapped out current user flows for each to visualize their unique steps and better inform our design approach.
Current User Flow: UCLA Volunteers (Practicum Students)
Current User Flow: HECA Volunteers (Independent College Counselors)
Competitive Analysis
We analyzed 3 education-focused platforms: Learn To Be, Schoolhouse, and Upchieve. We evaluated their volunteer onboarding experiences. By comparing their strengths and weaknesses, we identified effective design patterns and areas for improvement.
After visualizing the current user flows and curating a competitive analysis, we identified major pain points in Uprooted Academy's volunteer onboarding process. This led us to our guiding question:
How might we...
simplify and streamline the application and onboarding processes for Uprooted Academy volunteers to create a seamless, engaging experience that empowers them to contribute effectively and supports the academy's mission?
Design
Low-Fidelity Prototypes
The low-fidelity prototype for the initial application simplifies the experience with minimal text and clear role selection. Users choose their volunteer type, leading them to the respective application flow with a confirmation message. This version is more interactive than a Google Form, offering a more engaging experience for volunteers of all age groups.
Low-Fidelity prototype for initial application
The low-fidelity prototype for the volunteer onboarding portal dashboard focuses on a clear and welcoming user interface. I referred to the competitive analysis and avoided information overload by using collapsible dropdowns. I included individual task trackers and an overall progress bar. When users land on the dashboard, they're greeted with a personalized welcome message and an at-a-glance view of their onboarding tasks. This provides clarity and a smooth onboarding experience.
Low-Fidelity prototype for volunteer onboarding portal
Design System
I created the design system, ensuring it aligned with Uprooted Academy's existing branding. I used reference screenshots of the student portal provided by the Executive Director. I analyzed and incorporated key elements such as color palette, typography, icons, buttons (default and hover states), progress bars, and the logo to maintain visual consistency across our final prototypes.
Hi-Fidelity Prototypes
The volunteer portal centralizes essential information that consists the tabs: Dashboard, Training, Scheduling, Sessions, and Profile. These allow volunteers to easily navigate their tasks, with action buttons for contacting Uprooted Academy and their LinkedIn. We also took into consideration for similar and different onboarding steps between UCLA and HECA volunteers to ensure a seamless experience.
The Dashboard tab features a friendly welcome message and a clean interface with simple icons next to each onboarding task. Each task includes a brief description for quick reference, reducing the need to open every section. A check icon marks completed tasks, while a progress bar tracks overall completion. Future tasks are locked and blurred to guide users through the process in order. Task content is tailored based on whether the user is a UCLA or HECA volunteer.
Dashboard with onboarding tasks for HECA Volunteer
Dashboard with onboarding tasks for UCLA Volunteer
The Training tab streamlines onboarding by embedding forms directly in the portal for users to read and sign, which replaces the manual email process. It also includes a mandatory onboarding video that must be watched fully to unlock the next step, promoting user honesty. Once completed, the dashboard updates to prioritize scheduling and session tasks.
Training onboarding forms for HECA Volunteer
Training onboarding video for HECA Volunteer
Training onboarding tasks for UCLA Volunteer
The Scheduling tab uses a clear calendar format where users select available dates based on open slots and blurred dates indicate unavailability. These labels reduce confusion and scheduling conflicts. Then, a confirmation page summarizes each session with date, time, and location, along with options to edit, cancel, or add to a calendar. This automated flow keeps the process organized and easy to navigate.
Scheduling calendar for volunteer sessions
Scheduling confirmation message
The Sessions tab displays both upcoming and past sessions. For past sessions, users can view the student they worked with, hours earned, reward levels, and submit feedback. The feedback form includes a rating scale, comment box, and an option to notify an advisor for further review. This simple process promotes accountability, tracks student progress, and provides insights for volunteers, parents, and the organization.
Upcoming and previous sessions
Write feedback for each session
Final Prototype
Takeaways
Designing for different volunteers
I learned the importance of building distinct onboarding flows for each volunteer type, UCLA and HECA, since their responsibilities and commitments differ. Designing around these differences helped create a more personalized and relevant experience.
Importance of progress tracking
Including task-based progress indicators gave volunteers a clearer sense of where they were in the process and motivated them to complete each step. It also made the experience feel more structured and manageable.
User-friendly interface
A clean, user-friendly interface with minimal text and clear calls-to-action made navigation easy, especially important given the range of ages and tech comfort levels among volunteers.
Consistent branding
Following Uprooted Academy's brand guidelines, such as typography, color palette, icons, made the portal feel familiar and reliable. Using accessible font sizes and design patterns also ensured readability for all users.