iSTART Early
Gamified Learning Ecosystem
Role
Lead UX Designer
Duration
July 2023 - Present
Team
Me (UX designer), Project Manager, Software Engineers (x2), Principal Investigator
A comprehensive case study of a large-scale EdTech platform redesign, covering student and teacher UX, module development, and AI integration.
TL;DR
iSTART Early: Architecting a Gamified Learning Ecosystem
I led UX for an NLP-powered educational platform, building the Teacher Portal from scratch and overhauling the gamified Student Hub.
I designed and developed over 10 complex interactive learning modules and created a scalable design system that improved development efficiency and user experience.
My work created a robust platform for academic research, and I explored its future through a comprehensive AI-powered mobile app concept.
ps: iSTART stand for - Interactive Strategy Training for Active Reading and Thinking
Challenge
The iSTART Early initiative needed to transform a legacy concept into a modern, engaging learning platform for 3rd-5th graders. I faced a complex, three-front challenge:
A Foundational Void: The platform completely lacked a teacher-facing interface. Educators had no tools to manage classes, assign work, or monitor student progress, making the system unusable in real classroom settings.
A Fragmented Student Experience: An existing student portal served as a gamified hub, but it was built without clear direction. It had major UI/UX inconsistencies, poor navigation, and a disjointed connection to the core learning activities.
Isolated Learning Content: The actual learning modules—games, lessons, and quizzes—were functionally and visually disconnected from the main platform, creating a jarring user experience that hurt engagement and learning.
Role
UX Design & Strategy:
Independently designed the Teacher Platform UI/UX from scratch; led critical major Student Portal redesigns; guided product features and timelines coordinating with managers and PI.
Design System:
Built and implemented a unified design system in Figma and SCSS, integrating with Bootstrap; managed token syncing using Token Studio.
Interactive Development:
Developed and revamped 12 interactive Storyline modules; led junior designers on an additional 10 modules.
Usability & Mentorship:
Designed and executed internal usability tests; mentored junior designers through the redesign process.
Process
Process: Building, Enhancing, and Systematizing
My approach was to build the missing foundation, enhance the existing student experience, and wrap it all in a scalable system for long-term quality and velocity.
1. Discovery & Foundational Build
My first priority was creating the non-existent Teacher Portal. I conducted competitive analysis of established Learning Management Systems, interviewed stakeholders, and defined core teacher user stories. This research informed the creation of a complete, intuitive system for class management, assignment creation, and progress tracking, which I designed from wireframes to high-fidelity prototypes.
2. Enhancement & Deep Integration
Simultaneously, I focused on the student experience through two major workstreams:
Enhancing the Hub: I redesigned the main Student Portal to improve navigation, create visual consistency, and better integrate gamification elements like "iBucks" rewards and student avatar.
Developing the Modules: I designed and developed over 10 interactive Storyline modules. This was a significant technical and design lift, requiring me to write custom JavaScript to pass data (like content, scores and completion status) back to the main platform, ensuring seamless flow between the hub and learning content.
3. Systematization & Scaling
To manage the platform's complexity, I established formal UX infrastructure. I built a comprehensive design system in Figma, created a centralized UX Copy Style Guide (integrated pipeline figma variables to CSS variables) for consistent language, and implemented a formal usability testing protocol to embed user feedback directly into our development sprints in Asana.
Avatar System
Collaborative Leadership in Action: The Avatar Pivot, micro case study
A key moment of collaborative leadership came during the avatar system revamp. A colleague's initial proposal was based on static PNGs, which I initially approved. However, recognizing the technical limitations, it was not pragmatic to continue and I knew we had to pivot.
I researched programmatic alternatives and led creation of a proof-of-concept using the 'Avataaars' SVG library.
We presented this more scalable and efficient solution to the leadership, and we collectively decided to implement this in production.
This initiative not only resulted in a better feature but also elevated our team's approach to technical design challenges and important pivot experience for junior designers in the team.
Mobile App
Future Vision: An AI-Powered Mobile Exploration, micro project.
As a self-initiated project to push the platform's boundaries, I designed a complete, high-fidelity mobile application concept. This was a deep exploration of design craftsmanship and forward-thinking technology.
The Vision: The concept reimagines iSTART as an AI-powered learning companion. The pedagogical AI agent, Matty, becomes the central conversational interface, transforming the experience from a passive tool into an active, supportive partner for the student.
Design Craftsmanship: I used AI tools like DALL-E to rapidly generate unique, space-themed graphic assets and character concepts for Matty and integrate existing iStart Early design theme to extend this mobile app.
The final deliverable was a polished, fully-prototyped mobile experience that showcases a vision for more accessible, personal, and engaging educational technology.
Checkout the design documents here:
Impact and Outcome
My work delivered significant impact across the product, process, and team.
Enabled New Academic Research: The stable, usable, and feature-rich platform I helped build is now the foundation for multiple formal, grant-funded research studies conducted by LEI.
Improved Efficiency: The automated design system and token pipeline dramatically reduced design-to-development friction and UI-related bugs, accelerating our feature delivery cycle.
Established a UX-First Culture: The formal UX processes I instituted became standard practice, ensuring all new features are validated through a user-centered design lens before development.
Positive User Feedback: The new Teacher Portal received consistently positive feedback from educators, who reported that it was intuitive and a significant time-saver in managing their classrooms.
Tech Stack
Design Tools: Figma, Token Studio, Articulate Storyline 360, Adobe Creative Suite, DALL-E
Development: JavaScript (for Storyline integration), CSS Variables, HTML/CSS, Avataaars Library
Research Methods: Usability Testing, Stakeholder Interviews, Heuristic Evaluation, Competitive Analysis
Collaboration: Asana, GitHub
Growth
This project demonstrates my ability to lead complex UX initiatives from strategy to hands-on implementation. The blend of UX architecture, UI design, front-end development (Storyline/JS), design system engineering, and team leadership aligns directly with the multifaceted requirements of senior UX, Product Design, and Design Engineer roles.