Sonic Design System

Role: Lead Designer

Product Space: Aviation, SaaS, Enterprise

Design system used for all Stellar products. When I first joined the Stellar team, I was a contributor to the design system that had been recently started. Over time, I ended up taking the lead on the system and managed its continued development.

--

Problem → Stellar was building multiple applications for their platform which did not share the same front-end code base, resulting in divergences in UI and UX.

Solution → A single design language including a sketch library, wiki documentation, and UI component library built with angular for all Stellar apps.

Sonic Design System

Process

The design team, working with developers, decided on a shared approach to component design and delivery.

Design assets we're created in a shared Sketch library for use on the design team.

Design patterns were defined and documented using Gitbook and Confluence.

A live documentation system was also built using Storybook that sat on top of the Angular design component library.

Sonic Design System

Sonic Design System

Sonic Design System

Results

A single Sketch library, combined with clear documentation, allowed designers to more easily produce consistent designs across products.

The live documentation environment allowed for components to be built and tested before deployment.

A clear workflow from design to development was established and resulted in a more efficient product design cycle.

Next Project →