Live Auctioneers

Introduction

Live Auctioneers is a premier online platform that connects buyers with live global auctions, offering a wide range of items, including art, collectibles, jewelry, and more. The platform provides real-time bidding, high-quality photos and descriptions, and the ability to place bids from anywhere in the world. As the company grew and acquired new properties, it became apparent that a unified design system was necessary to maintain consistency across all platforms and streamline future work for internal design and development teams. This case study details the journey of creating and implementing a robust design system for Live Auctioneers.

My Role and Responsibilities

As the Design Lead, I was brought on as a consultant to manage a small team of designers tasked with building the design system. I collaborated closely with key internal stakeholders from product and engineering organizations. My responsibilities included auditing the existing design system, establishing a framework for the new system, and building out an atomic design system across Figma and Storybook. Additionally, I ensured that all components were documented comprehensively, facilitating seamless implementation and maintenance.

Research

Initial Audit: The project began with a thorough audit of the existing design language and implementation processes. The design team conducted a detailed inspection of the components in use, identifying inconsistencies and inefficiencies. This audit extended to the engineering team's processes, revealing gaps in documentation and the inconsistent application of design principles.

Tools and Processes: Many legacy design files were created in Sketch, but the team had since migrated to Figma. However, we discovered that components were not consistently built using Figma best practices, such as auto layout. Concurrently, the engineering team had been rebuilding components in Storybook, often without proper documentation or consistency. These findings underscored the need for a comprehensive and cohesive design system.

Ideation and Design Process

Product Audit: Separately, our team audited the product build of both the website and native mobile application. This evaluation highlighted how components worked together and where significant inconsistencies existed. We documented these findings, identifying pain points within the current user experience. This documentation informed the creation of a project roadmap, prioritizing objectives and setting the stage for the design system's development.

Establishing the Atomic Design System: With the project roadmap in place, we began designing the atomic design system. This approach breaks down the design system into its smallest components, ensuring each element is reusable and consistent. The foundational elements included:

▪ Color: Defining primary, secondary, and tertiary color palettes.

▪ Typography: Establishing font styles, sizes, and hierarchies.

▪ Grid System: Creating a flexible and responsive grid layout.

▪ Spacing: Standardizing margins and paddings.

▪ Modal and Status Badges: Designing common UI components and states.

Documentation and Collaboration: Collaboration between the design and development teams was crucial. We created comprehensive written documentation for each component type, explaining intended usage and addressing edge cases. This documentation lived in Figma and Storybook, ensuring all team members had access to the single source of truth.

Testing and Validation

Usability Testing: We conducted usability testing with internal stakeholders and end-users to validate the design system's effectiveness. This testing phase was critical in identifying any issues or areas for improvement before full implementation. Feedback was gathered and iterated upon, refining the design system to better meet user needs and expectations.

Cross-Platform Consistency: Ensuring consistency across web and mobile platforms was a significant focus. The design system was tested in various environments to confirm that components behaved as expected. This cross-platform consistency was vital in providing a seamless user experience, regardless of the device used.

Final Design and Implementation

Building the System: The final design system featured over 500 unique components, each documented and built out in Figma and Storybook. This robust system provided a foundation for future design and development work, streamlining processes and reducing the potential for inconsistencies.

Implementation: The implementation phase involved close collaboration with the engineering team to integrate the design system into the existing product infrastructure. Regular check-ins and reviews ensured that the components were implemented correctly and functioned as intended.