Middle School Profile
Middle School Profile
The redesigned H&L Profile streamlines onboarding and assessments, empowering young people and educators with intuitive, engaging, and visually appealing tools for seamless career exploration and development.
The redesigned H&L Profile streamlines onboarding and assessments, empowering young people and educators with intuitive, engaging, and visually appealing tools for seamless career exploration and development.
Due to NDA, I can’t disclose specific details about my work on https://www.hatsandladders.com an award-winning career readiness platform with 250,000+ users and 200+ organizations. It offers game-based career exploration for youth aged 14-24. Feel free to contact me at btdesignservices@gmail.com for more information.
Due to NDA, I can’t disclose specific details about my work on https://www.hatsandladders.com an award-winning career readiness platform with 250,000+ users and 200+ organizations. It offers game-based career exploration for youth aged 14-24. Feel free to contact me at btdesignservices@gmail.com for more information.
Role:
Role:
Product Designer
Product Designer
Project Type:
Project Type:
SaaS
SaaS
Duration:
Duration:
3 Months
3 Months
Team:
Team:
3 people
3 people



01 Overview
01 Overview
Revolutionizing
Career Exploration.
Revolutionizing
Career Exploration.
I redesigned the Profile experience for H&L, from onboarding to initial assessments. After thorough research, I created mockups and a working prototype, conducted user testing, and iteratively refined key screens like Profile, Hat Collection, and Portfolio.
I redesigned the Profile experience for H&L, from onboarding to initial assessments. After thorough research, I created mockups and a working prototype, conducted user testing, and iteratively refined key screens like Profile, Hat Collection, and Portfolio.






Aligned with the needs of middle schoolers to foster engagement and self-discovery.
Aligned with the needs of middle schoolers to foster engagement and self-discovery.
Conducted user testing sessions with middle school students around NYC (New York City) area to gather feedback and insights.
Conducted user testing sessions with middle school students around NYC (New York City) area to gather feedback and insights.
Transformed the Profile experience from onboarding to initial assessments.
Transformed the Profile experience from onboarding to initial assessments.
Conducted extensive product research to inform design decisions.
Conducted extensive product research to inform design decisions.
Conducted extensive product research to inform design decisions.
Conducted extensive product research to inform design decisions.
Continuously improved key screens like Profile, Hat Collection, and Portfolio based on user feedback.
Continuously improved key screens like Profile, Hat Collection, and Portfolio based on user feedback.
02 The Problem
02 The Problem
Addressing Middle
School Disinterest.
Addressing Middle
School Disinterest.
To address middle schoolers' needs and enter a new market, we built the Hats & Ladders platform, which was originally for older youth. The new design, created for a pilot summer program, enhances relevance and engagement by incorporating younger students' professional aspirations and values.
We shifted from engagement metrics to the number of onboarded middle schoolers to ensure effectiveness in the new market.
To address middle schoolers' needs and enter a new market, we built the Hats & Ladders platform, which was originally for older youth. The new design, created for a pilot summer program, enhances relevance and engagement by incorporating younger students' professional aspirations and values.
We shifted from engagement metrics to the number of onboarded middle schoolers to ensure effectiveness in the new market.



85,317
85,317
Views
Views
42,591
42,591
Users
Users
0m 29s
0m 29s
Avg. Engagement Time
Avg. Engagement Time
03 The Solution
03 The Solution
Enhanced Engagement
and Readability.
Enhanced Engagement
and Readability.
Our redesign supports middle schoolers by making profiles easy to navigate and understand. By improving scanning and reducing clutter, we help young users quickly grasp their potential and engage with their profiles effectively.
Our redesign supports middle schoolers by making profiles easy to navigate and understand. By improving scanning and reducing clutter, we help young users quickly grasp their potential and engage with their profiles effectively.



Quick Scanning
Quick Scanning
Centralized design focuses user attention on important information, reducing search time.
Centralized design focuses user attention on important information, reducing search time.
Reduced Information Density
Reduced Information Density
Condensed layout minimizes visual clutter and cognitive load.
Condensed layout minimizes visual clutter and cognitive load.
Improved Visual Hierarchy
Improved Visual Hierarchy
Key elements are strategically placed along the Z-pattern for better discovery.
Key elements are strategically placed along the Z-pattern for better discovery.
Mobile Optimization
Mobile Optimization
Shorter width enhances readability on smaller screens.
Shorter width enhances readability on smaller screens.
Delivering the Need
Delivering the Need
The Dashboard.
The Dashboard.
Middle schoolers are disengaged with goal setting and career planning, resulting in low profile usage. The current profile serves as a static inventory rather than a compelling story, failing to capture their interest and needs.
Middle schoolers are disengaged with goal setting and career planning, resulting in low profile usage. The current profile serves as a static inventory rather than a compelling story, failing to capture their interest and needs.



Thank You for Your Interest.
Thank You for Your Interest.
If you have any questions or need further information regarding my personal projects, please feel free to contact me.
I’m more than happy to share additional insights, details, or provide clarifications. I'm always available to assist and discuss how these projects align with your needs or interests.
If you have any questions or need further information regarding my personal projects, please feel free to contact me.
I’m more than happy to share additional insights, details, or provide clarifications. I'm always available to assist and discuss how these projects align with your needs or interests.

UX/UI Design & AR Design
EduQuest App

UX/UI Design & AR Design
EduQuest App

UX/UI Design & AR Design
EduQuest App