Detaillab is a car detailing business in Leeuwarden. The website had to be remodeled due to issues with user experience: layouts, alignments, language, and design. Quick jump to:
Problem
⚠️ The website, originally designed with Squarespace, is not the best fit due to the business's location. While the primary language is Dutch, some key elements like the booking page only appear in English. In addition, some features are difficult to integrate, diminishing the overall user experience. To align more closely with the brand and enhance user experience, thereby increasing sales, the website needs a redesign.
Solution
👉🏼 In order to achieve a better user experience and increase the uniformity of the website, I rebuilt the entire website, making sure to keep some of the original design elements, and created a new version of the key components to
Match the overall design
Match the website language
Add a user friendly interface
Process
Understanding the company thoroughly is crucial for making accurate decisions about what to fix, the style to use, and which details to include. Thus, the first step in the research process was to gain this knowledge by researching the company extensively. This involved studying the style and tone of communication, the overall design choice, and the sections included on the website. Checking the company's social media pages was also a significant part of the process.
DetailLab is a startup that aims to create a strong first impression on potential clients. Thus, the website is designed to evoke a sense of luxury. The car detailing sector is unique, particularly in its pricing structure. It is therefore crucial to align the higher-end prices with exceptional branding and service delivery.
The second part of the research involves thoroughly studying the website and identifying areas for improvement. During this stage, understanding the client's objectives is crucial, making communication key.
At this stage, it was immediately apparent that some key functions were improperly implemented on the website due to the chosen platform. These issues are discussed in the solutions section above.
User research
User research is conducted to complete the research phase. This provides crucial additional information for making design decisions.
Analyzing the website's traffic data, it's clear that most users access the site from their phones. Therefore, phone optimization is crucial. While the website is currently optimized, some elements are misaligned, and it's not entirely user-friendly due to platform limitations.
✏️ Sketches & Wireframes
In the design preparation phase, I find it best to bypass sketching and go straight into working with wireframes. I began by examining the website and creating wireframes that mirrored its structure, since the client wanted to preserve most of it. My primary focus during this process was enhancing the user experience and addressing the issues outlined in the problem statement. I used the notes from the research phase to guide me, so I was well-prepared for this step.
First, I created the wireframe for the home page, which is the most crucial page. This page has elements reused in other parts of the website, making the process simpler. As I proceeded with the Services, Contact, and FAQ pages, I was able to reuse some of these elements. For instance, the appointment scheduling element also features on the services page, and the contact element is present on the contact page.
Previously, I emphasized enhancing the user experience, making uniformity essential. The original FAQ page had scattered text with inconsistent spacing and alignment. To simplify navigation, I opted to present the questions in a dropdown menu. This change will help users find what they need without scanning through a page full of text.
The issue was also present on the services page. To improve readability and style, I organized all the different service packs into their own containers.
