Redesign the car rental and exchange comparison platform

Programs that were used

Stages of work

About project

Customer

CodeFellows GmbH

In today's fast-paced digital world, it is imperative for businesses to keep up with the latest design trends and technologies. One such company, schlaufahren.de, recognized the need to update its outdated website to improve its visual appeal and improve user interaction. As the professional designer, I had the honor of working on this exciting project, striving to seamlessly combine form and function. In this article, I will take you through the process of redesigning the schlaufahren.de website step by step, highlighting the key elements and strategies that were used to achieve the modern aesthetic and responsive design.

1. Redesign logotype

2. Website redesign (for screens 1920 px)

3. Responsive design

4. UI-kit

Old web design

As I delved deeper into the redesign process, it became apparent that the visual aesthetics of the website needed a complete overhaul. The existing design seemed outdated and didn't engage users. My goal was to create a modern and visually appealing interface that would resonate with the target audience.

From the static emblem to the dynamic representation.

Redesign logotype

To start the redesign process, I started by transforming the static schlaufahren.de logo into the dynamic image that would resonate with the target audience, who wants to live a life of constant movement. The previous logo looked childish, lacked vitality and didn't convey the essence of speed and agility. Also, the company name was not readable with the small size of the logo.

Old logotype

New logotype

Old to New

When starting a website redesign, one of the first steps is to choose a color palette. Inspired by the rich hues of autumn leaves and the sleek appeal of asphalt roads, I have chosen the color palette that exudes warmth and grace.

To make the website look consistent, all photo illustrations were created using Midjourney AI - a white car on an autumn road.

The choice of typography during a redesign plays a crucial role in conveying the essence of a brand. For the bold and distinctive expression, I have used the Russo One font for the headlines. Its somewhat square shapes give the design the sense of austerity and seriousness.

As for the body text, legibility and clarity are vital. That's why I have used the Exo 2 font. With its clean lines and modern style, Exo 2 provides the comfortable reading experience for users. By combining Russo One with Exo 2, the complementary duo was created.

The new and valuable feature is the addition of the search function. This significantly improves the user experience by simplifying the process of finding specific information or products. The introduction of the search function in the header, "Schreiben Sie die Automarke," allows users to search for cars efficiently and find exactly what they are looking for.

In the old version of the site's design, the main services were presented in the way that resembled news rather than services. Accordingly, this presentation created confusion, because the site also has the news section. Therefore, the main services were designed in the new style: I created illustrations in the single style and color palette and created each service as the card. In addition, the placement of a "Next" button on each illustration card clearly indicates to users that they can click on the card for more information.

In today's digital age, social media is a powerful tool for connecting with your audience and expanding your reach. Integrating social media links into your website footer can help strengthen the connection between your brand and your customers. Not only does it allow users to interact with the brand on different platforms, but it also increases the brand's online presence.

Main functional changes on the website

As the professional designer, I know that some details can make the big difference. One such detail is the creation of a 404 page. The 404-page can transform the user's aggravation into the positive impression of the website when he arrives at a page that is not there or experience an error.

When creating the 404 page, I tried to incorporate elements of humor by "throwing" white blocks at the car, which creates the feeling of the stop.

404

UI-kit

New design