After successfully launching our first-generation products at Auction Mobility, we saw the need for a more efficient and flexible design approach. To support our expanding platform, we set out to build a dedicated design system. As the lead UX/UI designer, my focus was on creating a scalable system that streamlined deployment while ensuring a seamless customization process for designers.
To achieve this, I redesigned Auction Mobility’s products entirely in Figma, making them more adaptable for different auction houses. This involved building a robust design system that allowed seamless integration of various brands’ color schemes, logos, and identities. The challenge was developing a scalable multi-brand system that maintained design consistency while offering the flexibility clients needed.
As our customer base expanded, our branding process became increasingly cumbersome and outdated. Some products also faced accessibility challenges due to the wide variation in company logo colors. To address this, we developed a new file structure that could efficiently manage a growing number of clients while implementing a smarter approach to color management.
Mapping all UI elements with custom colors revealed numerous inconsistencies, errors, and accessibility issues. During the development of the next generation of smart components, we focused heavily on optimizing color allocation within the design system. This effort eliminated rogue colors while enhancing brand consistency, accessibility, and a stronger sense of ownership for each client.
Tokens were created and assigned to each UI element that required dynamic color changes. These tokens were then grouped into a centralized collection, enabling designers to experiment with colors in real time. This approach allowed for rapid iteration and ensured a unique, brand-aligned visual identity tailored to our client’s needs.
I approached my new designs with all feedback and knowledge accumulated, building a flexible new line of products, easier to implement and with a better integration of the customers’ colors.
We introduced some designs adapted to our tablet users (approx. 10%) and took advantage of the full real screen real estate, including dedicated layout work for the landscape views.
DEVELOPING A DESIGN SYSTEM
I started by building a comprehensive design system that served as the backbone of the new product. The design system included reusable components, offered typography variations, and spacing guidelines, ensuring uniformity across the platform. By establishing a standard set of components, we could ensure that all designs were consistent, but also customizable for individual clients.
RESPONSIVE STATE MANAGEMENT
I paid particular attention to improving the management of responsive states. I ensured that every element in the design system was optimized for mobile, tablet, and desktop views. By introducing adaptive design principles, I enabled the platform to adjust fluidly across devices, ensuring that users experienced a seamless interface, regardless of the device they were using.
To accommodate various businesses and user needs, I proposed introducing variations for key screens, such as auctions or lot review. This allowed a slight differentiation between each branding, creating a better sense of uniqueness.
Classic header style vs. full image for the lot review screen.
Minimalist approach vs. classic cards layout for the auctions screen.
CUSTOMIZABLE BRANDING INTEGRATION
To give auction houses the ability to tailor the platform to their brand, I implemented customizable color schemes and branding options. The design system was flexible enough to allow clients to easily apply their color palettes and logos, ensuring a branded experience that felt personal to each auction house without compromising the user interface’s integrity.
COLLABORATIVE DEVELOPMENT PROCESS
I worked closely with the development team to ensure that the design system was implemented efficiently. I provided detailed guidelines and component libraries to make the handoff smoother and to facilitate faster, more accurate development cycles. Regular feedback sessions allowed for continuous iteration and refinement of the product.
One important aspect of our products that needed some clean up were the bid states. An effort was made to simplify them make them consistent throughout the different platforms while using universal components. This helped reduced the clutter and reinforce our uniformity.
All designs were elaborated with the largest and smallest devices always in mind, leaving no room for surprises on web, mobile and also responsive web.
VERSATILITY & CUSTOMIZATION
The product became much more adaptable to different clients. Auction houses could now integrate their unique branding effortlessly, leading to a 25% increase in customer satisfaction, as clients were able to reflect their identity more accurately within the platform.
DESIGN EFFICIENCY
The introduction of the design system led to a 20% reduction in development time, as developers could now work with standardized components, resulting in faster iterations and a more scalable product.
IMPROVED CONSISTENCY
By refining the management of responsive states, the new platform performed seamlessly on all screen sizes. This resulted in a 30% decrease in user complaints about mobile usability, making the product more reliable and user-friendly across devices.
BRAND DIFFERENTIATION
The ability to customize the interface with their own colors and branding gave auction houses a stronger sense of ownership over the product, leading to a 15% increase in client retention.
