REPAIRSOLUTIONS2 MOBILE APP · Design SYSTEM

Building a scalable design system in Figma.

How I craft dev-ready components that ensure consistency across the entire experience.

ROLE

Lead UX Designer

TIMELINE

3 months

TEAM

Design · Eng

SCOPE

Principles → Development

Heirarchy

Architecture

Rules for how and when to use header & footer variations, modals and action sheets ensures a consistent interaction and intuitive navigation.

Brand Guidelines

The brand guidelines had not been formally defined, so I began by working with the business team and designers to document them.

Layering

Consistent visual hierarchy across the product.

Dark and Bright Mode palettes were created from the brand guidelines.

Tokens

Brand Guidelines

The brand guidelines had not been formally defined, so I began by working with the business team and designers to document them.

Brand Guidelines

The brand guidelines had not been formally defined, so I began by working with the business team and designers to document them.

Palettes

Tokenizing the color palettes allowed for color mode booleans and ensured consistency when designing new components.

Dark and Bright Mode palettes were created from the brand guidelines.

Color Mode Boolean

All components could be toggled from Dark to Light mode, expediting design and development efforts.

Component Design

Atomic Design Principles

Nesting elements kept the entire system clean and organized, making it easy for designers and developers to build screens.

Brand Guidelines

The brand guidelines had not been formally defined, so I began by working with the business team and designers to document them.

Adaptive Resizing

Auto-layout and variable constraints ensures the components are ready for any mobile screen size.

Dark and Bright Mode palettes were created from the brand guidelines.

Annotations

Helping developers understand the intended display behavior for the source data.

Variants

Booleans and text properties reduce variant bloat and increase efficiency.

Dark and Bright Mode palettes were created from the brand guidelines.

Interactions

Defining interactions make mock-ups quicker and defines the desired interaction properties for developers.

Accessibility

Checking contrast, typography and other guidelines before finalizing components/

Dark and Bright Mode palettes were created from the brand guidelines.

What I learned

How to Reduce Bloat

Nesting components, utilizing booleans and text variables makes updating instances faster and easier by reducing manual adjustments.

Collaborate with Developers

How to prepare components for development by utilizing annotations, tokens and defining interactions.

Thanks for your time

“How we spend our days is, of course, how we spend our lives.”
— Annie Dillard

Contact me

Resume

Contact me

Resume

Contact me

Resume