Evolving Design at Prodigy
In 2018, Prodigy's four designers lived by the mantra, "build fast and break things." By 2020, the 13 designer team found keeping with the mantra difficult as they struggled with maintaining design standards and coherent user experiences.
As a design systems advocate, I was part of the initiative that lay the foundations for Prodigy's atomic design system: Backpack. In Backpack, we established our new design language using colour design tokens.
Designing Blind
Between 2018 to 2020, Prodigy's design team boomed from four to 13 product designers. Two products grew to five. One office location (Burlington) expanded to two (Toronto). Hundreds of thousands of educators and parents used Prodigy around the world.
But Prodigy's design practice struggled to mature with the team's massive growth. Design standards were silo'd. Web apps varied slightly enough to look and feel incoherent. And designers made design decisions without realizing the impact on other products.
Prodigy's product design language was inconsistent and incoherent.
Prodigy's three web apps (2020): Teachers (left), Parents (centre), and Admins
Rebranding in 3 Months
In 2020, "Prodigy Game" rebranded to "Prodigy Education." As part of the effort, our goal for the project was (i) to give a fresh coat of paint to Prodigy's web apps; and (ii) lay the foundation for a design system, by establishing and using colour design tokens.
Our work contributed to:
- standardizing Prodigy's design language and colours
- making all Prodigy products look and feel cohesive
- building towards the future of Prodigy's design practice
I pair designed on the initiative with another product designer. We adapted a new Brand/Marketing colour palette to work for our web products and created design guidelines for Prodigy's design language.
We collaborated with Prodigy's Brand team, lead software developers, and product squads to implement our new design language.
Unevolved Design
Before starting our work, Prodigy's web apps were plagued with inefficient design and development practices, visual design discrepancies, and a lack of clarity around component usage.
An Example with Buttons
Teachers web app
Two primary colours
Product designers couldn't decide if primary action buttons should be blue or green. So, they used both.
Parents web app
Incoherent usage
Product designers didn't know when primary button colours should be used. So, they used primary colours for non-primary actions.
Admins web app
Inconsistent usage
Product designers didn't have rules for primary button placement. So, they used them any way they wanted.
Inaccessible primary buttons
Inaccessible
Primary button colours weren't in compliance with 4.5:1 WCAG AA colour contrast ratio for 14px text.
Adapting the Brand
Our Brand team worked with a design agency to conceive Prodigy's new colour palette. They supplied us with base colours.
Legacy colours
New brand colours
We took their base colours, then adapted and expanded them into a full product design colour palette. Colour helped Brand team establish identity, while colour helped Product team with meaningful communication.
Product design colour palette
Exploring the Palette
With our new palette, we explored possible looks and feels to refresh our web apps. We held a design charrette with other designers to get a sense of their visions.
Product colour palette explorations
Users should notice the interface but it shouldn't be overpowering. Most important is the content. Content is king, and the interface shouldn't detract from it.
We continued iterating towards a unified look and feel for all our products.
Final iterations of Teachers (left), Parents (centre), and Admins web apps
As the design language came together, we created components and communicated unstated component usage to ensure design standards.
Button state symbols in Figma
Evolving Design
Prodigy Education's new design language evolved Prodigy from a game company to an education company. The new visuals featured a softer, matured interface focused on the education content.
Our pattern library and design documentation lay the foundation for evolving Backpack, Prodigy's design system.
Colours documentation in Figma
Pattern Library
We delivered a pattern library built in Figma that let product designers access the same design components. View library
Software developers also used this pattern library to update colours in all our web apps.
Documentation
We created a set of documentation that acted as design guidelines. They were the single source-of-truth outlining design rationale and component usage at Prodigy. View documentation
Showing the World
We collaborated with lead software developers and product squads to implement all colour changes.
Prodigy's refreshed design language launched on August 4, 2020.
Prodigy's Teachers app with rebrand colours
Next Steps
Following the release, we wanted to continue building our design system. We were planning to work towards:
- a framework for usability testing all components
- a consolidated design system with lead software developers
- a governance model to discuss new and/or updates to components
