Web App
iSTART Early - A UX Redesign of a Gamified Learning Platform
Role
UX Designer & Researcher
Team
Stakeholder, Product Owner, Software Developer, UX Designer
Tools
Figma, Illustrator, DiceBear Library
Duration
10 Weeks
Live Link
Why Redesign?
iSTART-Early is a research-based web app designed to help young students to improve their reading comprehension skills. It teaches strategies like question asking, paraphrasing, and self-explanation through gamified modules themed around space exploration.
Now, Before getting onboard to the spaceship, let's meet Arfes a companion.
ARFES
Ask It
Reword It
Find It
Explain It
Sumarize It
We have five planets, Each planet is named after the ARFES initials that helps students to learn skills.
Despite its strong educational foundation, the interface lacked the visual engagement needed, making it difficult for students to stay motivated and emotionally invested in their learning journey.
Research
Before starting the redesign project, I collected initial research insights through heuristic testing and stakeholder feedback to inform design decisions.
Heuristic Evaluation
Found same static elements, limited personalization, outdated card style design.
Stakeholder Interviews
Collaborated with development team and educational researchers to understand technical limitations and pedagogical goals.
Problem Statement
Research revealed that the iSTART-Early had several engagement challenges that made learning less immersive and personalized.
After reviewing the platform and gathering team feedback, I identified three key issues:
Limited Avatar Customization
Existing system wasn't inclusive and had limitations that restricted personalization.
Dashboard
felt lifeless, failed to create emotional engagement for students.
Unclear Station Navigation
Students struggled to differentiate between lesson, practice, assignment and game.
Avatar & Shop System
Challenge
The existing avatar system presented multiple critical usability and engagement issues
fig. Previous Avatar & Shop
Research Phase
Analyzed 20+ avatar systems & React Libraries
Conducted competitive analysis with Snapchat's Memoji feature as a gold standard
Stakeholder & PO Collaboration
Presented findings to stakeholders and selected Avatar-Shop for its full-body avatar collection and after pivot to dicebear library.
Design Decision Thinking
My design philosophy was
Solution Phase 1
We began with a library of 100 full‑body characters and a mandate to make avatars
Playful
Diverse
Performant in angular
In library, every avatar shared 3 consistent groups head, torso, limbs and for that I used Figma components to swap parts and validate that cross‑mixing looked natural.
Limitations that surfaced
Certain accessories (balloons, special props, hats) wouldn’t align predictably across mixes. Even with standardized names, the raster assets made the system fragile, a small swap could break the composition.
Phase 1 takeaway
From phase1, we achieved rapid scale and diversity with an Angular‑ready naming pipeline, but persistent alignment issues signaled the need for a more modular, vector‑based approach.
Why we pivoted
we pivoted because the misalignment risk and maintenance cost in Phase 1 were too high.
Phase 2
We recommended a pivot to DiceBear’s SVG avatar system for consistency, performance, and modularity.
then I Redesigned, kid‑friendly flow.
Tab sequence by cognitive load
Smart color picker: 8 default palettes for quick choices avoiding Kids confusion for color picker.
Clear states: Locked/unlocked/selected
iBucks economy: Explicit feedback for insufficient funds, discard, reset, and save with large tap targets.
on Layout I decided to have a live Preview on the left and an Edit panel on the right. Changes update instantly, so students see cause-and-effect without losing context.