The Complete Guide on Website Redesign and Why Is It Exactly Like Going into Space

The website redesign is a complete rework of the existing website: its content, structure, and especially, the visuals. The website redesign is the company’s space program. Launching a new website is like sending out another shuttle: it’s complicated, it’s time-consuming, if something goes wrong there are explosions bound to happen, and it needs to be done once every few years. One small step for the marketing executive, a giant leap for the company.

Take your protein pills and put your helmet on, this is a long article.

In Space No One Can Hear Your Pitch: Why Is Redesigning a Website Important

At Embacy we are focused on making the websites for digital products, and we have done over 50 of those in the past two years. Everything in this text is based on our experience and is applicable, first of all, to the websites of digital products.

Your website is your prestige. The customer doesn’t care how well your company doing, the customer wants what you offer presented on a pleasant and easy to use website. And a good website makes you stand out among the competitors. You don’t want just a dinky Sputnik out in orbit while your competitors are terraforming Mars.

Ground Control to Major Tom: How Do You Know if Your Website Needs a Redesign

Conversions/sales are decreasing. Plenty of reasons for this to happen, plenty of those are design-related. Maybe it’s just that the design is outdated and customers don’t trust it. Maybe the design is too damn good visually, follows every single trend to a T, and does it in style, but then ends up loading too slow and our impatient customer keeps walking. Maybe the offer just isn’t good on the current market, and you’re considering a redesign as hail mary for your woes.

The design looks outdated. This is the main reason to think about a redesign. In some industries, the gap between current trends and the look of their site is considered to be a good thing, plenty of B2B companies suffer from this misconception. It’s just silly. When you’re out on a space station and you won’t see Earth up-close for another year, and at the canteen, they got the same brand of cheap instant coffee you used to have during lean times, and it’s couple months expired, well, you don’t think «ah, it’s just like home». You think «I want some damn fresh coffee».

Complaints about user experience or design-related issues. Few things are as off-putting on a website as an uncomfortable and cumbersome UX, be it poor navigation, unclear calls-to-action, layout problems. While you should be able to pilot a spaceship, your customer shouldn’t have to worry about that.

The website is not mobile-friendly. Now, more than 60% of overall views come on the mobile versions of sites. It’s no longer reasonable to focus on the desktop version and then just whip up some mobile thing at the last minute. On some of the products that we worked with, the number was over 70%. Several times we had even done the mobile version first, and then the desktop. It doesn’t allow for flexibility and you got fewer options working with mobile, but no one said it’s easy to go to infinity and beyond.

The business has changed: products, services, branding. Your website is the direct extension of your marketing campaign. It’s not some separate thing: it has to directly correlate to the product you offer. If your product line expanded, you need to tell about your new products separately. If you extended, or the opposite, focused down your target audience, you need to make adjustments on the website. Or if you had changed your corporate style and now your website is lagging behind while looking like a website of some other company.

Your messaging is off. Same as the above, and it could be repeated a few more times (and we will repeat it a few more times). Your messaging has to be on point. Not only in general design, but in content. Unlike many agencies, we work not just with the design and the development, but with the content as well, because they must work together to produce a coherent message.

You aren’t proud of it. It’s not business, it’s personal. Have you ever had a situation when you’re networking, and people ask where you work, and you show them your website, and they politely shrug and say «okay»? Imagine, if you had shown them the best damn website in the world. It would produce the exact same effect as telling them you’d been to space.

Planet Earth Is Blue: How Do You Know if Your Website Doesn’t Need a Redesign

You need a redesign if you had nodded more than once while reading the text above. If it’s just one thing, maybe you only just need an update. If you got a new product you might just need one extra page. If your target audience had changed, you just need a new landing. If the content is what’s off, you could do a refresh in-house: if it’s the text, the content manager could do a rewrite, if it’s the visuals, the designers could freshen it up, if it’s the illustration, you could get a freelancer for that. If the website generally fulfills its goals, and there’s no good reason to change the whole image of the company, identify the problem and fix it, without getting into the whole redesign mess.

How Often Should You Redesign a Website

This is heavily dependent on the industry, and the state of your competitors’ websites, but generally speaking, the design trends cycle every two-three years. A website from 2017, if done well, can still look good in 2020. But its days are numbered.

Apollo 13: The Risky Website Redesign Approach

Often companies approach website redesign without careful planning. It’s just a website, right? Websites are dime a dozen. Wherever you look, there’s a website, so how hard can it be. We put a man on the moon, surely it’s no big deal to make some website.

So they might hand the task to their in-house team, the team that’s, for example, builds user interfaces. The team that isn’t specialized in making websites. They might make a great dashboard, they might make a perfectly good website. But they won’t know much about the visuals, about the storytelling, compared to an agency, that knocks a landing page after a landing page out of the park. And the second reason for the results to be lacking, after that their expertise is in other areas, is their tunnel vision. It’s much easier for the outsider to see your product for what is it, the good and the bad, and after some research, to present it properly. Our clients being usually digital companies, often think that giving their in-house design team the task of redesigning is an obvious and straightforward decision. And after wasting time and money they come to us.

The other route is that the daunting task of the redesign is dumped on a single freelancer. There’s a slight possibility that it might work out in the end. But what is more likely to happen, is that the freelancer will take up a bunch of orders, disappear for a month, and then present you with something rather questionable, and tell you to pay up. They put their time in. Plenty of freelancers got as much sense as astronauts do, the people who volunteer to be sent in skyscraper-sized explosives out of this world. Plenty of our clients approached us only after getting burnt with the freelancers.

Analytics Phase: How to Plan Your Redesign

The scope of the project. The most important thing to understand from the get-go.

• Is there an established corporate style already?
• Is the website going to have five or six unique pages or a lot more?
• Is there usable content already?
• Is there a need for photos, and if so, is photoshoot required?
• How important is SEO? Can you change the whole logic and the text of the website, or is there something important for the indexation?
• Are there any time and budgetary limits? If there are, what could be optimized? What could be cut entirely to produce the first version of the redesign as cheap and as soon as possible?
• Think hard about these questions.

Think hard about these questions.

Define the website’s target audience. But don’t forget, that your audience isn’t just your customers and potential customers. Your audience is also your potential future employees, who want to know that your company is suitable for them. Your audience is also the potential partners. Your audience is even the media, who keep track of your progress. Your audience is even the moms of your employees. It doesn’t take an astrophysicist to understand what NASA’s website is all about.

Define your branding and messaging. Again, your website is the direct extension of your marketing strategy. You need to be crystal clear on your product and what you want to achieve with the website. First-time visitors must be able to immediately recognize what is it that you’re selling and how is it beneficial to them.

The style. As an extension of your marketing strategy, your website needs to follow your corporate style, adapted for the web. If there is no corporate style to speak of, or if it’s in a sorry state and needs a redesign too: that needs to be dealt with before any websites.

How many pages will the new site have. Now, if there’s five or so unique pages on the website, dealing with the structure is rather straightforward. But if you got ten? fifty? Consider which are the most important and how to group everything together in the most efficient way.

Research other websites. Yes, first and foremost, look at your direct competitors. But don’t stop there, that’s only the starting point. Take a look at the best practices, at the top websites in the world, and take a look at the websites you visit daily but haven’t thought too much about.

Identify your priorities. Your website has two main goals. The first is the conversion rate. The second, it has to leave a good impression, has to look good. Both of those have to be met. They’re not mutually exclusive, more than that, they’re mutually beneficial. Figure out what other specific goals you have beyond those main two.

Analyze the current website. Find out what is currently working, there’s no need to try to invent an external combustion engine. Benchmark your current monthly performance metrics. Consider what are the most valuable pages on your website right now and put extra emphasis on those during the redesign. Conversions, conversion rate, blog subscriptions if you have a blog, time spent on the website, bounce rate, average time on page, etc. We consider the time spent on the main page a key metric, right after conversions, and always aim at 80% scroll of the main page. The website is your company’s face, and the main page is the website of your website. It has to grab attention and not let go.

SEO. After the analytics you already have your current SEO audit, you know your metrics, your top pages, the necessary keywords. However, if your product is new (it’s been on the market for a year if not less than that), you probably don’t need to worry about SEO all that much. Do you generate a lot of leads through Google, and do you need to? And be careful with all that keywords business. If we had thought too much about SEO here on our own website, this article would contain a passage like this:

website redesign how to redesign your website site redesign web redesign website redesign process guide how to redesign

Ain’t pretty.

The timeline. Start building the website redesign plan. Consider the structure of the website, the content, the visuals. Many design agencies expect their customers to provide the content, but we find this approach unproductive. On each project, we had to delve into the product, into the industry, into a particular niche. From the outside, we can see more clearly your positive sides and can highlight them accordingly in the website’s content. And the content and the design must work together in unison for a good website.

Designate a captain. The website redesign is an involved process with a lot of moving parts, and there’s the pitfall of falling into endless discussions about what, in hindsight, are meaningless details. Designate a single person on your team responsible for the final result. The way we work is that we have our project manager responsible for the project on our side, and we ask our clients to pick a person on their team, the one person that we work with, instead of having to have a massive conference call about every single little change.

Content Stage and Why We Use Figma

It’s somewhat of a misnomer to separate content and design into two different stages, and we’re doing it here only for the clarity and the ease of use of the article. Repeating here, but: content and design are inseparable and must work together. First, we start with the structure.

The structure. With all the analytics done, you should know how many pages do you need and on which to put the emphasis. If you have five pages, it’s rather straightforward. If you have dozens of them, you should know how to structure them based on what information is needed for whoever is visiting the website. What we do is, after we had already figure out the concept and the style, is put together a logical prototype of the website using Figma.

Example of a logical prototype

We use Figma for plenty of reasons, some of which are:

• Transparency. At any moment our client can check-in and see the work-in-progress, and see exactly what we work in. Usually, people trust enough to not monitor the process the entire time and drop in maybe twice a day, in the morning and the evening.

• Clarity. We separate the work done by days and by sprints so you can easily see the progress done.

• Ease of use. The UX is rather intuitive, and you don’t even need to download an app to start using Figma.

The content. Once we’re done with the structure, we fill it up with the rough draft of the copywrite. Quickly you get to see the website coming into its shape, and then we get to work on design not in abstract, but on a solid foundation.

Early copywrite for the Bankex website that we did

Design Stage

Concepts. A website without a concept behind it can be good, great even. Design on point, clear and understandable texts, it could fulfill all your necessary goals. But it won’t be memorable. Our goal, as a design agency, is to do things that aren’t just good, that’s not enough for us. We want to create designs that aren’t forgettable. What we do is come up with three concepts and present them to the client to choose one. You can read more in detail on how we pick a concept in our case story on how we did the redesign for Vauban.

Styles. Every concept could be visually presented in nearly endless ways. After the concept is chosen, we come up with three different style directions, all representing the idea wildly differently. And then we get to work on the homepage. For how we come up with style directions and how different they can get, the most demonstrative example is our work for Think32, about which you can read here.

Homepage first. The homepage is the most important page on your website, and while working, it serves as a proof-of-concept. Once every detail is fine-tuned on the homepage, then the style could be easily expanded over every other page.

Design mockups. This is where Figma comes into place again. With the way our work structured, we don’t need to dedicate extra time to put together a mockup. Once we’re done with the homepage you could just open the project and Figma and already see exactly how the website will look when it’s done.

Fonts. Every designer will tell you how fonts are so important. They’ll talk and talk about typefaces, about the sizes, the weights, the style. They’ll talk so much about fonts you’ll wonder why they aren’t working in publishing. And they’re not wrong. The font choice heavily depends on three things: the concept of the website, its style, and your industry. Fonts set the mood and need to be easily readable, or not at all if you’re aiming for your site to be loud. We usually use geometrical grotesques for the IT products, as there are already standards in place. We want your site to be memorable, but not stick out like a sore thumb.

Colors. Same as fonts, as the colors are there to set the mood and are based on the concept of the website, the style, and your industry. We take the colors from your corporate style and extend them to the web, maybe tweaking and extending the palette, if the style calls for that.

Imagery. The illustration and the photos need to support the style and the content. All the illustrations need to be connected — meaningfully, with the same motifs going through them — and visually, keeping a consistent style, with such details as to how thick the lines are. Same with the photos. Usually, we’re done with the project by the time the client does a photoshoot for their website, but we right down exactly what would support the style. The photos need to have consistent colors, same visual motifs — not exactly the same pictures throughout, but keeping the same general idea.

Page templates. Once we’re done with the unique pages, we get to work on the templates for repeatable pages. It’s not particularly complicated once we had already figured out the style. Sometimes, if the client plans to later scale the website further, we’re asked to do the guide on the website style. And with the CMS that we set up using WebFlow, they often don’t even need to think about more templates.

Development Stage and Why We Use WebFlow

We don’t have any dedicated developers or frontenders. Designers themselves develop the websites in WebFlow, and this is why.

Clarity of vision. Without the divide between two separate people, the designer and the developer, the final result is exactly what the designer had envisioned.

Price. It’s simply cheaper than having dedicated developers.

Flexibility. Compared to most other website constructors, WebFlow doesn’t limit you to some templates.

CMS. With the few templates done, we can show the marketing executive how to launch new pages on the website, saving plenty of time for everyone.

Mobile version. In our experience, we found WebFlow to be a lot more effective and convenient for building the mobile pages, compared to any other constructor.

The only real negative, in our experience, is the entry barrier compared to other constructors. That’s the cost of flexibility, and it’s still a lot easier to learn than custom development.

Commencing Countdown, Engines On: Website Redesign Launch Checklist

We’re almost there. Now just don’t step out on the Moon without your oxygen tank. It’s the little things:

• Open graph image. You don’t want there to be some pixelated mess above the links on social media to your fancy new website.

• Hosting credentials. With a redesign and not a fully brand new website, everything should already be in place. Check anyway.

• Backup the existing website. Astronauts are given cyanide capsules not for the things that we know that can go wrong, but for the things that we don’t. Better keep the backup around, just in case. And don’t forget to de-index it, so the backup doesn’t show up on Google.

And I Think It’s Gonna Be a Long Long Time: How Long Does It Take to Redesign a Website

Early on in this text, we outlined the risky approach to redesigning your website. And with it, you can get bogged down in the process for six months, or even a full year, if not more than that. If you plan the redesign carefully and take it seriously, it should take about five to eight weeks. And if you planned everything out, you got a great corporate style that doesn’t require a rework, you got the content ready to go, the website requires only five or so unique pages, that is to say, if all the conditions are perfect, then it could be as short as two weeks. That is if you work with us.

2021 Web Design Trends

3D is all the rage now. It’s the consequence of many designers picking up different skills — there are fewer and fewer designers that are just specialized in one single thing. Now there are fewer limitations, there are more animations, there are more 3D elements, there’s more variety. Plenty of these designers want to show off their newfound skills, and then they do, and the result is fresh and varied websites. With a lot of 3D on them.

A good example of use of 3D in webdesign is pitch.com

Mascots. Inspired, in part, by all the crazy Japanese mascots, where now on the streets of Tokyo there’s a big plush cat named Koronon, the anti-coronavirus cat, is handing out masks. Websites want their bright and funny characters too. Have you noticed the cute unicorn on our website?

Simplicity in text. This trend has been around for a few years now. Texts on all the websites are straight to the point, no fat on them, the communication between International Space Station and Houston is limited. The only problem with that approach is plenty of them lose humanity in the process. The text comes off as almost hostile. We try to keep the text only to the necessary points, but do so with a friendly face.

Simplicity in design. Design to suit the content. With the simple text, we got plenty of websites with pleasant background, easily readable fonts, elegant and simplistic illustrations, with few details on the characters. Less is more.

A great example for this trend is stripe.com

Complexity. Every force has an equal counterforce. With all the nice and easy websites, and the widespread usage of constructors for website development, plenty opt to stand out. Even with regular logical structure and everything easily readable, there are complex visual solutions in place, custom layouts, everything *different*. Everyone wants to be unique.

letter.co Be sure to see it in motion, a screencap doesn’t do it justice