Company
Curriculum Associates
Product
E-learning
Approach
Desktop
Framework
React/Js
Platform
App/Web
i-Ready middle school offering provides systematic and explicit Foundational Skills (phonemic awareness, phonics, high-frequency words, sight words, and fluency) based on the Science of Reading to support students in becoming more fluent readers and empower teachers by providing information about how prioritizing these skills can lead to more academic success in the classroom.
- Implement a design system ensuring consistency while adhering to WCAG 2.2 AA standards.
- Design a visually appealing interface that is engaging without complexity or cognitive overload.
- Implement a user-centered approach with a focus on mobile-first design principles.
- Overall feel should add user to usual check up and complete profile
- Passage reader should give users a clean read experience to avoid task completion inefficiencies.
- Build a design system to avoid inconsistency in operations, look & feel and misleading design patterns impacting perceived affordance.
- A11Y compliance with AA 2.2 standards (Color contrast, Key nav, screen reader, HCI, closed caption, audio descriptors, reflow, motion design)
- Activity panel functionality should extend the full pedagogical offering and engagement principles
I-Ready is designed for older Striving Readers that supports students who are three or more reading levels below their grade level which impedes their comprehension and are typically in need of intensive intervention at school.
- Explore overall Look and Feel creating 3 themes with different approach.
- Audit current and create new design system.
- Gather UXR insights from testing and samples from ED.
- Compliance with WCAG 2.2 AA standards.
- Repeated iteration + testing for each component and flow until all UX was approved.
- Collaborate with a11y team regularly.
- Collaborate with Devs for break down of the process and gather opinion.
- Finalize flows for each use case
- Integrate motion design to the interface.
8 months
- WIP
- Review Sprint 4 ✅
- Development
- Shipped
- Archive
Final product shots in action
Product features
Sign in / Sign out / Create account
User profile (Registration)
Multi choice selection
Glossary
Soapbox AI
Keyboard nav
Notes
Lesson practise
Scored section
Collapse / Expand panel
Audio feedback
Case Study
I led the design process from competitive research to scalable component creation, building flows that emphasized clarity and minimalism. Motion design and UXR testing elevated usability, while iterative stakeholder reviews kept alignment. The result: a modern, consistent system that streamlined workflows and improved user experience.
Setting mood board
Middle schoolers (ages 11–14) are at a formative stage where curiosity, creativity, and digital exploration collide. To resonate with them, design must feel approachable yet exciting.
Visual Appeal: Bold, vibrant colors and playful animations capture attention and spark curiosity.
Simplicity: Clear, straightforward layouts reduce friction, making navigation intuitive and effortless.
Engagement: Interactive elements with instant feedback and small rewards keep them motivated and returning.
This balance creates a digital environment that feels fun, rewarding, and easy to explore—perfect for an audience eager to experiment and learn.
Grid / Hotspot / Criterion
Main screen is divided in 60/40 ratio, left panel is designated as passage reader while right panel is for activities.
Lesson flow
Style guide / components
I applied analogous color schemes to create an inviting and user-friendly interface, ensuring compliance with AA and AAA accessibility standards for maximum inclusivity and readability.
I created UI patterns and components that align with e-learning and pedagogy principles, optimizing learning outcomes.
Design thinking process (wireframe)
I was part of Design thinking process to brainstorm with a diverse team of educators, and stakeholders to explore different approaches, features, and functionalities to generate ideas coined around clean read experience.
Design Approach
The interface prioritizes text for clarity, with minimal reliance on icons or illustrations to ensure a clean reading experience. Subtle animations are introduced to bring warmth and life to the interactions without overwhelming the user.
Visuals
Title visuals currently serve as placeholders (FPO) and will be replaced with final artwork by the artist, ensuring cohesion with the overall design language.
Accessibility
The design adheres to WCAG 2.2 standards. Each paragraph includes an audio playback option, with touch targets sized at 44px for accessibility and ease of use across devices.
Exploration 1 (Text Storytelling Interface)
Lesson routines are distinguished using a color-coded system enhanced with textures to support accessibility. I applied a split-complementary color palette as the foundation, with tints representing different routines. This approach provides strong visual contrast for clarity while remaining balanced and non-overwhelming.
Exploration 2 (Editorial Design)
This UI exploration adopts a refined, editorial style reminiscent of an online newspaper. It uses a neutral gray foundation accented by split-complementary colors, balancing clarity with a modern, approachable aesthetic.
Exploration 3 (Social media)
This concept embraces a playful, social media–inspired style. It features a vibrant color palette, expressive emojis, and lighthearted animations, creating an interface that feels energetic, familiar, and fun to engage with.
Exploration 4 (Gamify)
This direction takes on a more structured and focused look. Instead of the playful pill-shaped buttons, the design uses sharper 8px corner radius inputs and components, lending a sense of precision and seriousness. The goal is to balance gamification elements with a professional edge—making the interface feel engaging without being overly playful.
User testing (Middle school Look & Feel) Phase 1
For Phase 1 usability testing, I developed a clickable prototype that allowed middle school users to complete end-to-end tasks in a realistic flow. Test scenarios included signing in with a one-time code (OTC), completing their profile, adding prescriptions and reports, recording vitals, selecting a doctor, and scheduling an eVisit. The interactive prototype helped validate navigation patterns, identify friction points early, and ensure the overall experience felt intuitive and age-appropriate.
1. How do kids describe each version? (e.g., calm, clean, distracting, fun)
2. Which aspects of the design feels age-appropriate?lend to focus?
3. How do kids feel about the design elements:saturation of colors, icons, chatbot feature, emojis, corners (rounded or square) etc. and why do they feel that way?
1. Move forward with a simple UI like that of theDuo Flow.
2. Move forward with ‘flickering’ micro-animation moments between questions and during Gist lab transitions like that from FS or Social Flow.
3. Include color within buttons or icons students should be attending to.
4. Move forward with a color-centric theme likeFS Flow, but test with a slightly less vibrant color palette and/or less complex gradient.
A11Y collaboration
By California law, products must comply with WCAG 2.2 AA standards. With 78 success criteria in total, we built a CA-specific accessibility design framework that guides designers through a high-level map linking to knowledge bases on content, UX design, layout, flows, interactions, UI assets, and motion design. This ensures consistency, compliance, and accessibility from the ground up.
Prototyping
Optimized Exploration 3 & 4
The prototype follows a simple, happy-path flow. Selecting Practice Now transitions into a playful practice mode with vibrant colors, gradients, and emojis. Correct answers feed into Key Idea Cards, handy for quick recall later.
The Scored Section adopts a sharper, more focused look—clean visuals and toned-down playfulness—designed for older students to stay engaged yet serious.
User testing (Middle school Look & Feel) Phase 2
For usability testing I made a clickable prototype.
Optimized Exploration 1
This prototype delivers practice routines through a conversational, chat-like UI that feels interactive and approachable. Animated message delays create a natural step-by-step flow, guiding learners through each task without overwhelming them. A collapsible activity panel keeps the layout clean and focused, while familiar UI patterns ensure an intuitive experience and reduce learning friction.
A look & feel display of activity panel clicking through instances during a routine.
Before
