Role: Contract Visual Designer(Rapid Prototype)
Company: Hats & Ladders (edtech)
Deliverables: High-fidelity Figma prototype for multiple user roles
Time Frame: Compressed (2 weeks)
Project Overview: Hats & Ladders, an educational technology company, needed a high-impact visual prototype to pitch a new multi-role career pathways platform to potential partners and stakeholders. The platform was designed to engage corporate partners, school districts, students, and state administrators in career exploration and work-based learning opportunities.
The goal: communicate the product’s vision and functionality through a polished, clickable concept that could be demoed live, even before development.
Assigned Task:
I was tasked with creating a pitch prototype to showcase proposed platform enhancements across four distinct user types. The prototype was designed for a high-stakes client presentation, under an accelerated timeline.
Challenges:
-
Create a visually engaging, easy-to-navigate clickable demo that could communicate complex platform features to stakeholders.
-
Tailor designs to four unique user experiences while maintaining a cohesive brand style.
-
Deliver under tight deadlines with minimal iteration time.
Approach
I designed the prototype in Figma, building layouts for each user type with clearly defined feature sets. The emphasis was on clean visual storytelling through static screens, given the pitch presentation format. Each view used the South Carolina brand as a foundation, updated for modern UI clarity and accessibility.
User Views & Page Mapping
Corporate View
For corporate HR teams and training managers, the dashboard delivers a clear snapshot of employee skills development and ROI. Data-rich visualizations and quick-access navigation allow decision-makers to evaluate performance trends and generate reports with ease. A polished, professional aesthetic reinforces trust while supporting a desktop-first work environment.
School District View
District administrators need a high-level overview of student outcomes across multiple schools. The design prioritizes summary dashboards, customizable filtering, and exportable reports, making it simple to monitor trends and share insights. Integrated messaging tools streamline communication between district offices and school-based coordinators.
Student View Story
I graduate high school next year and I still have no idea whats out there.
Wow! This lets me know local job trends and gives me access to experiences.
An easy way to get a variety of job experiences to help me see what possibilities are out there!
Student View
Students engage through a mobile-friendly interface that turns career exploration into an interactive journey. Gamified badges, personalized goal tracking, and accessible navigation make the platform both motivating and easy to use. The friendly visual tone invites students to explore opportunities at their own pace.
More colorful and playful Iconography.
State View
For state policymakers, this view distills large-scale education and workforce data into concise, presentation-ready insights. Aggregated metrics highlight statewide trends, guiding funding decisions and program planning. A clean, consistent design language ensures cohesion with other views while emphasizing clarity and impact.
Design Highlights
-
Kept branding consistent while evolving UI elements for a modern, professional look.
-
Developed unique visual cues for each user type without losing overall cohesion.
-
Applied accessibility best practices for color contrast, font size, and visual hierarchy.
Outcome
The prototype clearly communicated Hats & Ladders’ platform capabilities to investors and partners. It played a key role in securing ongoing interest and support for future development.