20 May When We Should Website Redesign: An Automotive Case Study
When is the best moment to do a website redesign?This article outlines a prospective website redesign for an automotive company in order to question the best possible time to initiate a redesign, and also investigate the specific difficulties of the automotive industry’s digital space. Although there are some very progressive electric car companies, such as Tesla and Rimac Automobili, their digital presence is lacking despite their innovation in their field. It’s important to mention that this is not an official redesign, and I do not have any inside information on what is happening within the company, or the industry.
This article is simply my opinion on how the redesign process should unfold, and so I am using the automotive industry as a test case. Also, my intent is not to write this article, or conduct the redesign as self promotion, but rather as a discussion and education piece. You will see that I didn’t choose to redesign an already working platform, product or anything similar. Generally, only Fortune 500 website redesigns are published, which, in most cases, only serves the designer for better visibility or self promotion. Although this process has its merits, I wanted to offer something else. How can the web redesign be used, perhaps, as an educational, or research tool for other designers instead?
I should mention that I was inspired by the article from Tobias Van Schneider regarding the detriments of designers redesigning for Fortune 500 companies.
Further, ever since I’ve been working in the digital field, I haven’t had the chance to design something on my own, something finished for the client, and something I can believe in as a great product. So, this has been my side project.
The Redesign Task
The intent of the redesign is to analyse and discover when it’s the best time to perform the page/service redesign. What are the benefits of choosing the right moment? And maybe more importantly, why? Why should someone do the product redesign just because their page is outdated?
The Automotive Problem
Last year, I chose to redesign the once famous Croatian automotive brand, Rimac Automobili. This is a brand that started with a simple car concept, and has since expanded into a massive components production company. This expansion automatically affected the website structure, and so the whole user-focus changed. Like many other startups, the company began with an idea that eventually evolved into something different. The market reshaped the company, so the focus of the website needs reshaping, as well.
So, this point of expansion would have been the ideal time to do the redesign. The changes could have reshaped the structure, and provided an even better user experience. There was nothing wrong with the concept of the old website within its context; it was made strictly for the needs at the time. However, it initially consisted of six main navigation links within a simple dropdown menu to the second level navigation. When I saw the website, I had a feeling that the designer must not have thought that the company would evolve, and that the website could simply scale without losing focus on the important elements.
There is always much to consider in any website design, and it’s hard to say how much time the designer had for research, wireframing, designing and testing phases. However, even the smallest design decisions early on can cause significant consequences to the quality of a final product. Such careless mistakes will ultimately lead to a website redesign only two or three years after the page was initially published. As a result, clients are likely paying much more for a product, in the long term, than they realize. This way, we can clearly see how important each phase of design is.
When it comes to designing large corporate websites, news portals and similar products, I love the idea of atomic design, and crafting all the components to work in multiple situations. I intend to apply the same thinking on this post. Even though it’s not a huge news portal, it’s important to set up the correct UX structure in the background. That will provide us with a good foundation for continuing to work on the experience of the website. Only when the page has the correct structure will I focus on the user experience. It’s not that I don’t consider the user experience while doing the IA (information architecture), but without the proper structure, the user experience design will be irrelevant. Perhaps at first glance, the website looks nice and functions well, but at some point we will need to reconsider a redesign. This we want to avoid. Redesigns are not cheap!
Why Redesign This Company’s Website?
Currently, Rimac Automobili is expanding, and according to official posts of Mate Rimac, the new model, or the ‘concept s’ car, is already in production. Currently, the website is limited to only one car/product. The current website is created from two main templates and maybe one or two special templates, so basically, each page looks the same. The design focus is on big images of the car, but there isn’t much else, graphically, to illustrate the car’s quality (or the company’s) that helps making a decision to purchase. Although, the disorganization of the website is likely representative of bigger, underlying systemic issues within the company, rather than being solely a design matter. For those with the money, however, the website’s poor design does not encourage the customer. First impressions are crucial, and the website should be able to persuade its user to purchase a $1 million car. Let’s say it should be “appetite appealing,”even though nobody knows what that means. Just like people, websites need salesmanship and charisma.
The design must stand out amongst a sea of similar websites.
I don’t want to offend the original site designers, even though automotive competitors, such as Ferrari, Lamborghini and even my favourite, Aston Martin, have simple websites, also don’t offer great user experiences. They’re all just typical corporate websites. Volkswagen/Toyota/Peugeot and the like have similar website structures. The biggest difference between these brands is the price. So, why doesn’t the Rimac site reflect this disparity in vehicle quality?
Yet, here we are talking about some ultra expensive brands that only a few of us can afford. If I were the customer, I would expect much more from these websites. I want to be sure that I am buying the best product for so much money. What is the difference between these brands? Why is Rimac a better car than Toyota since Toyota has an electric car? Shouldn’t this be evident in the quality of its digital space?
The biggest problem in the automotive industry is that all its websites are pretty much the same; other than different colors and Hero images (product shots), they’re based on the same wireframe. There are many factors behind the automotive company’s decisions, but I believe that there should be a clear distinction in digital presence between a $1 million and a $25,000 car. Since this difference is not apparent on its websites, I challenged myself to create a solution. Before I start explaining the redesign process, I will explain the thinking behind defining a target group.
Automotive Target Group
Any website must consider its users. Who is the target audience for this kind of car? What are they looking for? Unfortunately, I haven’t conducted any additional user research since it’s pretty difficult to to target those people who can afford to buy this car. The cars cost about $850,000, and, as far as I know, there will only be eight Concept _ One vehicles made. However, although we cannot be exact in identifying the type of customer, we may assume that most users will be one of two types: Either someone interested in purchasing a product (or requesting a service) of the company, or a potential future employee.
Analysis of Information Architecture
On our example website, we could see the first navigation point was Concept One ( at the time it was the company’s only product. I should point out that at the time it was the company’s only product. The real website has since been updated. The second navigation item is its evolution, how the car was produced, while at the third point, we see its products and services, Rimac’s financial operation. The fourth navigation item is another important product of company (Greyp electric bikes), which evolved into a whole individual product and company. The last two items are Press, containing press releases, and Blog, neither of which are actually very useful since most of the news was published on social networks.
Another problem was that the career link was hidden as a secondary, less important navigation item, and given the huge expansion of the company, represents an important matter. So, if we consider the user as the focus of corporate concerns, we will see that at most company websites (exceptions are mostly corporate/huge websites) it’s very important to have prominent “Careers” buttons. At such websites, we need to understand that users are not coming to the page to read the news users are there to access the main content: service, and how the product helps them.
The second target group are people who are searching for a job. This is the most important place for providing information to job seekers whether they are local or international.
Possible Design Solutions
Before and after
Originally, the intent was to create a darker, more powerful version of the car, and that I tried to achieve that with image sources I found online. With some Photoshop magic, I got the first hero image for the homepage. My idea for an animation was to slowly reveal the car; first the background, then dot components followed by the car. It was time to start designing the Homepage.
The Homepage Design
On the homepage, there are two main sections: navigation and car showcase. Anything I considered unnecessary was removed. With a quick glance, all the important things are visible, and everything else is on other pages. The user will get a “reward” if they continue to explore the site. At the bottom of the page, there is a progress bar, which at the subpages turns into sub-navigation. (A similar effect is used here http://villashvar.com/en/collection/villa-hera) The progress bar shows theuser’s current position and acts acts like a breadcrumb. This way, the user flow is enhanced and the user is more likely to continue to look at the whole website.
Content Design
For projects like these, I try to design the content, not only the structure. These kinds of projects provide us more freedom to experiment and an ability to design sites as we wish. Hopefully, projects like this will land in our portfolio, unlike projects where we haven’t had the opportunity to make our own design decisions.
The process is simple; at a glance, I read (or prepare) the body of plain text that should appear on the website or app. Next, I try to communicate some elements through icons or interactive animation. For example, details about acceleration, horsepower and top speed are expressed via icons. This way, we don’t need additional words in the text and we have highlighted facts that are ultimately more important to the end user.
Navigation Redesign
The overall navigation structure is now reduced and rearranged based on importance. Now, we have vehicles as the first item, which allows the company to add more car models in the future. This avoids the need to change the website every time a new model is manufactured. For that occasion, the company may create an additional landing page with a different experience.
The secondary page could be entirely independent of the home page, or simply incorporated into it. For that I would recommend Three js, WebGL, Canvas, Greensock or similar. They are well known and are standard. The design below had already rendered components as icons and here are few more I’ve created.
Secondary Pages
An example for the Service page using a slightly different grid. The intent of the different grid is to provide the user a dynamic environment, while exploring the page. The deeper idea behind the dynamics is explaining the car’s behaviour while driving it.
You can see that the idea of consistency is visible in each page, and there is very little plain text. It explains why there are big headlines and different type styles. It’s important to note that page redesign is different from service redesign. Service and product page redesigns are made every day, as designers constantly work to convert clicks into profit. It’s all about performance and conversion rates, in the end. Whereas, a full page redesign is made only when necessary, that is hwen the company or product has outgrown itself, and when the page loses its function because it has too many features.
Conclusion
There are several articles online explaining why we should start working on side projects, and I will summarize them in few sentences. If you want to create a really cool project, pick any idea, project or company and solve a design problem for it. This will display to potential companies/clients how you think, work, and what you can offer. Sometimes, it’s really hard to convince a client to support the redesign. Often, clients are hesitant due to a lack of resources, funds, or time to work on the product/service page. Before you begin designing, consider how the page will look in three years. Not from the perspective of design elements, but from function and structure. Only when the product, or page, is working and scalable, is it easy to make small tweaks to fit modern technology trends. Until then, your product will be fine.
There are many factors that affect the direction of the redesign process, both indirectly and directly. I’ve gone through some of them, but what do you think? What are some key facts, or issues, with the redesign? When is the best time?
