Autoselectr is a car comparison platform designed for Portuguese users to find and evaluate vehicles based on their preferences. The MVP needed to serve two distinct audiences: those who already know the car they want, and those who are overwhelmed by too many options.
I led the UX and UI design from scratch, including user research, UX flows, wireframes, visual design, and developer handoff.
Car buyers are underserved when it comes to mobile-friendly car comparison platforms. Existing tools are clunky on mobile, often limit comparisons to two cars, and don't adapt to user knowledge levels. Autoselectr aimed to solve that by building a dual-experience comparison tool that works equally well for car enthusiasts and first-time buyers.
We analysed top car comparison sites and found consistent gaps across the board:
Most did not support 3+ car comparisons
Target towards users who know what they want
Mobile UX is not user-friendly
Searching for a car only based on the brand
The competitors helped identify gaps in the market as well as get inspiration for good practices
To serve both groups, two parallel user journeys were designed:
For unsure users, a wizard-style questionnaire was built. Each screen focused on one decision, with visual aids and step indicators.
For confident users, a linear form displayed all filters at once. This reduced friction and enabled faster submissions.
Creating a user flow that adapts to the needs of simple vs. advanced users
I worked closely with the Tech Lead to define which user attributes the algorithm needed, helping shape the structure of the questions and how data would be returned and filtered.
The Crazy 8s method was used to quickly explore layout solutions for each major screen. This helped challenge obvious solutions and sparked creative layout directions.
The wizard form was used for beginners, with one question per screen, clear navigation, and progress indicators. The linear form was optimised for experts to skim and complete fast.
Due to the two distinct types of users, two forms were created to support both user types
This was the most technically and visually complex page in the product. Users could compare up to 3 cars, each with extensive specs.
Creating a scalable UI that can be used to compare 3 cars
Inspired by old classified newspapers and the act of circling car listings, a bold, highlight-style yellow was used to call out key user selections. To contrast, blue was used as the primary brand colour to communicate trust and calm.
The entire palette was tested for accessibility contrast, and typography was selected to be both strong and readable.
Creating a branding palette while keeping accessibility in mind
Applying the branding palette to the wireframes
Applying the palette to the elements across the UI
A comprehensive style guide was created with colour and typography rules, reusable UI components, and states for buttons, cards, and forms. Using EightShapes Specs (pre-Figma Dev Mode), annotated spacing and margin specs were generated to ensure a smooth handoff.
The generated styleguide for a streamlined handoff to the developers
This was my first end-to-end client project including branding, UX flows, visual design, and developer handoff. The client accepted the MVP without revision, and we're currently moving into testing with users.