Believe in Me College App
Introducing One College Hub, a gamified college resource app designed to enable students to achieve college success
PROBLEM
The college admissions process has become increasingly more complex for today's students. For first generation students and students from low income families, the challenge is even greater.
Under-resourced students are 11 times less likely than their peers to earn a college degree by age 24 due to massive systemic burdens and hardships.
But what if we could design an accessible tool that could change this reality and even the playing field?
SOLUTION
One College Hub is an all in one digital resource platform that equips students with the right resources and tools to achieve college success. Through tailored resource discovery, students can seamlessly curate a personalized suite of scholarship programs, find the best college matches, and easily manage their applications all in one place.
MY ROLE
I managed end to end product design in collaboration with UX/UI Designers and a Product Manager. My core contributions were leading generative research, data analysis, and designing the college and scholarship search experience through wireframes, user flows, journey maps, and full fidelity interactive prototypes.
Please note: The stylistic elements featured are my personal contributions while working on the college and scholarship search experience.
TIMELINE: 4 months
TOOLS: Paper, Pencil, Sharpie, Figma, Adobe Illustrator, Adobe Photoshop, Confluence, Jira, Otter AI
Capturing Student Experiences
RESEARCH METHODOLOGY
We performed 15 total, qualitative interviews with first generational college graduates, students from low income backgrounds, and students from immigrant families as well as the professionals that serve these populations.
We gained the following insights:
Deep Economic Hardship- Students are not able to pay for any amount of college including the "hidden costs" of admission processes like tutors, test prep, and process fees.
Emotional Turmoil- Students face crippling stress, feelings of shame, and feeling like they have to be the adult when navigating complex processes without caregiver support.
Complex Admission Processes- Students must contend with unfamiliar terms (like FAFSA), demanding application requirements, and competing deadlines while often lacking support from teachers and counselors.
Leading with Empathy
USER PERSONAS / JOURNEY MAPPING
I synthesized research findings into a clear persona and journey map in order to centralize human experiences within our design process.
Ella Garcia, a Junior in high school, will be the first in her family to attend college. She needs an accessible resource that delivers the right resources and tools so that she can secure college funding, manage complex applications, and achieve her college dreams.
How might we enable students like Ella to easily navigate roadblocks within the pathway to college success?
User Journey Map
Managing Constraints
We were challenged by the CEO and marketing teams to craft a fun, gamified, and engaging digital college application that would motivate students to succeed. We needed to balance this request with the needs of our users.
How might we incorporate gamification in ways that will be engaging and motivating while also accessible to students?
MOOD BOARDING
We utilized mood boarding to envision everything from adventure quests to badges and leaderboards to guide stars. We then simplified and coordinated these elements to align with our users observed needs, behaviors, and motivations in order to create the right level and kind of gamification.
From Brainstorming to Content
INFORMATION ARCHITECTURE
I took stock of all the possible content for our app with a focus on gamification integration. I started with simple lists of content items that I organized into a structured information architecture map. This enabled me to visualize core elements that could be scalable according to growth, budget, and technical constraints.
USER FLOWS
After mapping out key app content, I created a core user flow detailing a succinct onboarding experience, scholarship search process, favorites page, and potential application options.
Visualizing Design Features
FROM SKETCHES TO WIREFRAMES
I drafted several ideas through pen and paper and then through digital wireframes to explore potential visual solutions for One College Hub. I utilized multiple references for dashboard and navigation design such as learning management system structures and gamified platforms like Duolingo and Reddit.
Potential Design Solutions:
Onboarding- Frictionless modal sequencing requesting only key data to inform tailored college matches
Gamification- Positive system feedback, progress indication, points, personal leader board, and badge collection to award key task completion. Heart icons for liking and curating resources and profile avatars to enable personalization.
College and Scholarship Search- A tailored search platform featuring tags that highlight mentorship programs and full funding options for students.
Key Resource Cards- Card components that utilize tags to deliver immediate pertinent info to students such as deadlines, financial opportunities, and application status.
Favorites Page- A gamified resource collection space where students are encouraged to apply to and manage programs.
College Support AI and Terms Glossary- Enable users to gain immediate knowledge of unfamiliar terms and support with application processes.
Career Exploration- Students can navigate potential career pathways aligned to their selected majors
Sketches
Wireframes- With dashboard and UI card iterations
Putting Designs to the Test
USABILITY TESTING
I recruited groups of high school students for quick usability testing in order to gain feedback on style preference, gamification elements, and core app features.
Users felt engaged with the college search process and requested even more gamification including fantasy avatars, additional badges, and an internal app currency system.
Crafting Design Coherency
DESIGN SYSTEM
I developed a UI kit featuring a bold, adventurous color scheme, typography, button styles, card components, avatars, icons, interaction design, and gamification elements that could be utilized for a smooth developer hand off.
Full Fidelity Protoyping
I incorporated user feedback and initial stylistic elements into wireframes for further testing and product feedback.
Believe in Me Home Page- I redesigned the homepage to introduce app integration through a card component with a clear call to action while also showcasing brand clarity across both products.
Onboarding Screens- I designed a smooth onboarding experience with gamification integration such as avatar options (fantasy, human, and choose your own), badges, and progress indication.
Dashboard, Scholarship Search, and Favorites screens- I utilized scaffolded, interaction design elements to enable students to like, add, search, and sort customized scholarships.
Future Iterations- We plan to build out the college search database, create individual program cards, scale internal currency and avatar features, and integrate direct apply functionality.
Home Page, Top and Bottom
Onboarding Screens
Search and Main Dashboard Screens with AI Chat
Main Screens, Full Fidelity
Mobile View- Click to Start
Take Aways
Our team found success through creative problem solving and design collaboration. We utilized Agile frameworks, design thinking, and ongoing ideation to navigate the challenge of balancing stakeholder needs with user needs. As we synthesized research insights into designs, the scope of our product changed dramatically due to rapid expansion of product scope and features.
What began as an application for high school students to achieve college success expanded into a more complex collection of tools and curriculum content for grades 6 to 12. My contributions focused on UX research analysis, information architecture, and gamified UI design of the college and scholarship search experience.