Redesigning your website: a step-by-step guide

Loris Rigoni
Telepass Digital
Published in
7 min readJul 27, 2023

Giving a new makeover to a company’s website can be a challenge: you need to consider data, the user experience, the teams involved, the latest trends in design, and maybe even an onerous development… in short, it can be overwhelming.

However, it can greatly benefit your brand identity and positioning. And yes, it can even boost sales and conversions. Keep reading because this step-by-step article will help you discover the steps to upgrade your website and give your customers a better user experience. Let’s get started!

Why redesigning your website is the best thing you can do for your business

Whatever market or niche your company operates in probably runs very fast; keeping up with all the new trends might be challenging. However, looking after your company website and redesigning it every two years is crucial to stay on top of the latest trends, new market needs, and your business’s growth.

Redesigning your website allows you to reconsider the experience you offer to your audience, leveraging your long-term business efforts. According to recent statistics, most users form an impression of your business (and its reliability) within 0.5 seconds of visiting your website. They will stop engaging with the website if the content or layout is unattractive.

In general, keeping a website up-to-date with the latest trends can help:

  • Grow a more consistent brand identity
  • Improve overall performance and security
  • Enhance the user experience and search engine optimization (SEO)
  • Boost leads and sales
  • Better align with your business goals

Before moving to the next step, knowing the subtle difference between revamping and redesigning is critical. Simply put: the difference is within the project’s scope.

  • A revamp consists of improving an existing website by changing how it looks and works, replacing only a few elements.
  • A redesign involves completely reworking a website’s layout, navigation, and functionality.

Look back, before moving forward

While redesigning a new website could be very exciting, it is also crucial not to forget the existing assets and take the current version into consideration.

In fact, taking into account the current version allows you to evaluate the strengths and weaknesses of the existing design. By analyzing user behavior, feedback, and performance metrics, you can identify areas that need improvement and build upon what is already working effectively.

On the other hand, maintaining consistency in the design system is vital for brand recognition and user familiarity. By retaining key elements of the current color palette and typography set, you can maintain brand recognition and ensure a smooth transition for returning users.

However, it is also important to reassess and update colors and typography if necessary. Design trends and user preferences may have evolved since the previous version of the website, and incorporating modern and relevant design choices can enhance the user experience and keep the website visually appealing.

In summary, considering the current version, colors, and typography when redesigning a website allows you to build upon existing strengths, maintain brand recognition, and create a cohesive user experience.

Collect the data, and you’re halfway there

There’s no such thing as too much data — okay, maybe this is not entirely true — but the reality is that data is the groundwork of any website redesign.

Understanding how your customers feel about your website and their needs is the first step before considering a redesign. Data can help you better understand how your website should look, which features it requires, and what can be improved.

Heatmap, a nice way to collect analytics from users

This kind of information is already on your website. It can be collected thanks to other roles inside the team, such as UX researchers or data analysts, and using tools like Hotjar, Google Analytics, and Google Data Studio. These tools help you analyze information on traffic, such as the bounce rate, conversion rate, and general performance of the website.

But which data is worth considering? Online customer behavior is a goldmine for those who wish to redesign a website to captivate their audience. Demographics, for example, can help you know your audience better and design a more targeted and efficient message, which can ultimately bring more sales and conversions.

Involving the team: different perspectives and goals

One of the most important (and challenging) things when your website undergoes a redesign is when you get to the point you need to involve different teams, from marketing specialists to designers and project managers.

Everyone in any team will have an opinion, and all these points of view and different priorities can be confusing and overwhelming: but they are a great starting point in terms of expertise, perspectives, and out-of-the-box thinking.

Good or not so good ideas pinned on the wall

Every team will bring a different priority to the table: from the content team that needs more space for a text, to the design one that needs a process to be easier for the customers, to the people in charge of tests that can ask for a complete redesign of a specific section. When confronting all these perspectives, the most important thing to keep in mind is that the focus is the final user: they must find your website easy to use, enjoyable and clear.

Keeping up with the latest trends: tech and innovation

As with many things in life, websites also tend to follow trends. There was the minimal one, the cartoon-style one… we could go on forever.

And if it seems that all your competitors or other players in your field are following a specific design trend, resist the urge to jump on the wagon for the sake of being part of it. Of course, it is crucial to keep the website up-to-date with the latest tech innovations or UX ideas, but never forget that your brand identity comes first before every trend in vogue on the market. Just because every other site on the internet is following a trend, it doesn’t mean it makes sense for you.

Try to understand why trends are so popular, why patterns for some functionalities are working well, or the reason why they simplify the user experience. If necessary, be critical of everything that is not good for your product.

Always be aware of what users want. Keep researching and studying surveys about the preferred touchpoints and interfaces, and discover how to overcome friction through your customer funnel.

Almost there: prototyping, visualizing and evaluating

By presenting interactive prototypes to target users, designers can gather valuable insights and feedback on the usability of the product. User testing with prototypes helps identify pain points, validate design decisions, and make informed adjustments to enhance the user experience.

Turning the design into a real website for user testing

Last but not least, it is important to keep in mind that in every step of the design project iteration is fundamental to resolving some issues or problems that are found by users or stakeholders. The iteration process in design refers to the cyclical and repetitive nature of refining and improving a design through multiple rounds of evaluation, feedback, and revision. Iteration allows designers to refine and enhance their work, ensuring that the final design meets user needs and goals.

Validation: is it where problems arise? Maybe not

With validation, we’re almost at the end of our redesign process, but this doesn’t mean we can let our focus down. In web design, the validation step refers to confirming the accuracy, consistency, and effectiveness of a website or web application.

It involves reviewing whether the design and functionality align with established standards, guidelines, and user expectations. Validation is important because it ensures that the website or application is error-free, accessible, and meets the needs of its target audience. It helps identify and rectify design flaws, usability issues, or technical errors, ultimately enhancing the user experience.

Validation also contributes to the credibility and professionalism of the website, building trust with users and promoting the overall success of the digital product.

Frontend, backend and website development

Collaboration between frontend and backend designers in web design processes is essential for the successful development of a website for several reasons:

  • It ensures that the design vision and functionality are aligned. It is important that the visual elements and user interface are feasible and compatible with the technical requirements.
  • The collaboration finalizes the user experience. It is crucial in implementing features such as form submissions, dynamic content loading, and real-time updates, which require synchronization between frontend and backend components.
Coding to create and integrate components in the Design System

By combining their expertise and working together, they can create a visually appealing, functional, and user-friendly website that meets both design and technical requirements.

Final thoughts

This is my personal experience as a designer in Telepass. However, every team and project can have their own methodologies and processes. There is no a recipe for success and every redesign is unique, but we have to keep in mind that the final goal of every website is to offer a smooth, complete and satisfying experience to users. Keep the user flow nice and easy and you’re halfway there.

If this article has been useful or interesting, or if you have any feedback or questions, I will be glad to listen to them!

This article was written by Loris Rigoni, product designer, and edited by Marta Milasi and Gaetano Matonti, respectively UX Content Lead and Managerial Software Engineer at Telepass. Interested in joining our team? Check out our open roles!

--

--