Web app · Redesign
iSTART Early
A reading platform for young learners: an avatar-and-shop system and lessons built on the five ARFES reading strategies (Ask, Reword, Find, Explain, Summarize). I led its redesign, rebuilding the avatars from raster to SVG and shipping it live to classrooms.
Timeline
Through the May 2025 study
Tools
Figma · Illustrator · DiceBear
Outcome
Shipped live to student classrooms on a DiceBear SVG system of 5 avatars, which replaced my own first build. In the May 2025 study, assignment click-through rose 34%, avatar interaction 78% and independent task completion 86%.
The challenge
The avatar system wasn’t inclusive, the dashboard failed to create emotional engagement, and students couldn’t tell lesson from practice from assignment. Users are children: choice paralysis, reading level, and motor precision are the real constraints.
avatar systems and libraries benchmarked
characters in the hand-extended Figma avatar library
ARFES lessons designed and shipped
DiceBear SVG avatars generating 500+ variants
HOW A STUDENT USES IT
1
Pick avatar
2
Customize
3
Read a lesson
4
Earn iBucks
5
Spend in shop
Feature 1 of 3: the Avatar and Shop system.
Start with the avatars, because they’re where the redesign nearly failed.
Phase 1: the system that worked, until it didn’t
The old shop carried nine documented issues, including:
CLUTTERED THUMBNAILS
MISALIGNED ELEMENTS
UNCLEAR PRICING
TINY TAP TARGETS
MISSING RESET BUTTON
The mandate: avatars that were playful, diverse, inclusive, and performant in Angular. I benchmarked 20+ avatar systems and React libraries, with Snapchat’s Bitmoji as the gold standard, then extended a Figma avatar library, modifying components to make the range more inclusive.
The system work underneath: every avatar shared three component groups (head, torso, limbs), validated by Figma component swapping. I designed a skin-tone palette and a second palette for facial and clothing elements. I extended the library by hand past 100 characters, each base in 5 skin tones.
Figure 1. The extended Figma library: 100 numbered bases, the first 40 shown.
Then production reality arrived. Accessories like balloons and hats wouldn’t align predictably across arbitrary mixes. Raster assets made the whole system fragile: one swap could break a composition, and every new asset raised the maintenance cost. The thing I’d validated in Figma failed in the rendering system.
Phase 2: retiring my own system
I recommended retiring my own system, and the team pivoted on that recommendation to DiceBear’s SVG avatars: consistency, performance in Angular, modularity. The new system runs on 5 avatars that generate 500+ variants, which ended per-asset maintenance.
The rebuilt shop: cut the choices, keep the visuals
The rebuilt shop flow is organized around cognitive load.
TABS
Grouped by decision type.
SMART COLOR PICKER
Default palettes. For 8-to-10-year-olds, a free color wheel is choice paralysis.
ITEM STATES
Locked, unlocked, and selected tiles read by shape and contrast, so a child can tell them apart without reading a label.
IBUCKS FEEDBACK
Explicit feedback for insufficient funds, discard, reset, and save, all with large tap targets.
Layout puts a live preview on the left and the edit panel on the right, so kids see cause-and-effect without losing context.
Figure 2. Drag: the Phase-1 shop against the rebuilt shop.
Figure 3. Selected, unlocked, and locked tiles in the Clothing tab.
Figure 4. The Smart Color Picker: default palettes, one hex field, live preview.
The layer-renaming plugin
During the avatar build, the Angular pipeline needed canonical layer names like head/type98/tone02, and renaming hundreds by hand was error-prone. So I wrote a Figma plugin that bulk-renames sublayers by regex and path template. Exports stopped breaking, and the plugin outlived the project.
head
swap group
/
type98
type
/
tone02
skin tone
Figure 5. One canonical layer name, as the plugin wrote it: swap group, type, skin tone.
Feature 2 of 3: a dashboard that earns the space adventure.
The old dashboard was space-themed and static. The annotated audit listed five problems: static presentation, weak iBucks presence, an improper layout for assignments, a non-engaging interface, and poor active-navigation contrast.
What shipped answers four of the five:
✓
Space-travel immersion on the first screen.
✓
A 3D iBucks coin, so the currency finally has presence.
✓
A reworked layout for assignments.
✓
Contrasting active navigation.
Figure 6. The redesigned dashboard: mission, five-planet progress, iBucks presence.
Feature 3 of 3: stations you can read from orbit.
Each of the five ARFES planets has its own Station Landing, routing students to practice, lessons and assignments. The old landing gave no pod indication and no back navigation, so every activity type looked the same.
The fixes were legibility decisions, pod by pod with distinct color themes:
✓
Floating labels on the pods.
✓
Locked states that show what comes next.
✓
Distinct visuals per activity type.
✓
Assignments became cards showing due dates.
Figure 7. Before: no pod labels, no way back, a heavy lock badge, and the old avatar.
Figure 8. After: labeled pods, a Back button, a chain-and-padlock lock, and the new avatar.
Beyond the three features, I also designed all five ARFES lesson experiences.
Where things landed.
The redesign went live to student classrooms: avatars and lessons in the hands of the 8‑to‑10‑year‑olds it was built for. In May 2025 the lab’s research scientist tested the old and new builds side by side with 18 students at one school. Assignment click-through went from 53 to 71 of 180 scripted tasks (+34%). Avatar interaction went from 64 to 114 of 180 tasks (+78%). Independent task completion went from 7 to 13 of 18 students (+86%). The study measured the whole redesign on a small sample, so I read it as direction.
Project takeaways.
Next case study
NurseShift, a clinical handoff drafted from charted notes
Read the case study →
Anchal Nagdev