My experience at

HeyAuto

Role

UX UI Product Designer

Responsibilities

Creat a design system

Time

1 month

Product
www.heyauto.com
Company logo

01.

Context

About the project

HeyAuto is a B2B/B2C automotive marketplace offering a range of automotive services. This case study showcases the process of creating HeyAuto's design system, aimed at unifying the platform and future products of the company. The system includes guidelines, frameworks, components, patterns and flows, foundation, and the adaptation of Google's Material Design 3 to our project.

Business side

The goal is to create a design system that reduces training time for new employees through streamlined processes. It will simplify the adaptation of the system to new ideas with its modular structure, save time and resources by utilizing Google's Material Design 3, ensure consistency across products within the ecosystem, and enhance communication between departments through integrated collaboration and tools.

HeyAuto design system

02.

Tasks

My tasks

- Adaptation of Google's Material Design 3
- Conducting competitor research
- Identifying functional requirements
- Developing design system principles
- Defining component sets and their properties
- Creating foundation
- Designing component modules
- Establishing hierarchy
- Creating docs for developers

Team

- Chief Product Officer
- 1 Lead Front-end developer
- 1 Front-end developer
- 2 Product Designers
- 1 Product Marketing Manager
- QA engineer

Methods used

- Audit of existing interfaces and components
- Principles of responsive design
- Documentation and training
- A/B testing and feedback
- User flows with scenarios

01 / Docs (click to enlarge)
02 / Foundation (click to enlarge)
03 / Icon library (click to enlarge)
04 / Component Flow (click to enlarge)
05 / Components (click to enlarge)
06 / Components (click to enlarge)

03.

Process

Designing the «Documentation» page

During the analysis of documentation requirements and research of best practices, it was found that effective documentation for the HeyAuto design system should not only serve as a source of information about design foundations and components but also support all participants in the product development process—from new employees (designers, developers, customer service, marketing) to existing ones. Based on this analysis, a documentation structure was developed.

"Documentation" addressed the following aspects:

1. The Need of Design System: This section describes the value and importance of a design system for unifying and optimizing development processes at HeyAuto. It emphasizes how the system contributes to product consistency and simplifies the onboarding of new team members.

2. Foundations of Google's Material Design 3 in Our System: This section details the implementation of Google's Material Design 3 principles within the HeyAuto design system. It describes how foundation solutions are adapted to meet the specific requirements and goals of the project.

3. File Organization: This section provides guidelines for structuring and managing design files, covering file naming conventions, branching, and resource sharing.

4. Communication and Handoff to Developers: This section outlines the processes and best practices for effectively transferring projects from "in progress" to "devs ready", including the use of figma dev tool.

5. Responsive Design: Guidelines for creating adaptive designs that ensure optimal display and functionality across various devices and platforms.

6. Idea to Implementation: An overview of the product development lifecycle at HeyAuto, from initial concept, stage testing, to deployment, with a focus on the role of the design system at each stage.

7. Handoff Structure: An overview of the teams involved at every stage, detailing their roles, responsibilities, and interactions within the design system framework.

Conclusion: This approach to developing the "Documentation" section of the HeyAuto design system ensures design consistency and coherence throughout the product development process. It also acts as a valuable resource for training and onboarding new team members and fosters improved communication and collaboration between various departments.

Designing the "Components" page

During the creation of the HeyAuto design system, significant emphasis was placed on the "Components" section. The aim was to establish a collection of reusable design elements while ensuring they are flexible and adaptable for different tasks, screen sizes, and dark/light themes.

"Components" addressed the following aspects:

1. Definition and Classification of Components: We decided that components would include basic UI elements like buttons, input fields, tooltips, as well as more specialized elements for specific tasks, such as modal windows and navigation bar. These components are designed to be used in larger design patterns and templates.

2. Design Tokens and Styles: A key part of the work involved defining design tokens, which are variables like colors, typography, and spacing used to maintain style consistency. It was decided to limit changes to these basic tokens to keep the design foundation stable and predictable.

3. Adaptation and Optimization of Components: To reduce the number of components and make them easier to use in prototypes and wireframes, we decided to convert existing components from UI kits into more versatile elements with properties. We also implemented a 4-pixel spacing system to ensure visual harmony and consistency.

4. Naming and Structure of Components: Each component was renamed according to a naming system based on devs code, using underscores to simplify developer integration. This made it easier to find and use components in the system and projects.

Conclusion: The development of the "Components" section in the HeyAuto design system resulted in a practical and effective toolkit for both designers and developers. By carefully defining, classifying, and structuring components, we facilitated a more efficient and adaptable interface creation process, simplifying development and ensuring high-quality results.

Challenges and their solutions

1. Challenge: standardizing styles to maintain design consistency and converting them into design tokens with the latest Figma update.

Solution: developed a unified design token library that includes colors, typography, spacing, and other style parameters. Utilized Figma dev tool that facilitate exporting these tokens in a developer-friendly format.

2. Challenge: integrating Google's Material Design 3 principles with HeyAuto's unique requirements and style without compromising brand identity and the uniqueness of the user interface.

Solution: Solution: Established a team of designers and developers to thoroughly examine Material Design 3 principles and adapt them to HeyAuto’s unique needs. Created custom design tokens that match HeyAuto’s primary colors and typography while maintaining Material Design’s framework. Developed custom components to complement Material Design elements, allowing for flexibility and personalization. Conducted regular user testing to ensure that these adaptations improve user experience without losing the advantages of Material Design’s consistency and recognition.

Caro

PREV

STON.fi

NEXT