9 Tactics to design effectively a website that will last years
How to have a lasting design website that communicates the essence of a brand. Temporary throw-away trends are not included.
Five years ago, I was working in an ad agency as a web designer. At least in my country ( Portugal), you will not be continually improving a website in an ad agency. You will be selling websites, finishing the project when you handover the access codes to your client. Agency’ clients will love to have a classic website with a lasting design, not temporary throw-away trends, to save money.
I had one client in particular — a relevant public transportation company from the north of the country — that reached my ad agency with an enormous challenge: design a brand new website after ten years. Yes, ten years. You read it right. I knew this new website needed to be visually strong enough to last ten more years. At the same time, I needed to keep in mind this website has more than 1 million annual visitors, and the space for UX mistakes was too little.
I will share some techniques to design a long-lasting website, based on my personal experience in ad agencies for ten years. This article is assuming the UX best practices will be applied for every single step of this guide.
1. Learn with your competitors and references
It is essential to measure and compare key metrics and digital practices to understand where the website needs more attention and effort for performance growth. Either you will analyse competitors or references, you will find exciting insights to draw a strategic plan for your new website. Identify references outside the business area to get ideas beyond the sector.
A proper benchmark usually involves a quantitative comparison, but I would say that is more relevant financial wise. Make sure you ask for a few key indicators in your briefing to have a global view of the market, but you don’t spend time searching for this data.
Instead of that, I would suggest focusing your effort into a more flexible analysis only with qualitative data. Compare the digital presence of the competitors or relevant references and understand what they are offering. What do they do great and not so great? Do they give a high user experience? Better than that, share your thoughts with other people and learn their perception about that. The less they know about UX, the more they will help give you useful insights for your collection.
Be inspired by what is notable on other websites. Also, investigate their social media and other digital presences. You never know when you will get true inspiration or the lightbulb turning on next to your head. But always have in mind the cultural context while benchmark your competitors or business references. You can’t expect similar outcomes if you use strategies that are working in a substantially different context.
2. Deep look at the current website
If your challenge is a redesign it is determinative to check the current website. There is a lot you can learn with especially the mandatory improvements. You don’t want to relaunch a website and keep the same pain points for your user.
Keep the analysis simple and effective. A good starting point is to spend some time browsing through the website while checking the usability heuristics on the UI. That will help you structure your analysis and spot simple improvements that will make the difference for itself.
After you check the form, it is time to look at the content. What content do we want to keep and what we want to discard? Don’t make that decision by tour own and find out the users patterns across the website: the most popular content, most visited pages or pages where the users stay the longest time, for instance.
You will also get relevant insights by inspecting the conversion rate. And with the conversion I mean, the performance for the most relevant features. You can make some lead questions to help you get some answers into this topic. List the current features on the website and the user flow for each of them. Understand if they are also available in search engines or competitors websites. Find out how to improve the current features flow based on those findings.
Then, do the opposite exercise: what features connected with my brand can be performed on other websites but are not available in the current website? You will find which relevant features you don’t have yet on the website. For instance, when I was looking for a new feature idea to incorporate in the public transportation’s website, I found out there has no way to plan the journey in real-time. But the user could do that on Google Maps. And the references for this project allowed the user to do the same. So I analysed several examples and built our journey plan, and it was the most popular feature on the website relaunch five years ago.
3. Know your users
Although your client could provide a good briefing about what they aim for their new website, do always some research to better understand the user. Most of the times (I would say, always) neither you nor your client belongs to the target group so all the initial briefing could have is the client vision and some general assumptions. Learn with the users their needs and understand their pain points.
First of all, identify the best research methods having in mind the final goals, the timeline, the constraints and the resources available for a particular project. Christian Rohrer has an article in Nilsen Norman Group website with an overview of the most popular research methods. Each method is mapped across three dimensions that will help you identify the best options for your project.
Each research method has benefits and drawbacks with different outcomes. Sometimes, you need to think out of the box and find alternative ways to research. Go to the streets, and talk with people or post a survey on social media.
If it is a redesign, you can also collect a lot of information and learn by interpreting the current patterns. By checking the popular entry points, the most visited pages, where the visitors drop the user-flow you can spot the screens that deserve attention and effort.
Understand users patterns offline if needed — in this case, we found the most common metro stops to use them as suggestions on the travel planner. Collecting information from less conventional sources can also help to know the users. By interpreting the content that users leave on social networks, we can get clues about what features need to be improved or included in the website. The same is true with the analysis of the complaints next to customer support. Don’t consider users feedback as they give it to you. Understand them beyond the complaint to find a true meaning that you can work with.
4. The information architecture beyond the site map
Websites can be full of corporate information that is required by law. However, it is still not useful for most website’ users. Build a systematic chart of the content will help to group and/or highlight it. But for a positive experience, you need to understand the significance of the content according to the user’s needs.
Along with the content, also the features must reflect the user’s needs. Include into this mapping some rough wireframes of the most critical screens will help build the structure we aim for our users. This exercise leads to strategic thinking about turning the most elevate content into functional and interactive areas.
And finally, I defend that visual design plays a part in this phase. Some people would assume information architecture as part of the UX disciplines and visual design as part of the UI disciplines.
I believe the user must be guided by a visual hierarchy that reflects his needs and highlights his main points of interest. The visual design has a crucial role in translating the architecture of the information.
A clear visual hierarchy guides the eye to the most important elements on the page. It can be created through variations in colour and contrast, scale, and grouping.
― Kelley Gordon in her article about Visual Hierarchy in UX
It is powerful enough to ruin the whole work done before and misled the user to wrong interpretations. The aesthetic attributed to each component can shuffle all the pre-defined architecture in concept if it is misused.
5. Make it mobile-first
Nowadays, the number of smartphone users worldwide today surpasses three billion and is forecast to further increase in the following years. At the same time, internet users are currently growing at an annual rate of more than seven per cent. Therefore, the amount of internet users on their phone is also increasing.
In the last five years, the mobile users are increasing steadily, and they are now more than 50% of the market share worldwide users while the desktop is decreasing a more or less consistent line losing already 20% of their quota. Most internet users use mobile devices to go online, at least some of the time.
Statistics are, for sure, sustaining why you should think mobile first when designing. You can check this and more stats on Statista, Statcounter and DataReportal.
But, how translate this useful data into actual design? Mobile-first brings simplicity and focuses on the interface. Start your design process from the smallest screens. Challenge yourself to set up your information architecture into small screens, and translate after the same information hierarchy into the largest screens. Here will help you to make sure the user experience will be seamless and alike on any device.
At the same time, you will be focusing the hierarchy on the content first and organize the most relevant information on the top to make it visible as soon as possible. And being aware of the small screen sizes, you will make sure to incorporate strategies to ensure the accessibility and readability of all content.
6. Branding recognition
The consumer needs to identify a particular brand at the first sign when they land into the website. But, assure brand recognition is more than place the logo on the top of the website.
Branding means creating an emotional association (such as the feeling of success, happiness, or relief) that customers forms with the product, service, or company.
― Jared M. Spool in his article about Branding and Usability
The digital experience is, for most of the cases, just part of the customer experience. We, designers, need to be aware of it and make sure the whole experience will be positive and consistent. Make sure you incorporate the most recognizable brand elements into the user interface in a creative way. We don’t want to use design ingredients just because it has to. Those components need to make part of the experience, not only give visual support for empty spaces.
Of course, you need to start by incorporating the most visible elements like a high-quality logo, the right typography (even if you need to adapt it to the digital world), the brand colours and the tone of voice. But, go beyond by consolidating the brand personality into the digital world. Promote the emotional bond with the user and make them feel welcome and comfortable.
When I designed a new website for a public transportation company, I incorporated the stations’ signage on the user interface. I ended up creating a parallelism between the offline and digital experience of the user. That approach led the users to onboard smoothly into the new website and quickly identified the visual hierarchy of the content.
7. Use the full potential of the whitespace
First of all, do not confuse white space with empty space. White space was not made to be filled by content later, it is a deliberate design choice and will help you to have a balanced, harmonious and structured user interface. We are talking about the spaces between components, margins and line-height. Ultimately, white space can not even be white but any other background colour. On dark mode for native apps, I believe it will be a darker colour instead.
White space is a powerful tool to increase readability. Read in the screen it is not always an easy task for the users. Everything that could help them to focus on the reading and reduce their effort will be appreciated. Play with different line-heights to gain some room for the text to breathe between the lines. Use the white space as a divider to differentiate between topics. Define margins between text and other graphic elements to bring focus to the reading.
Even the conversion rate can benefit from the correct way to use negative space in the user interface. The principal is the same: bring the user’s focus for a specific task. But this time for the critical CTAs; instead of making it bigger (I bet you ear this a lot) you can play with white space around it to make the CTA pop-up to the user’s eye.
8. Don’t forget the error pages and empty states
Here is an excellent opportunity to be original and appealing. When something goes wrong, you want to have an engaging and friendly way to communicate with the user. Be informative but save on the technical conversation for the user to understand the problem.
Established wisdom holds that good error messages are polite, precise, and constructive. The Web brings a few new guidelines: Make error messages clearly visible, reduce the work required to fix the problem, and educate users along the way.
― Jakob Nielsen in his article about Error Message Guidelines
What a 404 error tells to the user? Nothing. But you can explain to the users why they get this error and allow them to navigate through the website by keeping the main menu available.
You can use this opportunity to offer to the user a smooth way out or unblock this situation. Figure out what could be the user next best action for each type of error or empty state. Don’t be generic! Each case could have its way out.
Some empty states will help the user onboard on the website and build trust. Others will be responsible for educating the users about their behaviours. If a user lands in an empty basket, why not invite them to explore the products and add them to the basket?
In the end, regardless of the goal of each empty or error page, they all are great tools to increase brand awareness, and they all should be useful.
9. Test your concepts
At agencies, it is often hard to get a budget for testing, but you can find smart and low-cost ways to test your concepts to validate them earlier in the process. By getting most of the digital world, you can explore inexpensive research methods that will help you to validate or discard early ideas and get useful insights to improve the user experience. You don’t need to have a complex research plan and waste a lot of money to validate your concepts beforehand.
Elaborate usability tests are a waste of resources. The best results come from testing no more than 5 users and running as many small tests as you can afford.
― Jakob Nielsen in his article about Why You Only Need to Test with 5 Users
Share your work in progress with the world. I don’t mean publishing it before is ready in your portfolio, but collect feedback anyway. Build a small prototype with your wireframes. And don’t be worry if people giving their opinion are not designers because most like they will be closer to your users instead.
When I was in college, I had to design a multimedia platform for kids. They should learn more about a museum and plan their visit interactively according to their interests. Although it was schoolwork, it was expecting to validate concepts next to our users. Guess what? I had a neighbour that was a teacher for elementary schools. I asked her if we could talk with her students for half an hour, show them some designs and collect some feedback. I printed some screens to show to half-dozen of kids, made some questions and got my answers.
When faced with small doubts that can impact the user experience, A/B testing can provide you with some answer to support your choices. Will it be more efficient to have a padded or lined button? Should the image have people or not? Which colour works better for text links and accents? You don’t need to wait to have both versions live on the website to have A/B testing. You can make an informal version of it with prototypes and tasks scripts to support the user testing.
Either way, online or offline, use your network! If you think for a while, you will find a low-cost way to explore some ideas and validate your concepts before moving forward.
Conclusion
Although is it great to have the opportunity to iterate, test and improve my work since I became a product designer, I sometimes miss my time in the ad agencies.
By the way, the website I did for the public transportation company is still online! Of course, I would like to improve some features and innovate some visual approaches. But, let’s bet how many more years it will be there?
Did you have already this type of challenges in your career? What other techniques did you use in your process? I can’t wait for your comments.
Do you like this article? Follow me and stay tuned to my next publications. Do not forget to show some love by 👏 this article and sharing it.
