Scope

Scope's inconsistent UI and scattered components slowed development and hurt user experience.

With recent branding updates and a need for scalable design, the team set out to build a unified design system to improve consistency, speed, and usability across the platform.

Scope had no centralized design system, leading to inconsistent visuals, duplicated components, and longer design-dev cycles.

Limited design resources resulted in an unscalable system and a mobile experience with poor responsiveness.

A unified design system for both web and mobile platforms to accelerate the design-to-development workflow.

Sprint Overview

Scope’s newly designed product was scheduled to roll out in August 2024. I had 2.5 months to build a full design system and update both the web and mobile platforms. Here's how I broke it down across sprints:

Web

Mobile

To align stakeholders, I first created mockups for key web and mobile screens using early design tokens like color, type, and spacing.

These samples ensured the visual direction was consistent across platforms and helped validate responsiveness, accessibility, and layout before building the full component library.

Old

Sample 1

Sample 2

Sample 3

I defined foundational design tokens to scale Scope's interface across web and mobile.

These tokens ensure visual consistency and allow future components to be built with speed and clarity across devices.

Color

I made a semantic-based color system so each color communicates purpose. All combinations were tested for accessibility using Material Design’s contrast tools.

Typography

I implemented a dynamic type system that scales across screen sizes and user preferences.

Other Tokens

These tokens support layout and subtle interactions across the design system.

To support consistent design across platforms, I built a comprehensive UI component library from scratch.

The categorized lists below outline the full inventory of components I created for each platform.

Variants

For each component, I built out all possible states and combined them as variants in Figma. To ensure adoption, I also ran Figma onboarding sessions and recorded step-by-step video tutorials, so the team could confidently use the design system.

Component setting in action

Here's how the component settings worked in practice with pre-defined variants and flexible toggles, allowing designers to move from wireframe to high-fidelity mockups in minutes.

168 Web Components & 211 Mobile Components

I redesigned every screen across both web and mobile platforms using the new design system.

To ensure the platform was inclusive and accessible, I audited every screen against WCAG 2.1 guidelines, focusing on visual clarity, keyboard navigation, and screen reader compatibility.

Design-to-development cycles were shortened by 2 times.

Jun Koo

KNOSIS Chief Executive Officer

“Lena built Scope’s first-ever design system from the ground up, and we immediately saw the impact. She approached the project with both precision and speed. She not only established a robust token system and accessible components but also revamped our core UI screens using the new system, staying collaborative with product and engineering. This system will continue to power our team long after the initial build.”

All product images and descriptions displayed were approved by KNOSIS Inc. for the Scope Design System project.