Improving Autoleap's Design System
Role
Sr. Product Designer
Timeline
Jan 2024
Link
Company
Deliverables
Description
AutoLeap is a cloud-based auto repair shop management software that aims to revolutionize the industry by providing a platform that fuels growth, enhances user-friendliness, and builds customer trust. The software is designed to make shop management more efficient and profitable.
Introduction
Autoleap being an enterprise software operates at a dynamic and fast pace. This approach has been very successful for product's growth but the absence of a design system results in end-to-end inconsistent design & development.
The problem
Inconsistencies in design and development are hindering the company's ability to streamline processes and deliver new products and ideas effectively.
Measuring success
Team adoption
Desiring a design system is one thing, but realizing tangible results necessitates its actual adoption over time.
Design-to-dev handoff
To measure handoff improvement, track designer and developer confusion and time spent on design searching.
Task completion
In an agile environment, it is crucial to execute design and development updates quicker than before.
Product scalability
Autoleap's design requirements are often diverse, so the design system should reflect that as much as possible.
Goals & approach
Consistent experience across all features
Autoleap offers variety of complex features and flows to the users. To ensure a predictable user experience, components should be highly consistent.
Modernise existing and upcoming design elements
Adhering to user expectations is crucial because design best practices evolve. Extensive research on typical components is essential to avoid alienating users.
Clarify component pages with usage examples and edge cases
Designing component states without them being placed in context may lead to inconsistencies. Capture as many edge cases as possible to avoid user experience issues.
Slot components
Increase consistency amid project variations with slot components. In Autoleap's agile approach, think of slot components like picture frames—potentially different styles outside, versatile content inside.
Micro-interaction
It felt appropriate to animate components in a way that enhances visual communication without detracting from the brand or any user's product experience.
Design handoff
Given the design system's breadth and complexity, it was crucial to simplify the handoff process for developers. This involved utilising Zeplin and Storybooks for straightforward handoff, version control, documentation and implementation.
Final Components
Here's a glimpse of some components and their interaction states. This is why prior planning was essential.
Reflection And Results
What would I have done differently?
1. Engaging users early in the design process could provide valuable insights that might refine the problem statement and design direction.
2. Expanding the research to include a wider range of industries and company sizes could uncover diverse needs and expectations, leading to a more versatile platform.
3. Implementing more frequent cycles of usability testing throughout the design process could help identify and address issues sooner, reducing the need for major changes later on.
What did I find challenging?
1. Creating a user-friendly interface that also offers comprehensive features was a delicate balance to maintain.
2. Ensuring seamless integration with tools like Slack required careful consideration of different workflows and user habits.
3. Overcoming initial resistance to adopting a new platform is always challenging, especially when it involves changing established workplace behaviors.
Results
Developers positively adopted the new process
"I no longer have to navigate slowly through a Figma art board to find what I need; it's now easily accessible"
Handoff is less chaotic
Extra design cleanup is skipped and everything is pushed directly to Zeplin and Storybooks for organisation and documentation.
Developers always know which design is the latest
Figma allows some version control, but it has its issues. Zeplin's ability to view and overlay previous versions is a real advantage.
Updating designs takes around a 10th of the time
Components were used before but not to the same scale. However, now, with the new system, updating is effortless.
Entire company has a centre of truth for styling and components
It was common for marketing to ask where to find X. Now, with a centralised design hub, colleagues don't need to make these requests.