Our Framework

While we had a clear framework for swapping out basic UI components—like buttons, dropdowns, and toggles—we quickly ran into problems with more complex parts of our design. The true “bread and butter” of our product, including our navigation, color scheme, and tables, were largely undetermined in the new system. This meant we couldn’t just swap them out; we had to rethink these core features, which were not as straightforward as a simple button.

In addition to these changes, we collaborated with a third-party for an accessibility audit to highlight the areas of the platform that needed an additional layer of accessibility to reach WCAG AAA.

Our process looked something like this:

• Evaluate which pages were to receive priority
• Start with standard component swap, make accessibility changes
• Size with Engineering page/feature LOE
• Design review with stakeholders (PMs, Admins, Engineers, Accessibility Engineers)
• Engineering hand-off
• Rigorous design and accessibility QA

What you see here are some original LearnPlatform pages ready for redesign.

The strategy centered on standardization and efficiency across the board. This began with implementing a consistent design system (standard color palette) to ensure all data visualizations were visually uniform and accessible (A11y). To speed up development, the team optimized the engineering workflow by connecting Figma and development tools Storybook, which allowed for feature focus QA. For seamless project delivery, a process requiring detailed documentation (checklists and annotations) was established to keep all teams aligned. Finally, a mobile-first approach was adopted as a core design decision to make the product immediately responsive and future-proof.