2021-2023
Web
Expertise
Product Design
UI/UX
Design System
Research Lead
Strategy
Deliverables
Roadmap
Research Agenda
Research Insights
Design Assets
Specs
The primary goal of Axis is to boost efficiency and consistency, enabling engineers and designers to innovate. Our robust design system eliminates inconsistencies, expediting development with essential building blocks.
For seamless team onboarding, we'll create a comprehensive design guide explaining Vroom's development and design processes. This guide provides insights into the rationale behind the Design System, ensuring a smooth onboarding experience for both designers and engineers.
Beyond aesthetics, the Design System ensures quality, consistent animation, and accessibility features across every website and app component. This commitment builds customer trust and ensures inclusivity for all users.
Users
The design system caters to our mobile and web development teams, streamlining workflows with the design guide and library. This internal collaboration ensures a unified and efficient design process.
Externally, Vroom users benefit from a consistently predictable experience on our website, app, and devices. The design system empowers teams and translates into a user-friendly interface for our customers.
Goals
Establish a Design and Engineering Source of Truth
Flexible Design Mocks
CSS Customization Elimination
User-Friendly Adoption
Core-level Animation and Accessibility
Support for AB Testing and One-off Instances
Independence from Third-party Styling Frameworks
Alignment through Tokenization
Adaptability and Scalability
Performance-Enhancing Styling Solution
Non-disruptive Contribution to the Design System
Final Product In Use
Results
Speed
Designers experienced a significant boost in speed. With 70% of the basic page items pre-designed and coded within the system, both designers and developers gained the freedom to concentrate on higher-priority tasks.
Consistency
The interconnected base elements facilitated simultaneous refinements across multiple apps, ensuring uniform style changes and updates with minimal design and tech efforts.
Focus
Previously, design reviews were laden with questions about component selection and location. The implementation of our new system eliminated these uncertainties, enabling designers to dedicate their focus squarely on addressing user problems.
Refactoring
While the initial project lacked adequate time for system development, it necessitated substantial refactoring work for developers. Nevertheless, the decision to revisit and incorporate these changes was pivotal for setting up the platform for future success.
As the director of a dynamic design team, I spearheaded the development of a robust design system that embodies our commitment to excellence. This meticulously crafted system streamlines our design processes, ensuring a cohesive and polished user experience across all products. It reflects not only our technical prowess but also our dedication to creating innovative and visually stunning solutions.
Primary
#et131a
rgb(231,19,26)
#c90106
rgb(201,1,6)
#041022
rgb(1,16,34)
#ffffff
rgb:255,255,255
Grays
#f5f5f5
rgb(245,245,245)
#d6d7da
rgb(214,215,218)
#999da3
rgb(153,157,163)
Accessibility
#f26900
rgb(242, 105, 0)
#195fd0
rgb(25, 95, 208)
#308406
rgb(48, 132, 6)
Filled Red
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Filled Dark
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Outlined Red
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Outlined Dark
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Text
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Selected
Hover
Focused
Disabled
Selected
Hover
Focused
Disabled
Set
Hover
Dragging
Text
Default
Label
Placeholder text
Hover
Label
Placeholder text
Focused
Label
Placeholder text
While Entering
Label
Input text
Entered
Label
Input text
Error
Label
Input text
ERROR MESSAGE
Success Message
Label
Input text
Disabled
Label
Input text
Text + Helper
Default
Label
Placeholder text
Hover
Label
Placeholder text
Focused
Label
Placeholder text
While Entering
Label
Input text
Entered
Label
Input text
Error
Label
Input text
ERROR MESSAGE
Success Message
Label
Input text
Disabled
Label
Input text
Dropdown
Default
Label
Placeholder text
Hover
Label
Placeholder text
Focused
Label
Placeholder text
While Entering
Label
Input text
Entered
Label
Input text
Error
Label
Input text
ERROR MESSAGE
Success Message
Label
Input text
Disabled
Label
Input text
Dropdown + Helper
Default
Label
Placeholder text
Hover
Label
Placeholder text
Focused
Label
Placeholder text
While Entering
Label
Input text
Entered
Label
Input text
Error
Label
Input text
ERROR MESSAGE
Success Message
Label
Input text
Disabled
Label
Input text
Vroom Sans/62px/72px line/Regular
Vroom Sans/48px/64px line/Regular
Vroom Sans/42px/46px line/Regular
Vroom Sans/36px/40px line/Regular
Calibre/28px/40px line/600
Calibre/24px/32px line/600
Calibre/20px/32px line*/600
Calibre/18px/24px line/600
Calibre/18px/16px line/600
Calibre/16px/16px line/500
Calibre/14px/20px line/500
Calibre/24px/30px line/Regular
Calibre/18px/24px line/Regular
Calibre 16px/26px line/Regular
Calibre 14px/20px line/Regular
Calibre 10px/16px line/Regular
Shadow
X: 0px
Y: 0px
Blur: 6px
Spread: 0px
Opacity: 15%
Color: #000000
Outline
Padding: 32px 24px
Border style: solid
Border width: 1px
Border color: #d6d7da
Information
Navigation
Viewport
Symbolic
Social
Questions/Contact
Illustrative (Small)
Illustrative (Large)