Co-designing Amplify’s K-5 Student-Friendly Design System

Project Info

Details

Company: Amplify / Product: Amplify Desmos Math

My Role: Supporting UX designer

Team: 1 design technology lead, 1 lead UX designer, 1 supporting UX designer (me), 1 lead user researcher, engineering team, and 20+ internal stakeholders,

Contributions: UI audit, component styling, style guide, K-5 student design best practices guide, stakeholder management

What is Amplify?

Amplify is a curriculum and assessment company that supplies print and digital learning materials for K-12 classrooms.

Problem

After Amplify Education acquired Desmos Classroom in 2022, the Amplify Desmos Math product needed:

Design guidance to support the unification of existing and future K-5 Amplify and Desmos Classroom products
UI/UX guidance to support developmental differences among K-5 students.

Solution

I worked with a team of designers to create Amplify’s first K-5-facing design system.

Project Overview

I supported the establishment of a cohesive K-5 design system, which aimed to accommodate the needs of elementary students using our Amplify Platform.
As an initial contributor to the Amplify K-5 student design system, I co-assembled a library of age-appropriate colors, icons, typography, and components with a lead designer.
The updated styling themes were successfully implemented within the unified K-5 Amplify Desmos Math product pilots in Fall 2024.
The design system now supports 55+ new design components and continues to evolve.

Design Process

Auditing Existing UI Components

I reviewed the current K-5 student-facing components within the Amplify product suite, evaluating their usability, accessibility, and age-appropriateness. This audit highlighted areas for improvement in the UI, from button sizes to icon clarity, and provided the groundwork for a unified, user-centric design system.

I audited existing UI components across Amplify’s K-5 products to inform the prioritization of initial design component-building efforts.

Researching and Socializing Design Best Practices

At the start of the project, I researched design best practices for children, and socialized my findings across the design team. I explored design patterns that maximize usability for children ages 5 to 11.

I socialized a summarized overview of Debra Gelman’s book, “Design for Kids: Digital Products for Playing and Learning” across the Amplify and Desmos Classroom design teams.

Example of an app interface that evolves in design complexity and UI maturity for kids as they grow up. From “Design for Kids: Digital Products for Playing and Learning” by Debra Gelman.

Key Project Decision:

Design, product, and engineering leadership referenced my share-out deck and Nielsen Norman’s UX Design for Children design guide to determine that the design system should branch out across three grade bands: K-1, 2-3, and 4-5.

Each branch includes specific spacing, sizing, and styling recommendations based on the developmental needs and preferences of each of these age groups.

Defining Color Palettes

One of my initial tasks was to define a primary and secondary color palette for the K-5 interface. I selected colors that were accessible to young learners, ensuring sufficient contrast for readability, and aligned with Amplify's brand identity.

Typography for Young Students

I researched and defined typography styles suitable for younger students. The typography system we chose was designed to optimize readability for children while considering the challenges that young readers may face with complex text.

Collaborating on Button Styles and Iconography

I worked closely with other designers to create multiple variants of buttons and icons, ensuring that they were intuitive and easy to use for K-5 students. We developed an initial icon asset library that aligned with common educational concepts, such as play, pause, and next. I also collaborated with the team to define spacing and sizing guidelines, ensuring consistency across components and preventing visual clutter.

Illustrated Icon Styles for K-1 Students

Since K-1 students are still learning how to use technology, they interact with digital tools using the same schema as they do with real-world objects. We created buttons and illustrated icons resembling real-world objects to support these users as they make sense of a digital interface.

Styling Differences between K-5 Grade Bands

Grades K-1:
Pre-Readers, New Tech Users
`Raised Buttons / Illustrated Icons`

Use “raised” skeuomorphic buttons and illustrated icons to support the developmental needs
Requires the largest spacing between components, and extra large touch points to prevent tiny human error.

Grades 2-3: Early Readers, “Less Baby-ish”
`Raised Buttons / Standard Icons`

Use “raised” skeuomorphic buttons
Preferred “standard” icon style — While this age group had similar needs to K-1, play-testing feedback revealed that this age group did not like the illustrated icons because they wanted something ‘less baby-ish”.

Grades 4-5: Growing into Adult UI/UX
`Flat + Ghost Buttons / Standard Icons`

Prefers to be as “adult” as they can. This age group is more familiar with the conventional UI/UX patterns we use as adults.
They use a combination of flat and ghost style buttons as well as standard icon styling.
Future hopes to bridge styling gaps between grades 5 and 6

Co-designing Additional UI Components

In collaboration with other team members, I co-designed several additional components, including form fields, input buttons, and interactive elements. These were built with young learners in mind, ensuring that every component felt intuitive, easy to interact with, and supportive of the learning process.