Richard Kramer UI / UX / Visual Design
Thumb.png

Design System Zero to One for R1

Delivered the v1.0 Design System solutions for R1 including Design System Guidelines, R1 Branded Prime Components, and a Product Design Catalog showcasing examples of greenfield products using the R1DS.

 

Overview

Design Problem

R1 Designers and Developers did not have an official design system or visual language foundations. Product experiences were inconsistent and there is duplication of effort in design and development.

Goals

Create an MVP Design System for R1 that helps to get design and development teams working with a shared set of design guidelines to reduce duplication of effort in design and development leading to reduced design to development times.

  • Improve Design to Dev times

  • Improve design to development fidelity

  • Reduce duplication of effort

  • Design for Greenfield only

  • Increase adoption and engagement of Design System tools

  • Increase collaboration between Design System and Product teams

 

What I did

Strategy

  • Worked with Stakeholders to develop design strategy.

  • Communicated with leadership teams the key strategy to get buy in.

Design

  • Crafted the R1 Design System Visual Language Foundations.

  • Branded the Prime v2.2.0 Component Library.

Documentation

  • Documented Component usage guidelines in Figma for designers.

Collaboration

  • Collaborated closely with R1 Product Designers using the templates.

  • Curated the Design System Product Design Catalog with examples.

Tracking

  • Tracked adoption and usage of Prime 2.2.0 components via Figma.

 

Strategy

Worked cross functionally to set a strategy for the R1DS.

  • Worked with Stakeholders to develop design strategy.

  • Communicated with leadership teams the key strategy to get buy in.

 

Design

Visual Language Foundations

Defined the R1 Brand Visual Language Foundations for Figma Variables and Styles.

 

Branding Components

Used the Tokens Studio Figma Plugin to rebranded the Prime v2.2.0 Component Library for the R1 Brand.

Documentation

Component Usage Guidelines

Created component usage guidelines in Figma for designers based on needs of the designers.

 

Collaboration

Design Templates

Built responsive page templates for designers using Prime 2.2.0 Components + R1DS Foundations.

 

Greenfield Projects

Collaborated closely with product designers to build greenfield products using the R1 Design System. 

 

Product Design Catalog

Collected examples of team projects and design solutions into the Product Design Catalog to share across teams and promote design best practices.

 

Tracking

System Adoption and Usage Metrics

Tracked adoption of R1DS Components by design teams after the V1 Release in Figma.

40+ Components
Prime atomic components branded for use by R1 Design Teams

PX - 68% of inserts
OX - 7% of inserts
RI - 1% of inserts

 

Outcomes for Zero to One for R1 

Delivered Design Tools that helped teams move faster

Delivered R1 banded Prime Component Figma Library with 75+ components ready for design and development and increasing adoption.

Increase Design System engagement and Adoption

Page templates gave designers the tools to prototype and iterate faster. Developers used Prime components with theming variables provided by Figma.

Released 3 Greenfield product experiences

Collaboration efforts with designers using the R1DS Templates drove faster design and development times of Greenfield product experiences. 

Improved Design to Development fidelity

SSOT Design tools that matched Code Improved Design to Development fidelity and improved consistency.