Share article

Obsah

How to Approach a Website Redesign: Build on Data and Iterative User Testing

Author – Robin Janásek

Robin Janásek

5 min read

Triple conversion rate, return on investment in under 8 months, a many⁠-⁠fold increase in traffic, or a 24% profit boost — all from a website redesign alone. These are results from our projects. Read our recommendations and start building on data and user research instead of gut feelings.

Key takeaways from this article:

  • The foundation of any well-functioning website is understanding and correctly setting goals, researching and understanding target audiences, and usability testing of the proposed solution.
  • Use user testing methods, both qualitative and quantitative research, and draw on external studies.
  • Start with information architecture and a prototype — only after testing these should you create the graphic design.

Good results come through user research and testing

The design process we use is based on Simon Sinek's why–how–what approach and website design methodology. The result is a process that includes the following steps:

  • discovery (answering the question why?), in which you thoroughly understand the client, their goals, needs and motivations, their business, and how they perceive their customers,
  • research, in which you get to know the client's customers, uncover their needs and motivations using various research methods, in⁠-⁠depth interviews and usability testing of the client's website and their competitors, or analysis of customer data,
  • design (answering the questions how? and what?), where based on research and data from external studies you determine the approach that will get you to the goal, and using chosen tools and methods you create a website design and prototype,
  • evaluation, meaning usability testing and refinement of designs until they work and meet the defined goals.
The design process for creating a website or e-shop.

Understanding the client

To understand exactly what the client needs and how you can help, you must get to know them thoroughly and understand the problem they are solving. A useful approach is a shared workshop or filling in a brief with key questions, which you then review together, gather further information, and clarify details.

The goal is to learn as much as possible about:

  • what industry the client operates in, how their business works and what its specifics are,
  • what they need and why they are coming to you, what their intentions and expectations are,
  • what the project goals are and what your work should achieve,
  • but also the personal goals of the client or the person responsible for the project on their side, so you understand the context and can help them fulfil those goals.

All of this allows you to tailor the overall strategy — from the choice of research methods to the project timeline and website design.

"When you know the client is planning to expand their business, launch a new product or innovate a service, you incorporate this into the overall digital strategy, which influences all processes and the website design. This ensures the long-term sustainability of the solution."

Download a sample brief to help you when getting to know a new client

You can freely adapt and customise the questions. If you need any help, write to us at info@proofreason.com.

Download sample brief (PDF)

Research and understanding customer behaviour

Next, you need to get to know the client's customers. Primary research is key — though time⁠-⁠consuming and expensive — because it gives you direct access to website visitors. You find out their problems and motivations related to using the site, and get a sense of the context in which they encounter it. Qualitative research methods serve this purpose best.

Based on qualitative research, you build hypotheses that you then test and quantitatively verify (most often through surveys). This gives you more precise and statistically meaningful data.

A common challenge in research is recruiting respondents to get a representative sample. If you do not have direct access to website users, you can use panels and databases. Another option is talking to people who are closest to the users and understand their needs — such as customer support staff or salespeople.

Supplement your findings with additional data. Examine the existing website, conduct usability testing, go through analytics data and look at the performance of the current website. Valuable insights can also come from brand monitoring data, understanding how the client does marketing, or how they drive users to the website.

Process all findings and organise them. This might look like:

  • web analytics show that users are not completing orders,
  • when analysing the website you discover that the checkout process does not match common standards and you assume buyers do not understand it,
  • you test the checkout flow with respondents who encounter the anticipated problem,
  • through follow⁠-⁠up questions you find out exactly what they do not understand — they do not know which button to click, or whether clicking it will finalise the order,
  • ideally you also use surveys to confirm that multiple people share this problem.

This process gives you a thorough understanding of the website's users and you know what is not working on the website and why. Only then can you look for solutions.

Designing the design process

Building a website can be compared to building a house. A customer comes to an architect with a brief: I want a house with two floors, a gabled roof and large windows. But that could describe a family home, a hotel, a barn or a kindergarten. The brief is too vague and can be interpreted in any number of ways. The architect's job is to turn the client's vision into a precise blueprint, according to which the builder creates what the client actually wants.

In website development, this is the design process. It sharpens the brief received from the client and sets clear boundaries for website modifications. Based on research, you can decide whether to build a completely new website or only modify part of the existing one. Accordingly, you choose the methods and tools for designing the website prototype. In short, you define the goal and how to reach it. Without prior research, establishing this direction would be very difficult.

You can also draw on external studies, such as usability testing results from the Baymard Institute or web usability research from NN Group. Always verify whether the recommendations they contain apply to your specific case.

What? Designs and prototype

The first step in a website redesign is usually designing the information architecture. This allows you to see the website as a whole before diving into further design work. For each page, the information architecture defines its goal, message and content. The design also allows you to make quick changes — you can easily add, remove and move sub⁠-⁠pages throughout the structure.

After the information architecture comes the prototype — a functional design of the website without graphics. It includes finished content with precise copy. This not only gives the graphic designer a clear picture, but — crucially — allows usability testing to verify whether the website achieves its goal.

"Always work with real copy, no lorem ipsum. It would be hard to find out whether the target audience understands the add-to-cart button when the button contains placeholder text."
A website prototype with precise copy, on which you test the usability of the site.

After the prototype, the graphic designer takes over and gives the design its visual form according to the client's brand guidelines. We recommend not designing the entire website at once, but rather key page types along with elements that can then be reused anywhere on the site. Choose the most important and complex pages, on which you design a large number of elements in various combinations.

The graphic design gives pages their specific visual appearance.

Testing and evaluation

Test, refine and retest all designs and prototypes continuously from the very beginning. This minimises the risk of the project failing.

"It will not happen that you design the entire website and then discover the design does not work and needs to be completely redone. This saves time and money, and the result is a properly functioning website design."

First, test the navigation through the information architecture. For the prototype, verify the usability of the website — its functionality, clarity, and whether customers understand it and can complete the tasks they would typically encounter on the website.

When conducting usability testing, assign respondents tasks that reflect what you expect from real users. For example, ask them to filter products, find an item with specific parameters, add it to the cart and complete an order.

Also test designs from the perspective of emotions. This helps you verify whether the website creates the impression the brand intends and what emotions it wants to evoke. Based on the results, you can adjust, for example, the colour scheme or font, to ensure the design carries the right emotional associations for your brand.

Read about how to conduct website usability testing.

The full redesign process might look like this:

  • the client comes with an aim to increase sales in a selected product category on the e⁠-⁠shop,
  • because they need to improve website performance quickly due to other linked activities, you choose a faster route and rely primarily on secondary data,
  • you analyse findings from research agency studies and, combined with an expert analysis, identify the weakest parts of the website (e.g. product categories or product detail),
  • based on data from the client's internal system, web analytics and other sources, you define a goal whose attainment you will evaluate afterwards,
  • you design changes to specific pages based on secondary data and website usage data (using tools such as Google Analytics, Hotjar, Smartlook and others),
  • test each change continuously and quickly using unmoderated and moderated usability tests with representatives of the target groups,
  • hand the tested design over to developers for implementation (including documentation),
  • if the situation allows, you can also use A/B experiments on real website traffic for quick testing,
  • after an appropriate period, evaluate the impact of the changes.

Launching a new website is the start of a long⁠-⁠term partnership

The result of such an approach will be a tested website that is highly likely to perform as expected.

A quality design is only half the battle. The other — equally important — half is correct implementation. If the client has their own developers, hand over the design with detailed documentation and do everything possible to ensure it is deployed smoothly.

Your work usually does not end when the website is developed and handed over. You will most likely continue updating and optimising the website, retesting and researching the solution.

Is redesign on your agenda and you need to know more?

Get in touch. We will advise you or point you towards the best path forward.
or reach out via LinkedIn
Contact - Robin Janásek

Robin Janásek

Chief Innovation Officer