Redesign & Design System. Carsales Retail.
Role
UX/UI Designer
Company
Carsales
Project duration
Feb 2021 (2 months)
I. Project Overview
The redesign of the carsales app and web aimed to improve the overall user experience. The project involved a comprehensive overhaul from conceptual wireframing to the development of an integrated figma design system.
My Role
I led the redesign of the carsales native and web platforms and implemented a figma design system for the design team. Key areas of my focus were the home screen, along with optimising the listings and keeping a consistent look and feel throughout. I worked alongside other designers for their feedback to refine some of the components.
The Problem
The design team faced inconsistency, inefficiency, and frustration without a unified design system. Also keeping in mind scalability while ensuring the design supported iOS, Android and Web.
01. Inconsistent styles across projects.
02. Time wasted recreating elements.
03. No reusable asset library.
04. Slow designer developer handoffs.
05. Steep learning curve for new designers.
The Solution
Build a Figma design system to boost consistency, speed, and teamwork with reusable components and clear guidelines.
01. Created a core Figma component library.
02. Established style guide.
03. Included usage docs for onboarding.
04. Sped up prototyping and handoffs.
II. Design Process
Research
Prior to the redesign the current app and website lacked consistency. I started outlining the key structure, focusing on layout and information hierarchy.
Conceptual wireframes
Defining the Experience
The next step was to focus and explore different layout possibilities for a better intuitive interface for searching, browsing and listings.
Home screen search enhancement
The initial task involved enhancing the home screen’s search functionality by integrating a docked search field. This new feature allows users to initiate a search directly from any point on the screen, This improvement means users no longer need to scroll back to the top of the page to start a search, enhancing their exploration experience on the screen.
Search enhancement with docked search
Home screen components
I designed the home screen to feature consistent browsing components, retaining elements from our previous design.
After researching grid systems, I applied the 8px grid system because it enabled designers to drive layout consistency across all products and breakpoints.
8px grid system advantages:
• Consistency
• Ease of scaling
• Responsive design
• Alignment with device pixels
• Less guess work on design decisions
Home screen browsing components
Listing optimisation
The existing listing card was outdated with a cluttered user interface. My primary goal was to optimise and standardise the core elements, ensuring all information remained intact.
Updated listing with core elements
Listing enquiry feature
The new feature I introduced was an option allowing users to directly enquire about the car from the listing card itself, rather than navigating to the details page.
Enquiry feature
III. Design System
The next big task was to create a set of standardised UI components to ensure consistency across app and web to facilitate easier updates and scalability.
I chose the Atomic Design methodology for this project because it provides a structured, scalable framework. Breaking the design into atoms, molecules, organisms, templates, and pages ensures consistency, reusability, and flexibility.
After discussions with the designers I renamed the figma file pages to elements, components, widgets, templates, and pages because the original Atomic Design terms confused the designers. The new names are more intuitive and familiar, helping the team quickly grasp the hierarchy and purpose of each part.
Design System Components
Grid System: Adopted the 8pt grid system as the foundation for uniform spacing, ensuring elements align seamlessly across all screen sizes.
Typography: Defined fonts, headings, body text, buttons based on readability also applying dynamic type accessibility.
Colour Palette: Specified brand colours with accessibility considerations, including contrasting text colours for readability.
Buttons: Primary, secondary and tertiary with active states.
Icons: A set of custom and standard icons for navigation, actions, and information.
Forms: Input fields, drop downs, checkboxes and radio buttons.
Navigation Elements: Menus, tabs, and popovers.
Cards: Used for displaying vehicle listings with consistent layout for images, titles, descriptions, and pricing.
Modals: For notifications, confirmations, and additional content.
Ad units: Placement advertisement widgets
IV. Design System Integration
After completing the design system, I integrated it into the carsales core figma design system, making it accessible to all designers. Now, they can simply drag and drop components and widgets to construct any pages they needed, significantly reducing design time.
Native drag and drop component examples
Web drag and drop component examples
Template examples
Page templates populated with images & content
Figma iOS prototype (1:17 mins)
Final designs
V. Outcome
The redesigned featured a more intuitive interface with a consistent look and feel across all screens and platforms.
The design system has not only streamlined the design process but also set a foundation for future updates and feature additions with minimal redesign efforts.
This project was completed in 2021. Overtime I have seen some of the features implemented.
IV. Next Steps
Storybook integration
I began developing several frontend UI components using React and then utilised Storybook to showcase these components, complete with detailed documentation for their use across various platforms. Unfortunately, I was unable to locate this work, as it was hosted on a secure server that I no longer have access to.