Autohero

Client: Autohero

Role: UI Designer

Year: 2022

Autohero is a leading digital automotive platform in Europe for the online purchase and sale of vehicles, with headquarters in Germany. It offers its private and professional customers throughout Europe a quick and easy way to buy and sell vehicles.

Project Goals

Redesign the interface of specific sections of the site, respecting the brand's visual and strategic guidelines. The new design should integrate the elements indicated by the team and achieve a more dynamic, modern, and functional aesthetic, while remaining consistent with the current system.

the largest independent dealer in Europe

To achieve a refreshed aesthetic without compromising the existing structure, components from the brand's design kit were reused and adapted. The intention was to refresh the interface while maintaining visual and functional consistency with the current system.

Since the content needed to be presented in multiple languages, special attention was given to text spacing and length, ensuring that translations would not affect the visual aesthetic or readability between versions.

The client's guidelines regarding the use of grids, fonts, and margins were carefully followed, allowing for a solid and consistent view throughout the design.

The use of content boxes was a key requirement. Therefore, work was done to ensure their proper layout to facilitate the organization of information and provide clarity to each section.

This modular structure allowed the design to be applied to different grids without compromising visibility or content hierarchy.

The use of content boxes was a key requirement. Therefore, work was done to ensure their proper layout to facilitate the organization of information and provide clarity to each section.

This modular structure allowed the design to be applied to different grids without compromising visibility or content hierarchy.

The use of content boxes was a key requirement. Therefore, work was done to ensure their proper layout to facilitate the organization of information and provide clarity to each section.

This modular structure allowed the design to be applied to different grids without compromising visibility or content hierarchy.

The approach followed a logic of independent blocks and sections, which not only facilitated the technical implementation but also opened up space for future improvements and updates. Finally, various graphic elements (photographs, illustrations, and icons) were incorporated to provide dynamism, variety, and a richer and more engaging visual experience.

The icons (specific to the brand) were used as a signage and accompanying resource, reinforcing the visual identity and facilitating reading. Finally, the use of borders and bars helped separate and organize the information blocks.

For this project, initial standard design dimensions were established: 1440px wide for the desktop version and 360px wide for mobile devices. The initial design process was developed in Sketch, using this tool to create wireframes and high-fidelity mockups, and Adobe Illustrator to create icons and vector elements.

For this project, initial standard design dimensions were established: 1440px wide for the desktop version and 360px wide for mobile devices. The initial design process was developed in Sketch, using this tool to create wireframes and high-fidelity mockups, and Adobe Illustrator to create icons and vector elements.

For this project, initial standard design dimensions were established: 1440px wide for the desktop version and 360px wide for mobile devices. The initial design process was developed in Sketch, using this tool to create wireframes and high-fidelity mockups, and Adobe Illustrator to create icons and vector elements.

Thanks for taking a moment to look at my work!

Made with good vibes + ice-cream © 2025 Renzo Coz

Made with good vibes + ice-cream

© 2025 Renzo Coz