When is the most appropriate time to do a website redesign?
Who hasn’t come across a website that looks outdated and abandoned? Like the shell of a broken down truck left out in the desert, clearly untouched for many years.
Websites are revamped for all sorts of reasons. Regrettably, many businesses don’t realize theirwebsite needs a redesign, and get left behind when rivals gain a competitive edge by improving theirs, boosting their conversions as a result.
A frequent mistake businesses make is not considering early on what might happen if their website needs should become more complex, and as a consequence, find themselves in a difficult, potentially costly situation when they need to expand it. Additionally, important factors such as search engine optimization (SEO), SSL (which affects ranking and security), and mobile friendliness (which affects ranking and conversion) can often end up being neglected.
New website designs often happen because of a leadership change at the top where a fresh branding direction is instituted and new brand marketing people come on board. Evaluating the company’s website, they are horrified to learn it has awful UX and find that a considerable amount of desirable content is missing. Coming to the conclusion it’s simply a badly put together “brochure website” that doesn’t deliver the “voice of the brand” or the conversions the company is looking for, consensus is that it’s ripe for change. It’s time for a website revamp.
A Website Revamp for an Automotive Company
It’s important to mention that this automotive website redesign case study is not an official, commissioned redesign. I don’t have any inside information on the company, their digital strategy, or the automotive industry as a whole. I’m simply using the automotive industry as a test case for a website redesign case study.
In this case study we walk through the website redesign process for the Croatian automotive brand, Rimac Automobili. Rimac is a brand that started with a simple car concept, and has since expanded into a large components manufacturing company. Like many startups, the company began with an idea that eventually evolved into something different; this expansion affected the website structure, and the entire user-focus changed. Market demand took the company into another direction, so the focus of the website needed to shift as well.
There are many different aspects and angles to consider in order to achieve great website design. Despite the fact that the previous web designer may not have had the resources, or enough time for UX research, wireframing, prototyping, and user testing, when it comes to the overall quality of a design, even the smallest early design decisions can have significant negative repercussions, and a less-than-optimal website quality will ultimately lead to a website redesign in two or three years. The upshot of this is that, in the long run, clients are paying more for a website than they realize. Well-defined content strategy and information architecture is crucial when it comes to new website design.
When designing large corporate websites, news portals, and other content-heavy sites, I’m a big fan of atomic design, a flexible design system that is about crafting all the UI components that will work for multiple screens and unforeseen situations in the beginning of a project. Even though this particular case study is not for a large news portal, it will nevertheless make the process a lot easier if a design library of atomic design elements (a set of carefully considered and well-defined design components) is set up to work with later.
Only after the website has the appropriate content strategy and information architecture in place should the focus shift to the user experience. Without proper website structure, the user experience design has no potency. Perhaps at first glance the website looks nice and functions well, but if enough flexibility is not built in, it is inevitable that at some point the company will need to consider a website redesign.
Why Redesign This Automotive Company’s Website?
Rimac Automobili is expanding, and according to official posts, a new concept car called“Concept_One” is already in production. At the time of this uncommissioned website redesign, their website only showcased one car, the “C_Two.” There was no visual variety—the website was created from two templates so each page looked very similar. The design was focused on large, attractive images of the car without much else to illustrate the C_Two car’s quality—essential information needed in order to steer website visitors toward a decision to buy the car.
As the saying goes, “You never get a second chance to make a first impression.” It is critical to use the impact of great design to effectively persuade visitors (who, in this case would be mostly high-performance car enthusiasts) to purchase a car costing close to a million (USD). Such high-end websites need to meet an incredibly high standard. They must project a sense of quality and charisma, and offer a high level of salesmanship as well as a compelling style.
Great Website Design Must Stand out in a Sea of Similar Websites
A big problem in the automotive industry is that most websites in that space tend to look the same. Other than different color-schemes and hero images, it almost seems as if they’re using the same website template.
There are many factors behind an automotive company’s website design decisions, but a clear distinction needs to be made between a $1 million and a $25,000 car and in the way they are presented.
In the high-end automotive space, Ferrari, Lamborghini, and Aston Martin have overly simple, typically corporate websites that (in my opinion) don’t really offer a great user experience.
The middle consumer range (Volkswagen, Toyota, Peugeot, and so on) has a very similar website content structure to the more high-end examples mentioned above. The biggest difference between the high-end and mid-range consumer car brands is the price—so one would expect that Rimac with their high-end cars would have an outstanding website in order to reflect this difference and showcase their expensive brand.
Customer expectations are high when visiting these ultra-expensive car brand websites; it’s a big financial commitment and quite naturally, they want to be sure they are getting the best car their money can buy.
Why is a Rimac better than a Toyota? Looking at their websites there isn’t much differentiation between these two very different brands. Shouldn’t this be evident from the quality of their website?
Targeting High-end Car Buyers with Great Website Design
Any website must consider its users. Who is the target audience for this kind of car? What are they looking for?
Rimac’s cars cost around $850,000, and only a few will be made, qualifying them for a “limited edition” label. Although we cannot precisely identify the type of customer who would be interested in purchasing these cars, we can assume that most customers will be from the wealthy elite. Is Rimac’s website targeting these customers effectively?
Analyzing the Information Architecture
On our example website, we could see the first navigation item was “Concept_One” (at the time, it was the company’s only product). The real website has since been updated. The second navigation item is the evolution of the company, how the car was produced, while the third item is the company’s products and services. The fourth navigation item is another company product (Greyp electric bikes). The last two items are “press,” containing press releases, and the “blog,” neither of which are particularly useful since most of their news was published on social networks.
Another issue was that the career link was hidden as a secondary, less important navigation item and, given the huge expansion of the company, represented an important matter. If we consider the user as the focus of corporate concerns, we will see that at most company websites (typical exceptions are corporate/extremely large websites) it’s very important to have a prominent “careers” link or CTA.
The Website Redesign Process
Homepage Hero Image Before and After
Originally, the intent was to create a darker, more powerful version of the car. I found some images of the Concept_One car online and with some “Photoshop magic,” created the first hero image for the homepage. The next idea was for an animation to slowly reveal the car, first the background, then an outline of the car, followed by a fully rendered image.
The Homepage Design
For the homepage, the concept was to define two main visual areas: the top navigation and the car hero image. That’s it. In order to make it minimalist yet striking, anything unnecessary was removed. At a quick glance, all the important things are visible—everything else was moved to subpages within the site.
Content Strategy and Design
For such website revamp projects, it’s important to also design the content, not only the structure of the site and visual aesthetics. Since this is an uncommissioned website redesign, it offers more freedom to experiment, as well as an aesthetic flexibility where there is the full opportunity to make our own design decisions.
The process is simple:
- Prepare the body text that will appear on the website.
- Communicate some design elements—e.g., eye-catching details about acceleration, horsepower, and top speed—through icons or interactive animations.
By doing this, ancillary words are not needed in the UI, and attention is drawn to areas that are more important to website visitors.
Website Navigation Redesign
The website’s navigation structure is now rearranged based on a hierarchy of importance. We haveVehicles as the first dropdown in the navigation, which gives the design flexibility because it allows the company to add more car models in the future.
To provide immediate access to the secondary Products page from the homepage, it was decided that for efficiency’s sake instead of creating another product listings page (on another webpage)Products and its subcategories could be incorporated into the homepage as a dropdown area and made part of the navigation. The design below shows various products rendered as icons on the homepage when visitors click Products in the navigation. For the 3D product renderings signifying the second levels under Products, I would recommend Three.js, WebGL, Canvas, and Greensock as they are well-known, standardized tools.
Secondary Pages within the Website Redesign
In contrast to the Homepage, secondary pages such as the About and Service pages use a different, more Z-patterned grid. The intent of the different grid layout is to provide visitors with a more interesting and dynamic environment while scanning these pages.
The central idea is still visual minimalism with as little text as possible. People don’t come to these types of automotive websites to read a lot of text, but to get information quickly and visually. This was the thinking behind big, bold fonts on page titles and the employment of different font styles.
It’s important to note that this kind of “company brochure” website redesign is different from a service redesign. A “company brochure” website is more about marketing products. Service-oriented website redesigns are tilted more towards converting clicks into conversions, and eventual profit.
Conclusion
There are several other design blog articles out there recommending why it’s a good idea fordesigners to engage in uncommissioned design projects on the side. If you want to design a really cool project, pick an idea—it can be a website, an app, an enterprise SaaS product—and solve a design problem for it.
Dribbble is full of unsolicited conceptual redesign projects where digital designers have an opportunity to show off their design chops. Aside from giving you a cool design that presents a creative solution to the world, working on an “actual” product problem will show potential companies and clients how you think, your process, and your expertise.
In my case, it was a great exercise tackling a high-end automotive website because it’s particularly important for the design of websites in this sector to meet an exceptionally high standard.
However, a word of caution: before diving in and starting to design, it’s a good idea to be forward-looking and consider how any particular website will need to look in three years, not only from the perspective of design aesthetics but from content, function, and structure. It’s crucial that built-in flexibility be a serious design consideration. It’s easier, more efficient and far less painful to make small tweaks to fit future demands when the website or subpages are working and scalable.
Sometimes, it’s really hard to convince a potential client to do a website revamp. Often clients are reluctant to commit because of a lack of resources, funds, or time. Nevertheless, an unsolicited website redesign is a great way to showcase your website redesign process to the world. And who knows? It’s quite possible that your website redesign could impress a reluctant client enough for them to greenlight it for a “real” project, where, as an added bonus, the designer gets paid!