The Wheels design system.
Enabling high quality, consistent experiences, company wide.
Atomic design methodology
The Atomic Design Methodology is an industry method of breaking UI’s down into pieces: atoms, molecules, organisms, templates, and pages. We’ve taken this methodology and streamlined for the Wheels Design System
Styles
Styles in the Wheels design library consists of typographic styles, color palettes, component elevation guides, and grid systems. The Style section plays a large role in outlining how a Wheels product ‘looks’ like Wheels.
Components
The basics objects (or atoms) – buttons, controls, and form elements – become the foundation of the system. These ‘lego pieces’ are joined together, making molecules that will be used throughout the UI.
As this systematic thinking is applied, organisms and templates begin to take shape, allowing for repeatable patterns that aid in quick prototyping and development.
Icons & Illustrations
Icons and illustrations expand the visual language, helping users in reinforcing meanings and concepts. Icons work well for individual words, while illustrations provide a broader context, such as onboarding or confirmation overlays.
Pages
Pages are the conjunction of style and components that make up a user experience. Page layouts follow set patterns that are often reusable when building out further user journeys, and are defined here.
Designed for growth
When designing User Interfaces its vital that future growth is considered. The assets created for the foundational design system include the current state and target vision for Wheels. This means as Wheels starts rolling out future capabilities, like electric vehicle support, remote unlocking or shared mobility, we already have the components prepared, and a logic for where they would be situated.
The System
The Wheels Design system is built using Figma, an industry leading software for UI design
Link to system coming soon
The Documentation
Documentation and guidelines for the system can be found on the Wheels Design Frontify site
Link to documentation coming soon