The WordPress Specialists

Reshaping Your Web Design During COVID-19


The 2020 COVID-19 pandemic changed both our personal and career life for good.

We’ve been compelled to fully transform our daily routines, our personal interactions, our working schedules, and meetings, even to put on hold services, sales campaigns, and monthly revenues. The vast transformation wave in the physical world would naturally get reflected into its digital parallel.

Medical specialists would advise us all to be patient and to ‘learn to live with the virus’, and so gradually, we reshape our working environment, we redefine our safety and hygiene practices.

As #business owners, we become more transparent and diligent in following through the special #guidelines imposed by the modern viral disease.

But how are we to communicate to our clients that we are at par with the latest health requirements and that they can feel safe relying on our products and services?

In times when worldwide lockdowns are common, the digital era has further flourished. Online shopping, as well as the first stage of the consumer journey, has been exclusively reserved for a concentrated digital experience.

Why Web Design Is So Vital for Brand Building During COVID-19

People holding COVID-19 sign

Business websites are the first place our clients get to go when searching for up-to-date information about our brand, services, or products in times of COVID-19 lockdowns, quarantines, and curfews.

They skim through our websites for new products, new promo campaigns, discounts, and delivery details, but above all, they are interested in learning how their company of choice addresses the latest need for COVID-19 anti-pandemic safety measures.

Every business owner should aim to stay in touch not only with the latest trends in their vertical but with the more global economic and digital climate. Whether we like it or not, today, we are facing strict social distancing or stay-at-home orders, so hiring a proper web design agency might be the smartest move to make. People are relying more and more on online communication, work, and research in its various forms (whether to have an educated choice when making a purchase or to simply educate themselves).

In these times, we should keep in mind that:

Our website is our brand ambassador, and our web design is its actual tool of communication.

How Web Design Edits Prove Beneficial During COVID-19

During the 2020 worldwide pandemic, web design has served various key roles that hold significant weight in marketing and sales strategizing:

  • Satisfying customers’ informational thirst – When good web design and content team up, you get fascinating results. A well-formulated message delivered the right way can open doors. In this case: ingenious web design strategies could bring about COVID-19-related information to site visitors’ attention right at the exact moment they need it and in the best format that would ensure ease of understanding and remembering it in the long run.
  • Establishing brand authority – Web design could help you tackle this difficult task as well, especially when it comes to popularizing the following four major COVID-19 top priority brand characteristics:
  1. Building trust – When people are afraid for their health and life even, one of the most important things to do as a business owner is to try to gain your target audience’s trust. Being straightforward with them, admitting both your strengths and weaknesses (as a business) would give you a head start. Company awards, praising customer reviews, association affiliations, etc., are all symbols of trust that a fine web design strategy should incorporate in its action plan.
  2. Embracing transparent client communication – The web design touches you incorporate in your online marketing strategy should always imply that the business is striving to be transparent and most open in its communication with its clients. Reveal who your team members are and what their expertise is, deliberately share your company client portfolio and results achieved throughout the years, proudly announce the newly created in-house procedures to prevent COVID-19 spread.
  3. Ensuring clients’ safety – Actually, adopting preventative safety measures during COVID-19 would rank you among the safe brands in your vertical. Safety and security are among the baseline needs according to Maslow’s hierarchy of human needs. In order to help your clients move up the ladder of their needs and pay attention to other interests and hobbies of theirs, you need to appease those fundamental needs for safety and security. Having taken care of those, your clients are now free to explore the less immediate but just as daunting needs they might have. Here’s where your products and services step in. If you own a food business such as a restaurant, your customers will want to know the changes you’ve made to your restaurant menu, for example, to ensure their safety.
  4. Client-oriented business – As a result, communicating all of the above-listed aspects of a business strategy via your web design will ensure that you really are operating a client-oriented business. Who doesn’t want to be put first, whether in their significant other’s or parents’ life or in his partner’s or service provider’s list of priorities? Your web design should unobtrusively reveal to your site visitors what kind of efforts you’ve put in to offer them comfort, satisfaction, and safety under the COVID-19 environment.

Web Design Makeover During COVID-19: Choose the Right Spot & Timing

Plain clock on white wall

Having already answered the ‘Why’ you’d like to implement web design changes to your site in times of COVID-19, it is time to actually deep dive into the topic and see ‘When’ it would be most appropriate to do so.

Let’s see what factors would affect the timing of when to show a web design accent associated with COVID-19:

  • First, we have to assess what is the extent of the urgency of the message we need to convey. Taking this into account, we’d be able to prioritize its proper timing as well.
  • The business industry would also affect the ‘When’ variable. Certain verticals are prone to a higher risk of their clients becoming infected, thus requiring a higher degree of brand authority ‘promotion’ in their web design.

Here are the most widely-selected options of when to show specific web design touches that have been created with COVID-19 issues in mind:

  • Before entering the site – reflects high urgency to educate or notify the site visitor of the fact that the company is highly responsible when it comes to taking serious health-protective measures against the disease/risky vertical;
  • At first glance at the site – reflects high urgency and/or risky vertical;
  • At a scroll on the home page – reflects certain urgency and/or risky vertical;
  • On every page of the website – reflects certain urgency and/or risky vertical;
  • When reaching site content that is tightly related to the virus spread or the preventive measures undertaken – reflects low urgency or risky vertical;
  • Throughout the website – reflects certain urgency and/or risky vertical;
  • Deep into the site content – reflects no urgency and could be applicable for any vertical;

Web Design Edits During COVID-19: Choose the Right Format & Layout

Website prototype on paper

So, we’ve covered the Why and the Where; let’s think of What would actually be the proper shape of those web design transformations to add to your business site during the COVID-19 pandemic.

  • A main menu tab dedicated to COVID-19 content – ‘Make it stick’ will be the proper slogan for this approach. If you wish the content to be available throughout the whole website, as well as easily recognizable by the site visitors, creating a main menu tab would be your perfect choice of web design strategy. This solution is less obtrusive, yet it is always at the client’s disposal. The approach is suitable for practically any type of business that involves any kind of physical interaction with their clients (e.g., beauty services).
  • Pop-Ups – These are a great way to make your message stand out and definitely attract site visitors’ attention. Depending on the urgency of your message, you could decide which page they would be associated with (home page, service page, or other internal pages like blog posts, etc.).
  • New page sections – This web design touch is a more subtle one and consists of just adding a single custom section to the already functioning layout. Depending on message urgency, the section could be linked from the home page, the service page, the FAQ page, etc.
  • Blog articles – Staying up to date with the current high-demand topics is a must for every business. COVID-19 is a topic that triggers almost everyone’s attention. It is only natural to create content for such a highly searched-for term. Thus many of the businesses that regularly feed their blogs with content would succumb, and for a good reason, to reflect the epidemic’s impact, stats, or other related news that directly affect their business and their target audience.
  • FAQ sections – Pop-ups or specially dedicated pages to the COVID-19 pandemic are often exploited in modern web design projects.
  • Video – Educational videos on what COVID-19 protective measures are taken by the given business or what the client’s journey would look like on the company’s premises during the epidemic times are very common elements added to the web design of many businesses with an online presence. In this article, we’ll bring to your attention two examples that are produced with great taste and notably some extra positive mood.
  • Sidebar banners – These usually would be housed in the blog post page sidebars; however, on occasions, such design additions could be seen on service pages as well.

Reshaping Your Web Design During COVID-19: The Examples

Below you can see a list of web design strategies used to inform the target audience and to further build upon the brand of the given businesses.

We’ve selected businesses in the cleaning, dental health, and beauty verticals, given that those are obviously companies who should definitely adopt adequate anti-pandemic measures, given that the outdoor communication and the social distancing are harder to be strictly followed, at least in professional-client interaction.

Are you ready? Here are the latest COVID-19 web design trends pursued by online businesses:

Web Design COVID-19 Trends: The Welcome Pop-ups

This web design approach for revealing COVID-19 information is not to be adopted by everyone. It’s kind of obtrusive, and it practically blocks the site visitors from entering before they confirm that they’ve read the information in question.

Regardless of the obvious drawbacks of the web design approach, it actually proves to come in pretty handy for companies that are to be extra diligent in satisfying the safety needs of their clients.

Below you can see a couple of examples of the welcome pop-ups, both of which are adopted by dental practices:

Sardinia Dental

The first dental practice relies on a simplistic pop-up. It features their logo only and the phrase “COVID-19/ Important Update”, which could hardly be counted as custom web design work.

However, the pop-up has and still plays an essential role both for the business and its clients. It navigates the site visitors towards a dedicated page containing information about the current company working hours, appointment, emergency, and online consultation procedures.

The data on the page has been divided into two logical sections vertically spreading down the page: one of them being the Virtual Appointments section and the other the Latest Business Updates listed down chronologically.

The Dental Surgery

The second pop-up example, again of a dental surgery clinique, has a more elaborate web design. Here we can see that the pop-up conveys much more information than simply attracting the site visitor’s attention to a given issue. It expresses care and kindness towards the site visitor.

The company manages to make it clear in the concise pop-up field that they tend to assist their patients both via online consultation and in person when the case requires it.

The pop-up is again plain and simple in terms of design, but in this case, it manages to convey emotion, to elicit a feeling of being cared after, of having a professional at your disposal, and that makes all the difference.

The pop-up doesn’t lead to another page on the site. At a click, it gives you access to the standard home page of the website. This is really refreshing in the days when we are chased by promotions and sales pop-ups trying to convert us just before we leave. Again, the pop-up actually really acts upon its promises: it just kindly reminds us that ‘they’ are here for us, nothing more.

Web Design COVID-19 Trends: The Home Page Header

Going down the scale of urgency, the home page design elements are next in line, with the page header being of top priority. Again for verticals where close interaction between clients and a company representative is required, going for the home page header web design tweaks is the right way to go.

Let’s go over the first example in this category, a landscaping service provider:

John Mini

This company does a wonderful job revealing to their clients, without many words said (or any for that matter), that their company is COVID-19-aware and acts responsibly by taking measures against its spread within their working environment.

So in case the business industry allows for less explicit annotation of the safety measures taken by the given business during COVID-19, this home page header execution is really the preferred web design approach, and you should definitely consider it.

UK International Soccer

This is another pretty eloquent execution of the COVID-19 alert adopted in the header image of a business website. One of the largest providers of soccer education throughout the USA, UK International Soccer have chosen to go with a photo of a kid taking safety measures during his practices. The slogan: “Safer Soccer Programs: In Person & Virtual” offers fine synchronicity between the header visual and its improvised textual conversion trigger.

Let’s go for another variation of this web design solution adopted by a cleaning company:

Amazing Cleaning Services

While this home page web design solution is really overcrowded with pop-ups, in my opinion, it really tackles what we are interested in. The header image of the site reflects employees performing the company’s services: deep cleaning and disinfecting.

The image aims to reveal the professionalism and thorough approach the company takes while working on a project – and that’s the best way they could’ve approached the situation. Inviting someone into your home or office is an intimate enough decision, and the COVID-19 pandemic makes it even more discomforting. The cleaning vertical should take this into account and, by all means, should try to prove to their clients that they are taking the most diligent and strictest hygiene measures possible.

Web Design COVID-19 Trends: The Home Page Dedicated Section

There is a whole bundle of web design techniques you can use to attract site visitors’ attention right on the home page of your business website. Scrolling down away from the header image, we go down different page sections that outline the website’s priority content.

If you’ve decided to reserve the home page header image for a specific service CTA or promo announcement, the home page sections underneath it are a good way to introduce the COVID-19 info associated with your business.

Amazing Cleaning Services COVID-19 notice

The cleaning company from the example above has also created a special section on their home page to further focus their site visitors’ attention on how well-prepared they are in following the special health recommendations of the U.S. Federal Government, the Centers for Disease Control, and other health organizations.

No one says that you should stick to a single web design solution to inform your clients about your in-house COVID-19 preventive practices. By all means, if you feel like you have something of real value to share, use more than a single web design solution to do it. As long as you do not repeat yourself and thus risk boring or putting off your customers, you’d be fine.

Butchers Salon COVID-19 guidelines

Here comes another example of COVID-19 info shared as a page section on the home page of a beauty salon website. This one is a real treat for the eye. An elegant execution native to the overall website design, they’ve gone for a fine contrasting color without it being too noisy.

That’s really a web design approach I’d strongly recommend if you prefer to calmly notify your clients of your COVID-19 practices instead of shouting them out loud for everyone to hear/read.

Bishopsgate Dental Care

“What-to-expect” or “Your new patient journey” on the company’s premises is a modern web design refrain during the COVID-19 pandemic. Whether you wish to dedicate a special page to it, to use a dedicated home page section instead, or to do both – it is all up to your specific company culture and, of course, the amount of information you wish to publish on your site.

Web Design COVID-19 Trends: The Home Page Promo Banner

While it could be assumed to be similar to the home page dedicated section – the banner is a smaller web design asset that often brings about promo and discount deals.

Amazing Cleaning Services COVID-19 promo banner

In this case, the banner serves as a tool to implement a fine marketing strategy: the company is addressing new clients, working under high risk and pressure during the COVID-19 pandemic, namely doctors, nurses, and medical personnel in general.

The idea is decently executed; the “doctor-being-an-angel” visual is a good metaphor for why this promo has been planned: because the given business acknowledges the worth and contribution of the medical staff and insists on openly showing them their gratitude.

Web Design COVID-19 Trends: The Main Menu Banner

A good way to make the COVID-19 content easily accessible by the user throughout the whole website is to add a link to it in the main menu of the website.

Depending on the preferred accent weight, the link could enjoy a contrasting design as it is with the orange “COVID-19 RESPONSE” button that is definitely standing out in the cleaning website example below:

Total Home Cleaning main menu banner

Or you could go with a more subtle and native approach as it is with the “COVID-19” main menu tab in the following dental practice example:

Sardinia Dental main menu banner

Web Design COVID-19 Trends: The Service Makeover

Business owners not only rethink their working schedule and office location (physical offices become virtual ones with employees being encouraged to complete their projects from their home), but they rebrand whole services to fit the new demands under the COVID-19 pandemic:

Amazing Cleaning Services cleaning and disinfecting services

This cleaning company has remodeled their Cleaning & Disinfecting services into Killing and Preventing the Coronavirus services. It is a resourceful way to approach this newly emerging niche. The company’s service page design has masterfully integrated the new addition to the service portfolio, appearing as if it has always been there for clients to benefit from.

Rutgers University-Newark summer courses

Rutger University has proven to be flexible in their summer course sessions. Because of the COVID-19 virus spread, they’ve introduced remote instruction and have openly communicated it in the body of the dedicated page for their summer courses.

Pinch Sitters Agency

This babysitting agency has redefined their core service due to the imposed social distancing measures during the pandemic. Just like schools have moved their classrooms to virtual learning platforms, Pinch Sitters switched to online/remote learning, entertaining, and caring and announced it proudly on their blog.

Web Design COVID-19 Trends: The Service Pop-up

We have stumbled upon a homepage COVID-19 pop-up earlier in this post, but don’t get me wrong; you don’t need to reserve such web design solutions to the home page alone.

Here’s an example to help you unleash your creativity:

Amazing Cleaning Services website popup

This cleaning company has integrated a pop-up promoting a COVID-19-related cleaning service throughout their whole main service page. Pretty fine web design touch, even if it can be considered a bit annoying for a person spending more time on the page.

Web Design COVID-19 Trends: The New Gallery Additions

The site gallery is the perfect place you can demonstrate your COVID-19 responsible attitude towards the safety of your clients. The cleaners below haven’t omitted to take advantage of this opportunity and quite rightly so.

Amazing Cleaning Services website gallery

Web Design COVID-19 Trends: The Blog Posts

In case your business is often searched for in association with keywords related to the COVID-19 pandemic, you’d most definitely like to rank for those in the Google Search results. How do you achieve that goal: you simply create content around those new key phrases.

Total Home Cleaning blog post

“Timing matters for COVID-19 Cleaning”, “Disinfectant Foggers”, “Electrostatic Disinfection” – there’s a wide list of topics you could target. As long as you properly conduct your keyword research, you’d be able to draft a successful content creation strategy and unleash the potential of your company blog.

Web Design COVID-19 Trends: The Blog Post Tags

And while we are talking about the blog section, don’t forget to pimp up your post filters by adding COVID-19 tags. That’s if you are regularly creating content within this realm, of course.

Total Home Cleaning blog tags

Web Design COVID-19 Trends: The Video

Last but not least, let’s check how businesses precede with one more time-consuming web design integration – the company videos.

Many are the companies that have invested valuable resources into creating special videos for their clients. They try to draw the picture of how well-prepared they are to welcome their customers again regardless of the daunting virus out there. The videos are aiming at calming down the patients that everything is under control and that the company services are posing no risk to their clients’ health.

I strongly recommend taking this web design remodeling project one step further and investing in such video. You don’t know how? Let’s see a couple of examples: they surely are done with a lot of taste and creativity.

The Dental Surgery website video

Show your “new standards of care”, if we are to quote the video from above. Demonstrate the social-distancing measures you’ve taken, talk about the opportunity to schedule a phone appointment and consultation, show the protective screens, the disinfectant washes you have stocked up with, inform your clients that you provide personal protective equipment, let them know you care.

Specialist Dental Services

You own a boutique firm, or you simply wish to stand apart? The above video, “Return to Work Update”, is a state-of-the-art piece. It is a breath of fresh air. The video resembles a movie trailer instead of a company clip. Amazing work – can you replicate their approach? You see, a rather unpleasant topic like COVID-19 can still inspire great creativity and lead to fascinating results.

Web Design During COVID-19: The Custom Approach

Have you found some of the ideas above to be the perfect fit for your website design? Let us know what your custom approach to this web design conundrum is. What were the challenges you’ve faced, and what were the final results of your COVID-19 informational campaign? Please share your personal experience in the comments below.

About the author

Vallery Henings

Vallery Henings is a copywriter and content writer who specializes in ghost blogging, email marketing campaigns, and sales pages.
She is also a lover of road trips, peanut butter cookies, and a dog name Mimy.

Add comment

The WordPress Specialists