BenchPrep Design System

Creating a cross-platform design system to unify internal teams under a shared design language foundation and establish consistent company branding.

Role

UX/UI Design, Design System management, Documentation, Accessibility Design

Platforms

Webapp(learning platform), Console (admin platform), BluePrint (content management platform), Learning Hub (learner-facing course management platform)

New opportunity

Established in 2009, BenchPrep has witnessed the evolution of its design without systematic planning since its inception. Beginning with a solitary LMS platform, the company now extends its support to eight platforms. In a strategic move, the company has chosen to concentrate on four core products—webapp (learning platform), Console (user management admin platform), BluePrint (content management platform), and Learning Hub (learner-facing course management platform.) Consequently, there is an initiative to comprehensively document and refine the BenchPrep Design System.

Challenges

1. Different libraries

BenchPrep employs two distinct system libraries, Bootstrap and Material Design (Vuetify), based on the specific products. To ensure a streamlined approach, we've maintained a minimal scope and implemented a well-structured plan to keep these libraries separate but cohesive as a unit.

2. Accessibility

Webapp is required to meet WCAG 2.1

3. Flexibility

While Console and Learning Hub share the same library, their use cases vary. Consequently, the design system needs to exhibit flexibility to cater to the distinct requirements of each platform.

BenchPrep Design Foundation

Structure

Ensuring a uniform framework, every BenchPrep project begins with the BenchPrep Design Foundation component library. Subsequently, any new project integrates the relevant platform component library as needed.

System variants

The BenchPrep Figma file utilizes system variants to maintain a consistent appearance for mockups, ensuring uniform cover, title, and annotation elements.

Color system

The BenchPrep color system defines the colors applicable to the platforms, incorporating information on color contrast ratios. This provides internal users with guidance on selecting the appropriate colors for various scenarios.

Component Library

Universal components

As a foundation, the system must have foundational components to be usable in any product and also has to be scalable. This universal components library supports buttons, tabs, cells, chips, etc.

Console specific component library

The design library specific to the Console (user management admin platform) incorporates custom patterns that leverage components from the universal component library. These patterns serve to expedite the creation of mockups for short-term, deliverable projects.

BluePrint specific component library

Certain BluePrint (content management platform) components incorporate native Bootstrap elements. The Figma component necessitates references to both Bootstrap and Universal components to minimize UI discrepancies.

Result and Lessons

Establishing a foundational structure ensures a standardized file format across all projects, facilitating efficient design reviews for engineers and stakeholders. This approach enables the team to promptly identify and address any UI disparities among platforms. While maintaining multiple design system libraries may not be the optimal long-term solution, it serves as a valuable starting point for component evaluation and gradual modification within the overarching long-term project.