Designing intuitive tools that turn ambiguity into clarity

I'm Mengzhe (Manzie) — a product designer with 5+ years of experience specializing in EdTech, AI, and Healthcare. Currently at Hats & Ladders, based in Seattle.

Available — From concept to execution: design, experiment, ship.

Climber Insight Report — Built in Figma Make

ROLE

Lead Designer prototyping an AI-driven Climber insight report end-to-end in Figma Make

IMPACT

🧭Translated AI signals into educator-ready insights
⚡Shipped a working prototype in days, not sprints
🤝Aligned PM, eng, and learning around one artifact

Gamified Middle School Career Learning Platform

ROLE

Lead Designer of AI-driven insight reports for career-readiness educators

IMPACT

🧭Clarified AI outputs into actionable insights
🤝Raised educator trust with transparent reasoning
📈Scaled reporting across 100+ district cohorts

Scalable Icon System

ROLE

Design Systems Lead on a unified iconography library across platforms

IMPACT

🧱Unified 400+ icons into a single token system
🚀Cut handoff time for new features by 40%
🪞Consistent brand across web, mobile & docs

Reimagining Career Exploration Through Gamified Learning Systems.

Product Designer @Hats & Ladders

Timeline

4 months

Role

AI Strategy
UX / UI Design
Data Visualization
User Testing

With

Product Manager
Engineering Team
Data Scientist
Learning Designers

Team

AI Platform Team

Header image placeholder

Impact

What we achieved in 2026 Q1

10+

new school district contracts by enabling more flexible, classroom-ready delivery.

Tier 2

verified, expanding the addressable learner base from 300K workforce-focused Climbers to over 30M students across grades 6–12.

5+

new industry partnerships with instructional leaders including IBM SkillsBuild, the NFL, and AT&T.

3×

students leave their first session with a strong sense of direction—shifting from exploration to decision.

My Contribution

How I shaped the experience

I designed and shipped a middle school platform experience that balances student engagement with educator control—turning structured curriculum into something students actually want to use. My core contribution was building the system that connects it all: aligning progression logic, content frameworks, and UI patterns into a scalable experience. This enabled personalized learning for students while giving educators meaningful visibility—shifting the platform from a static tool into an engaging, guided learning environment.

Business Goals

Why career education needed to feel more alive

Middle school is the core opportunity as we upgrade our MVP product with new features and "magic moments" to nail product market fit. We need to acquire new industry partners and grow sales funnel with school districts. We also found most competitors focus on tracking things to finish—tracking hours, scheduling, and video resources—few effectively capture or validate what students actually learn.

District Needs

Districts need structured, standards-aligned content — but coaches need the flexibility to adapt delivery in real time. Current models force a choice between the two.

👥

Our Technical Limitation

The existing assignment framework and constraints within the Learnosity API integration slow down our ability to build scalable, brand-aligned gamified experiences.

⏳

🎯

2025 Q4 and 2026 Q1-2 Goal

✓Boost at least #1M in school district sales and prove product market fit with MS program (app+workbooks+toolkit)
✓Empower and delight our users: create a virtuous cycle of engagement and

Solution

A progressive journey through clusters, pathways, and Hats

The final experience centers on discovering career "Hats" across 16 clusters through engaging, easy-to-digest activities. Learners begin with broad exploration, progress into clusters and related pathways, and then unlock more specific career content based on their activity history.

The product combines gamified moments like "Your Work Personality," "Unlock Hat Packs," and scenario-based activities with instructor-led lessons. This allows educators to run structured classroom workshops while still giving students a personalized sense of discovery.

Unlocking Career Content

Image placeholder

Image placeholder

Research

Learning from district buyers, current users, and early demos

I partnered closely with the sales team to synthesize prior research and uncover deeper industry insights from their conversations with school and district purchasers. We also ran four collaborative workshops with current users from the New York City Department of Youth and Community Development to validate the feature direction.

To make feedback concrete, I created feature demos for prospective district administrators. Their reactions helped us iterate toward stronger product-market alignment and clarify which parts of the experience needed to support classroom delivery, buyer confidence, and student motivation at the same time.

"

Managing multiple versions of design files is like assembling a puzzle with missing pieces.

Front-end Developer

"

Our existing workflows are consistently hindered by inconsistencies and obstacles.

Front-end Developer

"

It's frustrating to waste time searching for the latest version of components and rebuilding things from scratch.

UX Designer

"

We're eager to launch our new platform, but the lack of responsiveness and scalability is holding us back.

Product Manager

Challenge #1

Inefficient workflows for both Design and UX teams.

Challenge #2

Insufficient communication among Design and UX teams.

Challenge #3

Challenges in new business platforms due to lack of scalability.

Building While Learning

The product needed modularity, feedback, guidance, and multiple ways to learn

Multiple rounds of early testing and product discovery helped us identify the "aha" moments that spark curiosity about new careers. The strongest moments came when learners could connect broad cluster exploration to a specific career Hat and see evidence that their actions were shaping a more personal path.

🧱

Learning activities should be modular and digestible, allowing flexible pacing that adapts to different instructional needs (individual coach or a school administrator).

🔄

The feedback system should provide personalized feedback to unblock users to move from Career Cluster learning to a specific Career Hat.

🖥️

The navigation and interface should reinforce the gamified experience, with timely prompts that guide learners seamlessly to their next activity.

🎛️

Interface should have multi modality of learning can lead to deeper understanding and longer-term retention.

Game Mechanism

Reveal content gradually so exploration becomes direction

The experience is designed as a progressive journey where students unlock career content and role-based experiences through exploration and interaction. Instead of exposing everything at once, content is revealed based on engagement and evolving interests.

The core loop turns student actions into momentum: complete one Cluster Quiz to unlock two new Clusters, complete a Pathway Quiz to unlock advanced Tier 2 clusters, and give ratings to unlock more personalized recommendations.

Image placeholder

Game flow for unlocking clusters, pathways, and personalized recommendations.

Development

Designing through agile delivery from Sprint 28 to Sprint 40

During development, we worked in agile mode from Sprint 28 through Sprint 40. The team set up CMS structures for cross-product features and launched the main Cluster Exploration experience in the app.

Because the experience was being designed and built in parallel, we used each sprint to validate specific design questions. The biggest iteration areas were dashboard navigation, the Hat page, and the Profile page.

Image placeholder

Dashboard navigation iteration.

Design Challenge 01

Make the dashboard more goal-directed

Feedback from school purchasers showed that learners and coaches needed clearer structure and more actionable next steps. Entry points to main learning pages were getting lost in the interface, and the greeting widget pulled focus away from key actions.

I reduced the screen space dedicated to the greeting, merged navigation with the primary next action, and introduced background visuals that reinforced the climbing metaphor. The dashboard became more useful as a launch point for students and a clearer instruction surface for coaches.

Image placeholder

Dashboard navigation moved toward clearer entry points and next actions.

Design Challenge 02

Reduce scrolling and make Hat content easier to explore

The Hat page needed to make modular assignment faster and more intuitive for coaches while keeping the student experience playful. A long scrolling page buried key information, and early layouts made it hard to scale activity types.

We shifted to a flipped-card interaction that made information more interactive and easier to scan. The back of the "Player Card" introduced stats, ratings, and labels, giving career content a more game-like credibility while preserving space for larger activity moments.

Image placeholder

Hat page iteration from long scrolling content to a more interactive card model.

Image placeholder

Process exploration for Hat activity layout and scalable navigation.

Design Challenge 03

Turn Profile into a living record of progress

Profile needed to become the student's home base: a place where activities, challenges, and reflections turned into visible progress. Early versions felt fun, but scattered sections made it hard for students to understand what information they had earned or why it mattered.

I moved the profile panel into a stronger central position, grouped information more clearly, and highlighted recent badges to make progress feel visible and rewarding. The goal was to help students connect dream interests to actual high school choices, classes, and extracurriculars.

Image placeholder

Profile page iteration for stronger identity, grouping, and visible rewards.

Launch

Middle School product launched with NEISD students

The Middle School product launched in January with North East ISD students. The launch validated the direction of a more modular, classroom-ready, and student-centered career learning experience.

My main takeaway was that career learning becomes more powerful when the system does not simply ask students to complete content, but helps them recognize themselves inside the content. The design work was about creating that bridge: from district requirements to coach facilitation, from clusters to Hats, and from playful exploration to a clearer next step.

Image placeholder

Launch moment for the Middle School career learning product.

Prototyping an AI-Driven Climber Insight Report in Figma Make.

Product Designer @Hats & Ladders

Timeline

3 weeks

Role

AI Strategy
UX / UI Design
Prototyping in Figma Make
Data Visualization

With

Product Manager
Engineering Team
Data Scientist
Learning Designers

Team

Insights & Reporting

Legacy spreadsheet-style documentation report — Legacy Report

New Report — Built in Figma Make

Impact

What the prototype unlocked

3 wks

from concept to interactive prototype—built directly in Figma Make instead of waiting on engineering capacity.

1

shared artifact aligned PM, engineering, and learning design around the same insight model.

5+

AI-generated insight patterns validated with educators before a single line of production code.

2×

faster stakeholder review cycles by replacing static decks with a clickable Figma Make build.

My Contribution

How I shaped the report

I led the design and prototyping of the Climber Insight Report end-to-end—turning raw AI signals about each Climber's career-readiness journey into a clear, educator-facing artifact. Using Figma Make, I built a working prototype that simulated real data, AI-generated narrative, and interactive drill-downs, so PM, engineering, and learning design could react to a real product instead of a deck. The work defined the report's structure, the AI's voice, and the patterns we'd hand off to engineering.

Design Goals

What we set out to make true

The report had to translate noisy AI outputs into something educators could act on in under a minute—clear enough to trust, specific enough to guide a conversation with a Climber, and structured enough to scale across hundreds of cohorts.

🎯

Trustworthy, actionable, and scalable

✓ Make AI reasoning transparent—every insight traceable to its source signals.
✓ Surface the next best action for educators, not just the data.
✓ Design a layout that scales from one Climber to a full cohort view.
✓ Validate the AI's voice and tone with educators before engineering build-out.

Discuss with Engineers

Aligning design intent with what the model can deliver

Prototyping in Figma Make gave engineering a concrete target to react to. Together we mapped which insights the AI could generate reliably, which needed guardrails, and which were better expressed as structured data than as natural language. These conversations shaped both the report's surface and the data contract behind it.

AI Reliability

Free-form AI summaries drifted in tone across Climbers. We constrained the model to a structured template with named insight slots so output stayed consistent at scale.

⚙️

Data Contract

Some signals were noisy or sparse for early-stage Climbers. We defined fallbacks and confidence indicators with engineering so the report degraded gracefully instead of fabricating insight.

📊

Solution

A clickable insight report, built in Figma Make

The final prototype is an interactive Climber Insight Report that pulls structured AI summaries, progress signals, and recommended next actions into one educator-facing surface. Built entirely in Figma Make, it served as the source of truth for design, engineering handoff, and educator validation—turning an AI roadmap item into something stakeholders could click through and trust.

Figma Make prototype placeholder

Climber Insight Report prototype: AI-generated narrative, signal-backed insights, and recommended next actions for educators.