Back
Next Project
ROLE:
UI / UX Design
Animations
User Research
Infography
TOOLS:
MEMBERS OF THE TEAM:
Adobe XD
Illustrator
Photoshop
After Effects
Figma
My work
Our team in Autotrader worked to develop a unique user experience and user interface. The new or already existing customers wanted an easy way to discover the new cars for Ford, Mazda, Audi, and Mitsubishi. Furthermore, I created infographics for the sales team about how the new EV cars are taking the market in 2021 and 2022.
Wireframes
An important face on the development of the whole design created all the wireframes to understand the functionality of the website without adding all the assets. As well, with Autotrader the team was working in an agile work environment that assets were provided after the approval of the client, as result, the wireframes were the best way to understand the functionality.
Design requirements
First Phase
-
Our Autotrader design should be different and unique to all the designs that previews pages had on the past or other websites.
-
Easy to use and very intuitive for different demographics.
-
Promote car brand recognition.
-
Always this about the call to action as a tool to close provide a closer experience with the brand and a bridge between Autotrader and the car manufacture.
-
Build the necessary flows to create a great wireframe to match with the user journey for Usability testing.
-
Align the whole team and
Wireframes
and testing ideas
With the wireframes, we decided to explore different user flows and figure out if some screens will add some value to the user for example, on the Ford website, the first wireframe that we created changed from having 10 screens to 8 screens of the initial user flow.
We keep all our ideas to make the main focus of our websites make the users by the cars and ensuring the styles of each brand will be placed in harmony with the wireframe layout and the mockup.
We identify and refine the user flow in order to keep the user buying the cars and understand the whole experience that the car will provide them.
Testing on mocks vs wireframes
UI as a keyfactor
The user interface on Autotrader was a key factor in this project because the company has a really good library of icons and different HD pictures that I could use during the whole process of the development.
Final Mockups for Developers
Mazda
Understanding the UX
In Autotrader, most of the designs have a different way to understand the user experience because all the car brands chose which UX and UI would be the best to match their specific branding.
Mockups for different Brands
The user research and different layouts that were designed match each brand and all the designs have to be unique and different for the other.
Always responsive
The layout of the websites has to be responsive so in the process of the design, most of the layout has to be complete structure in a way that all the functionalities have to take place in different devices resolutions and nontext or. CTAs have to cover the car or the brand name.
Mobile
Tablet
Desktop
Audi
Audi UX/UI
With the Audi design, our team makes multiple CSS libraries so the text won't be overlapping the cars and each section for navigation was created with different functionality.
Mocks with HQ Assets
For developers were a challenge to add assets on the different websites as they were heavy and most of them needed special treatment for each device. I helped the developers providing each individual assets to develop the page.
