Scalable design systems for multiple brands at Edcetera

A scalable design system and responsive web experiences create consistency, improve usability, and support conversion rate optimization (CRO).

View website (opens in a new tab)
  • UI/UX Design
  • Web Design
  • Design System
  • Wireframing
  • Prototyping

Screen recording of the Edcetera design system in Figma: pages, atoms, molecules, components, text and color styles.

Key design decisions

Clarity, designed into every layer.

  1. Agile Methodology

    Short sprints help clarify stakeholder needs, prioritize project goals, and align the team around a shared vision.

  2. Lo-Fi Wireframes

    A simplified visual hierarchy makes course selection and checkout feel intuitive and sequential.

  3. Final design

    A multi-theme design system simplifies course discovery and purchasing, delivering a consistent experience across multiple brands.

  4. Prototyping

    Reusable commerce patterns create a consistent experience across desktop and mobile while allowing flexibility for campaign-specific content.

Approach & process

Building a design system for multiple color themes

We built a scalable, multi-theme design system with more than 200 reusable components, organized using atomic design principles. This foundation promotes consistency, streamlines design workflows, and supports growth across products and brands.

Grayscale wireframe overview of the Edcetera design system pages
Grayscale wireframe overview of the Edcetera design system pages, second theme
Edcetera design system pages in the blue color theme
Edcetera design system pages in the navy color theme

Design system

Consistency across the brand

Typography foundations: DM Sans typeface with heading and button styles for desktop and mobile
Color foundations: blue, light blue and orange palettes with primary and secondary tokens
Grid foundations: responsive breakpoints, gutters and 12-column layouts
Spacing scale from 2px to 56px
Card components: pricing, review, feature and team member cards
Edcetera website designs on desktop and mobile built with the design system

The solution

A consistent experience across every screen

The responsive design system extends the experience across mobile and desktop, maintaining visual consistency and usability across multiple brands. Reusable components and adaptable layouts ensure a cohesive experience throughout course discovery and the learning journey.

Let’s build something remarkable.

Open to remote Senior UI/UX Designer and Design Lead positions.

GET IN TOUCH

Fields marked with an asterisk are required.