Evolving the Nova Aurora Design System

Evolving the Nova Aurora Design System

Evolving the Nova Aurora Design System

Varsity Tutors Design System, VT for Schools

Varsity Tutors Design System, VT for Schools

Varsity Tutors Design System, VT for Schools

Varsity Tutors Design System, VT for Schools

How accessibility-focused improvements helped win multiple $1M+ contracts.

How accessibility-focused improvements helped win multiple $1M+ contracts.

How accessibility-focused improvements helped win multiple $1M+ contracts.

How accessibility-focused improvements helped win multiple $1M+ contracts.

OVERVIEW

A new-and-improved learner experience

In 2023, Varsity Tutors' Consumer team launched a modernized learner experience with significant aesthetic and usability improvements that drove measurable increases in product discovery and user engagement.


However, VT4S (Varsity Tutors for Schools) students were still using the older "Learning Lab" experience, creating a two-track maintenance burden and preventing institutional users from accessing the platform's best capabilities.

The VT4S team had an ambitious goal: migrate all institutional students to the new experience ahead of the 2024-2025 academic year to improve student engagement in existing partner districts and win major new contracts, including a $1M+ contract with one of the largest school districts in the country, while eliminating the need to maintain the legacy Learning Lab platform.

Problem

A recent external accessibility audit of the new learner experience flagged numerous accessibility violations of the Web Content Accessibility Guidelines (WCAG) , a significant blocker for procuring district contracts.

These violations were due to the shortcomings of the Consumer team's nascent Nova Aurora design system: fragmented typography styles, under-tested UI components, and an ad hoc color system.

The new learner experience also contained consumer-focused features that some district customers didn't find appropriate for institutional students and would need to be programatically removed or hidden on a per-contract basis.

Outcome

I led the evolution of the existing Nova Aurora design system to guarantee WCAG 2.0 compliance and improve design and implementation consistency across this growing product space.

I also partnered with the VP of Product and Principal PM for VT4S to identify and define the necessary changes to the learner experience, ensuring programatic control over which features, content, and account settings VT4S students could access based on contractual agreements.

This work directly enabled multiple $1M+ district contract wins and allowed the company to sunset the legacy Learning Lab platform, eliminating dual-platform maintenance costs while scaling platform access to over 5 million VT4S students.

PROCESS

Part 1: Internal System Audit and Strategic Alignment

I began by conducting a comprehensive audit of the existing Nova Aurora design system to understand where typography and color implementations had become fragmented across teams.

The Consumer team built a strong foundation based on Google's Material 3 system and MUI React components, but as different product teams adopted the system, inconsistencies had emerged in three key areas:

Product Design libraries in Figma:
Multiple inconsistent interpretations of the base system.

Marketing pages and Design assets: 
Ad hoc expansion of color and typography styles that added inconsistency across the platform and user journey.

Front-end codebase (documented in Storybook): 
Typography and color tokens used a mix of MUI, Material 2, Material 3, and custom style implementations.

Strategic Decisions

Typography Scale: Streamlined Scale and Clear Hierarchy

Context & Solution

The existing Nova Aurora typography system had already ballooned to over 20 style variants with unclear naming and usage guidelines loosely defined across multiple libraries and systems, leading to inconsistent implementation decisions.

Rather than creating entirely custom conventions, I advocated for adopting Material 3's typography system of 5 semantic styles, each with three sizes.

This decision provided several advantages:

  • Strong documentation and clear usage guidelines

  • Future compatibility with other systems, like MUI, as they update to reflect Material 3's latest updates

  • Industry-recognized naming conventions that new team members could quickly understand

Although our initial solution ideation included a wide range of promising options for a big redesign, we decided to test UI changes that would highlight and separate top-match opportunities from the general opportunity feed.

Consolidation Process

Working with front-end engineers and members of the product design and marketing design team, I led:

  • Defined how all existing styles across multiple sources mapped to the consolidated 15 typography styles outlined in Material 3's semantic naming system

  • Created explicit usage guidelines for each style (when to use Display vs. Headline vs. Body)

  • Documented responsive behavior and accessibility considerations to ensure type was legible on any screen size

Engineering ingested typography tokens defined in Figma to updated the style definitions in the Github repository and the new styles were available to view in Storybook.

Although our initial solution ideation included a wide range of promising options for a big redesign, we decided to test UI changes that would highlight and separate top-match opportunities from the general opportunity feed.

Color System: Rebuilding for Accessibility

The existing Nova Aurora color system had a solid conceptual foundation, but the team had neglected to rigorously test contrast ratios for accessibility.

Drawing inspiration from IBM's Carbon Design System development process, I focused on creating a color system that guaranteed predictable contrast ratios across color families and support the institutional theming requirements VT4S needed.

Although our initial solution ideation included a wide range of promising options for a big redesign, we decided to test UI changes that would highlight and separate top-match opportunities from the general opportunity feed.

Technical Implementation:

  • Used CIELAB color space optimization to ensure numerical token differences in every color family (e.g., Color-40 to Color-90) predictably met WCAG 2.0 contrast requirements.

  • Created systematic color ramps where shade relationships remained consistent across different base colors

  • Established semantic color tokens that could be swapped for different themes without breaking accessibility


Review & Deployment:

Using Figma variables and themes as a shortcut, I was able to test the new colors across a representative sample of screens across our entire product.

  • I used Stark, an automated accessibility checker, to catch any overlooked contrast issues.

  • I presented the screens to other members of the Design and Product teams to gather feedback and make any final changes.


After finalizing the color tokens, engineering ingested the definitions from Figma to update the Github repository, with the new color ramp viewable in Storybook.

If our initial experiments confirmed our hypothesis, we could invest more heavily in revamping the opportunity system and UI in the future.

We focused on a targeted intervention that would deliver immediate impact while minimizing initial engineering effort.

Cross-team Collaboration Challenge: 
Color Palette Needs of Product vs. Marketing Design

One source of friction and diversion in the brand's color palette was the naturally differing needs of Product vs. Marketing Design. Product Designers needed a palette with predictable, semantic usage and contrast ratios with intentional uses of color to convey certain types of information or reinforce visual hierarchy in the product experience. On the other hand, Marketing Designers needed a palette that enabled flexibility where color was used more liberally and expressively.

I facilitated workshops with visual designers to establish a set of shared color families that served both needs — Product Designers and Engineers could have set of a tokenized, accessible product colors with specific usage guidelines that maintained consistent brand identity with a broader range of tones, gradients, and textures within the same color families used in marketing contexts.

Although our initial solution ideation included a wide range of promising options for a big redesign, we decided to test UI changes that would highlight and separate top-match opportunities from the general opportunity feed.

We focused on a targeted intervention that would deliver immediate impact while minimizing initial engineering effort.

Part 2: WCAG 2.0 Implementation and VT4S Customization

WCAG 2.0 Implementation and VT4S Customization

With the design system foundation in place, I translated external accessibility audit findings into actionable design solutions for the VT4S student experience.

Accessibility Remediation:

  • Created accessible color combinations using our new token system

  • Established focus state patterns that met contrast requirements

  • Designed clear visual hierarchy that supported screen readers

  • Provided engineering team with specific implementation patterns rather than requiring them to become accessibility experts

    VT4S Experience Customization:
    The new system enabled role-based theming that allowed us to customize the student portal for public school users:
    Removed consumer-focused features (direct tutor scheduling, messaging) through systematic component variations
    Maintained visual consistency while adapting functionality
    Created clear administrative controls for school district management

    Technical Architecture and Adoption

    Token Distribution: I established a workflow that kept Figma libraries and code repositories synchronized:
    Design tokens defined in a central source of truth
    Automated distribution to both Figma variables and CSS custom properties
    Clear documentation for both designers and developers

    Cross-team Adoption: To ensure system adoption, I:
    Created migration guides for existing projects
    Facilitated training sessions for design and engineering teams
    Established design review processes that enforced system usage
    Built Figma templates that made it easier to use the system than work around it

    Business Impact and Strategic Outcomes:

    Major Contract Success:
    $1M+ Contracts: Successfully enabled multiple large district contract wins by ensuring the student experience met WCAG 2.0 requirements
    Platform Consolidation: Eliminated the need to maintain dual student experiences, reducing engineering overhead and focusing development resources
    Competitive Advantage: VT4S could now offer the same modern, engaging experience that had driven consumer platform success

    Operational Efficiency:
    Development Velocity: 60% reduction in design-development handoff issues freed engineering capacity for feature development
    Quality Assurance: Eliminated visual inconsistencies and accessibility violations that previously required extensive QA cycles
    Team Scalability: New designers and developers could contribute effectively with clear, systematic guidelines

    Strategic Platform Growth:
    User Migration Success: Successfully transitioned 5+ million students from legacy Learning Lab to the modern experience
    Future-Proof Architecture: Token-based system enabled rapid customization for different institutional needs and user roles
    Market Positioning: Established VT4S as a premium, compliant solution that could compete for the largest district contracts

    The project demonstrated how strategic design systems investment could directly enable business expansion. By solving accessibility and consistency challenges systematically rather than on a case-by-case basis, Nova Aurora became the foundation that allowed VT4S to scale rapidly while maintaining the quality standards required for institutional partnerships.
    This success established design systems as a core competency within the organization and created a model for how systematic design thinking could unlock new market opportunities and revenue streams.

business impact & next steps

Major Contract Success:
$1M+ Contracts: Successfully enabled multiple large district contract wins by ensuring the student experience met WCAG 2.0 requirements
Platform Consolidation: Eliminated the need to maintain dual student experiences, reducing engineering overhead and focusing development resources
Competitive Advantage: VT4S could now offer the same modern, engaging experience that had driven consumer platform success

Operational Efficiency:
Development Velocity: 60% reduction in design-development handoff issues freed engineering capacity for feature development
Quality Assurance: Eliminated visual inconsistencies and accessibility violations that previously required extensive QA cycles
Team Scalability: New designers and developers could contribute effectively with clear, systematic guidelines

Strategic Platform Growth:
User Migration Success: Successfully transitioned 5+ million students from legacy Learning Lab to the modern experience
Future-Proof Architecture: Token-based system enabled rapid customization for different institutional needs and user roles
Market Positioning: Established VT4S as a premium, compliant solution that could compete for the largest district contracts

Final Takeaways

The project demonstrated how strategic design systems investment could directly enable business expansion. By solving accessibility and consistency challenges systematically rather than on a case-by-case basis, Nova Aurora became the foundation that allowed VT4S to scale rapidly while maintaining the quality standards required for institutional partnerships.
This success established design systems as a core competency within the organization and created a model for how systematic design thinking could unlock new market opportunities and revenue streams.

Final Takeaways

The project demonstrated how strategic design systems investment could directly enable business expansion. By solving accessibility and consistency challenges systematically rather than on a case-by-case basis, Nova Aurora became the foundation that allowed VT4S to scale rapidly while maintaining the quality standards required for institutional partnerships.
This success established design systems as a core competency within the organization and created a model for how systematic design thinking could unlock new market opportunities and revenue streams.

Next Project

Next Project

Next Project

Create a free website with Framer, the website builder loved by startups, designers and agencies.