According to Stanford’s research, 75% of users evaluate a company’s professionalism based on its website’s appearance. Within less than 1 second, a person decides whether to stay on the site or close the tab, making the “don’t judge a book by its cover” adage irrelevant in this context. In his UI/UX Tech Lead column at P2H, Alexander Chmyra shares valuable insights on how to successfully conduct a website redesign that keeps users engaged for longer. Under Alexander’s guidance, one of the recent redesign projects was sold for $38 million, while others secured investment rounds or became part of major brands. Through the example of their work on the donation platform, Alexander explains the crucial factors to consider in order to make redesign truly effective.

How to create a successful redesign

Over the last three years, P2H has been working on a donation platform for a client from the Middle East. Through the website and app of this project, a sum of over $51 million in donations has been successfully raised. As the platform is currently undergoing a redesign, we will back up our insights with real-time examples.

• Start with a detailed analysis of the indicators
  

Before commencing the redesign of your website, it’s essential to assess its current performance. Conduct a thorough analysis and document various metrics to gain a clear understanding of your website’s strengths and weaknesses. Evaluate factors such as the number of visits, visitors, bounce rate, and time spent on the site over the last month. This analysis will pinpoint areas for improvement during the redesign and the potential impact of the changes. Although you may have already established redesign goals, a comprehensive view of the data will refine your objectives and make them more precise.

“Make sure to record the tools you previously used to gather these metrics. Strive to use the same tools for collecting metrics before and after the redesign to ensure data consistency,” advises Alexander.

Determine the purpose of the redesign

If your goal is simply to update your website because it hasn’t been updated in a while, it may not be a sufficient reason for a redesign. The issue isn’t solely about the site’s external appearance, but also its functionality. In such a situation, conducting an analysis to identify weaknesses could be helpful. You must establish a clear correlation between the metrics you aim to improve and the objectives you plan to achieve through these enhancements. Additionally, be mindful that certain metrics may be interlinked. For example, increasing conversion rates might require simultaneously increasing traffic and reducing the bounce rate.

“Our primary objectives for the platform’s redesign were to address previous shortcomings, enhance the user experience while maintaining the site’s logical structure, and achieve a cohesive website design,” the designer explains.

The primary element featured on nearly every page is the donation card. Depending on the project type, these cards were diversified, leading to issues with perception and difficulty in finding the necessary information. Consequently, we unified all the cards with a consistent design, significantly improving the user experience

• Make the website adaptable
  

The websites that are adapted for different screens: smartphones, tablets, desktops – are more appealing to readers. This is because they provide easy navigation, convenient content reading, and access to all features from any device.

Not only does this improve the user experience (UX), but it also helps increase traffic as it enhances visibility in search engines. For instance, Google takes into account a website’s mobile-friendliness and boosts its ranking in search results through its algorithms.

”Currently, 60% of global traffic comes from mobile devices, so if your website isn’t adaptive, you risk losing a significant portion of your audience. Convenient shopping and form filling on any device can help increase conversions. Additionally, adaptive design speeds up website loading and prevents visitor loss due to long waiting times,” explains Alexander.

The donation platform Alexander is currently working on has 5 versions and adapts depending on the device. Since the platform’s structure is mostly card-based, it doesn’t pose any problems for adaptation and maintains a consistent appearance throughout the product.

• Make the website accessible

Unlike adaptability, accessibility is about how easily users with various limitations can access the content and functionality of your website. This applies to people with visual, hearing, motor, cognitive, or other impairments. Design elements that affect accessibility include navigation, text readability, color contrast, keyboard or mouse accessibility, etc.

In many countries, there are legislative norms that require websites to be accessible to people with special needs. For example, Web Content Accessibility Guidelines (WCAG) is one of the standards that provide recommendations and criteria for creating accessible websites.

Accessibility helps expand the audience of potential leads and increases the competitiveness of the business, but many companies ignore this criterion. For instance, about 90% of projects forget about the presence of a so-called focus state in interactive elements of the website, which helps use the site without relying on a mouse.

• Don’t forget about visual attractiveness

The selection of colors, typography, composition, layout, and graphic elements play a crucial role in the perception of the website. This combination creates the first impression for visitors as soon as they land on the page and helps achieve the design’s goals.

The UI/UX Tech Lead at P2H shares: “Before we redesigned the donation cards on our website, they looked quite disorganized. Similar elements didn’t behave consistently, and these elements could be found in different places on cards that should have been the same. This probably led us to miss out on potential leads. Moreover, since our website is in both English and Arabic, we had to adjust many visual elements to ensure a consistent appearance when switching between languages.”

It’s worth mentioning that the Arabic version of the website needed to be completely mirrored from right to left, this is a unique feature when working with clients from the Middle East. To ensure a consistent style and design coherence, we developed a dedicated UI kit, which sped up the platform’s development using template elements and significantly enhanced the user experience.”

• Prioritize the user’s needs

During the redesign planning, prioritize the users’ needs and expectations. This approach will ensure that the website becomes more intuitive and user-friendly, significantly boosting the chances of repeat visits and purchases.

“It might sound strange, but remember, a website isn’t about you or your company. It’s all about the user and the value they gain from engaging with your platform. Your role as a designer is to demonstrate that they’ve come to the right place and can effortlessly access what they desire in a clear and user-friendly manner. For instance, we designed our donation platform to resemble a familiar online store, allowing users to add multiple fundraisers to their ‘cart’ and donate to all at once. This design choice aligns with Jakob’s Law, which suggests that people prefer familiarity and ease of use based on their existing experiences,” emphasizes Oleksandr Chmyra.

Checklist for an Effective Redesign (Replacing the Conclusion)

So, let’s sum up what you need to pay attention to if you decide to carry out a website redesign:
1. Start with a comprehensive analysis. Before proceeding with the website redesign, thoroughly assess its performance by evaluating various indicators to identify its strengths and weaknesses, and establish clear redesign objectives. Use consistent tools to gather metrics both before and after the redesign to ensure consistent data and enable an objective comparison.

2. Determine the purpose of the redesign. Don’t merely focus on updating the visual appearance, but also prioritize its functionality. Establish a correlation between the metrics you wish to enhance and the goals you aim to achieve.

3. Make the website responsive. An adaptive design enhances the user experience, increases traffic due to better visibility in search engines, and enables faster loading on various devices.

4. Ensure website accessibility. This will broaden the audience of potential leads, elevate the company’s competitiveness, and ensure compliance with legal requirements in many countries.

5. Pay attention to visual attractiveness. Colors, typography, composition, layout, and graphic elements play a vital role in forming the initial impression of the website and achieving redesign objectives.

6. Orient towards the user. Your website should resemble those that visitors use every day, so focus on their needs and expectations. This will make it intuitively understandable and convenient, raising the likelihood of repeat visits and purchases.