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 start by conducting competitive research and gathering inspiring references in Figma. Next, I map out flows from UX wireframes and identify patterns, primitives, and components for construction. As a UCD certified designer, I prioritize user-centered design principles and take a minimalist approach to ensure a clean interface and optimal user experience. Later, I integrate motion design for enhanced visual feedback. I collaborate with the design team for evaluation before proceeding to UXR testing. Throughout the sprint, designs are iteratively presented to stakeholders for feedback and refinement.
Setting mood board
Middle school children, typically aged between 11 and 14 years old, represent a crucial developmental stage where they begin to explore digital platforms and engage with technology.
- Middle schoolers are drawn to vibrant colors, playful animations, and visually engaging interfaces.
- Straightforward designs that require minimal effort to navigate.
- Middle schoolers seek immediate feedback and rewards.
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 relies more on text than visuals. icons or illustrations for clean read experience, and animations is added to bring life to the interface.
Visual: Title visuals for design purpose are FPO later it will be updated with Artist piece.
Accessibility: Ensure design adhering to WCAG 2.2 standards. Each paragraph has audio button that can be user initiated with touch targets set at 44px.
Exploration 1 (Text Storytelling Interface)
Concept: Lesson routines are color dependent with texture to be inline with accessibility. I used split-complementary colors as base color and tints to represent different routines. It offers contrast without being overwhelming.
Exploration 2 (Editorial Design)
This UI design has a clean online newspaper like feel with grey accent and split-complementary colors.
Exploration 3 (Social media)
This UI carries a social media vibe using emojis, vibrant color palette and fun animation.
Exploration 4 (Gamify)
This UI design gives more of a serious look with 8px corner radius to the input placeholders rather than persuasive options with pill shaped cta.
User testing (Middle school Look & Feel) Phase 1
For usability testing I made a clickable prototype. This allowed users to navigate through tasks such as signing on with an OTC, completing their profile, adding prescriptions and reports, taking vitals, selecting a doctor, and scheduling an eVisit.
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 state law CA is required to design products that are inline with WCAG 2.2 AA standards. There is a total of 78 WCAG success criteria, CA specific A11Y design framework helps designers with a high-level map routing them to design specific knowledge base like content, UX Design, Layout, flow, interactions, UI assets, motion design etc
Prototyping
Optimized Exploration 3 & 4
Prototype takes a happy path in terms of clicking through. Click practice now to enter the practice mode with a transition animation screen, UI loads to show student have entered to a practice section. After answering correct the gist of the topic goes to key idea card which comes handy when it’s needed in the scored section. Scored section interface has a more serious look than Practice mode where we have gradients, emojis for aged up students.
User testing (Middle school Look & Feel) Phase 2
For usability testing I made a clickable prototype.
Optimized Exploration 1
This prototype seamlessly navigates through all practice mode routines using an animated UI designed around a conversational chat-like structure, providing students with interactive instructions. The deliberate delay in message appearance on specific screens introduces step-by-step options, aiding learners in a guided learning journey. Furthermore, the collapsible activity panel enhances clean read experience, while leveraging commonly used UI patterns for familiarity and ease of use.
A look & feel display of activity panel clicking through instances during a routine.
Before
