Linkedin

Make it yours

This site runs on design tokens. Change the primary button token and every primary button on the site updates.

Primary button color

Preview

Settings

Settings

Return to work

CrunchLabs: Taking Hack Pack IDE Engagement from 28% to 71%

  • EdTech
  • Design Leadership
  • UX Research
  • 7 min read

Redesigning a kids’ robotics coding tool so coders of every skill level want to keep hacking.

Tools
FigmaProlificOptimal WorkshopUserTesting
Role
Design lead & systems architect, 5-person team (MHCID capstone)
Duration
6 months (March–August 2025)

The Challenge

Beginners left stuck

CrunchLabs, founded by Mark Rober, makes Hack Pack robot kits that kids build and reprogram in a browser-based IDE. But beginners were stuck on jargon and unexplained errors, and the best community hacks lived in a Discord many parents didn’t want their kids using. Our partners had a lot of ideas and no clear direction.

The Solution

Connected IDE system

We designed a connected IDE and Community Hacks system with Guided and Advanced modes, built-in debugging, a new file explorer, a Restore Code button, and a curated hacks hub. I led the team and architected the end-to-end experience. Workshops with CrunchLabs’ engineers and executives narrowed their ideas into a focused scope. CrunchLabs shipped three of these features.

Key Metrics

28% → 71%

Users “extremely likely” to use the IDE

91%

Likely to visit the Community Hacks page

3

Features adopted into the live IDE

What I Was Solving

Building the robot worked. Hacking and sharing did not. One parent rated the build a 4.5 out of 5 and the coding experience a 0.5. The three-level system confused users:

“I never got the point of Level 1 or 2.”

And finding hacks meant:

“Scrolling through 50,000 Discord channels.”

How might we make Hack Pack more engaging for coders of all skill levels, so it builds community and keeps subscribers coming back?

Roadmap + Methods

PhaseMethodWhat we learned
DiscoverLiterature review, competitive analysis, heuristic evaluationOur STEM-toy competitors offered beginners far more guidance than the IDE did, and most had a reset button where the IDE only had undo and redo.
DiscoverSurvey of the current IDE (38 subscribers)Users rated the IDE “good enough,” but their written answers pointed to confusion around errors and the level system.
AlignOnsite co-creation workshops with CrunchLabsWe aligned on a feasible scope and defined KPIs everyone agreed on.
TestModerated usability tests (6 interviews, low-fi prototype)We found two themes: users needed more support inside the IDE, and they wanted a community space outside Discord.
TestUnmoderated usability tests (28 participants, hi-fi prototype)The share of users “extremely likely” to use the IDE rose from 28% to 71%, and 82% to 92% completed each file task.
TestPreference test (Hack Universe layouts)3 in 4 users preferred the hexagonal layout because it “feels more like Hack Pack.”

How I Led the Team

Owned the roadmap

I served as our main contact with CrunchLabs. We hit every milestone over six months.

Architected the system

I connected building, hacking, and sharing, giving five designers one blueprint to work from.

Delegated to strengths

I split UX research, design, and prototyping by what each person did best and what they wanted to grow in.

Led prototyping

We went from low to high fidelity, so every test round used a working prototype.

Ran onsite workshops

At CrunchLabs HQ with executives and product engineers, we aligned engineering feasibility and business goals.

Set success criteria

A prioritization matrix defined what “better” meant and decided what to build first.

Core Features

Guided & Advanced modes

Two modes replaced three confusing levels. Guided is view-only, with the code locked so beginners can explore and run it without breaking anything. Advanced unlocks the editor and gives experienced hackers full control.

Bug Squasher

Finds errors, explains them in plain language, and points to the exact line. Testers ranked it the most valuable new feature.

File Explorer 2.0 (my feature)

Users were copying code out of the IDE just to save it. I designed templates, safe project duplication, and desktop imports. 95.7% understood the file actions right away, and the upload UI is now live.

Restore Code

With only undo and redo, one bad edit could leave a kid stuck with broken code. So we added Restore Code, the reset button most kids’ coding tools already have: one click and a confirmation, and a hack is back to its original code. It’s now live in the CrunchLabs IDE.

Community Hacks hub

A curated, Discord-free home for hacks, each showing difficulty, tools, and coding concepts. 95% of testers had enough info to decide whether to try one.

Tradeoffs

Ideas we pivoted away from, and why.

Deferred onboarding

It would have stretched our timeline without solving the biggest problems. We documented it as a next step and went deeper on the core.

Curated hub over Discord

A live feed was faster and had more content. Parents didn’t trust it, so we built a curated space families could use.

Two modes over three levels

Most users skipped straight to Level 3. CrunchLabs later shipped our Guided and Advanced modes in the live IDE.

Results

28% → 71% user intent

Testers “extremely likely” to use the IDE more than doubled.

3 features shipped

Guided and Advanced modes, the upload-files UI, and the restore-code button are all live in the CrunchLabs IDE.

Client feedback:

“You guys nailed the scope.”Jim Lee, President @ CrunchLabs
“I couldn’t be happier with the work you guys did.”Dan Tompkins, Head of Design @ CrunchLabs
Return to work