Aros Auto (English version)

During our initial meeting, Aros Auto explained that their website had accumulated a large amount of content over the years and was in dire need of cleanup and restructuring, particularly in terms of pages and menu hierarchy.

They had also recently added a new car brand to their offering and wanted to update their visual identity to remain relevant and leading in the industry. In the pre-study phase, we identified their target audience as people in the midst of life, ranging from young families in need of a practical car to career-oriented individuals looking for a reliable commuting vehicle.

Aros Auto aims to build long-term relationships by conveying quality, experience, trust, and simplicity. At the same time, they want to reach a new generation of young adults by being innovative and standing out in the industry.

After conducting interviews and a competitive analysis, we held a workshop with Aros Auto to discuss how we should communicate with their audience, covering their values, the emotions they wanted to evoke, and how the visuals should reflect these aspects.

As part of our collaboration, both we and Aros Auto created individual moodboards, which we later combined to identify common elements. From there, we established a color palette, a visual language, typography, and an overall design style.

Design Phase
The visual language was inspired by the trending bento box layout, originally from Japanese cuisine, where different components are neatly organized into separate compartments. Companies like Apple and Bolt have adopted this concept in their web design, which served as inspiration for Aros Auto’s website. This approach is unique within the car dealership industry while also providing a clear structure for content.

We opted for a light theme with warm undertones to reflect the company’s approachable and family-oriented values. This led to using a warmer shade of white for backgrounds. For text and darker elements, we used a deep navy blue, paired with a vibrant orange-red as the primary accent color, creating a modern aesthetic and guiding the visitor’s attention effectively.

The imagery was chosen to create recognition among the target audience through photos of relatable, everyday scenarios. At the same time, we aimed to evoke a sense of desire using high-quality supplier-provided images, adding a sense of exclusivity and appeal.

For typography, we selected a modern and highly legible sans-serif typeface. After testing various options, we landed on “Lato”, a typeface with semi-rounded forms that complement the rounded visual style, balancing a friendly tone with a professional feel.

With the design concept in place, we completely restructured the site’s navigation, one of the main drivers behind the redesign. Simultaneously, Aros Auto began placing a stronger emphasis on SEO, which further influenced the menu structure and navigation.

We divided the navigation into a primary and a secondary menu:

Primary menu:

• Car brands – information about available brands and models

• Cars in stock – new and used cars available in each city

• Services – service and after-sales offerings

• Rental – links to their external car rental service

Secondary menu:

• Visiting us – practical information for visiting the physical locations

• About us – information about the company, their operations, and sustainability efforts

• Contact & Opening Hours – contact details for each location and team member

Once the site structure was finalized, we created a wireframe for every page to determine the specific content and features needed. After reviewing and refining this structure, we moved on to high-fidelity prototypes that translated the design concept into complete layouts. We developed creative ways to present information engagingly while ensuring usability and intuitive navigation throughout the site.

Development Phase
With a finished prototype in hand, we moved into development. Our team of four was divided into two frontend developers and two backend developers.

The site was built in WordPress, using the Gutenberg editor as the foundation. Our backend developers created custom Gutenberg blocks to fulfill specific functional needs while providing Aros Auto with a tailored editing interface that empowers them to manage the site content easily going forward.

The frontend developers began by building out the global components, such as the menu and footer, followed by breaking down the design into recurring sections. These were then built as reusable modules and stored in a component library. Once the library was complete, we animated each section using Motion One to bring the site to life.

This also allowed us to split the frontend work, with one developer focusing on building all the subpages and the other on implementing complex functionality, such as integrating with Blocket to automatically import car listings onto the site.

The project resulted in a refreshed visual identity that resonates with new target groups and elevates Aros Auto’s brand presence. The website, comprising over 50 pages, underwent a thorough design process with several iterations to optimize both navigation and content flow.

The new WordPress site, built with Gutenberg and customized blocks, provides Aros Auto with a flexible and user-friendly content management system that will support their needs long into the future.