The past five weeks have tested many organizations’ ability to communicate effectively using existing technology and website tools. Many are improvising solutions for adding high-priority COVID-19-related information to the site, such as using templates that were originally designed for campaign landing pages or press releases, because their website design and technology aren’t as flexible as they need to be.
This experience responding to the pandemic provides an opportunity to reflect on whether your website design and CMS controls are prepared to rise to the occasion when communication imperatives change. Some of the best ways to make your website resilient are evergreen best practices — but there are also some steps you can take immediately to tune your UX and content in this moment.
How two organizations prepared for the unexpected
This month has highlighted the value of a clearly defined website design system. Organizations that have already invested in design systems, implemented as pattern libraries, are able to quickly pivot to meet new communication needs — without making the experience feel forced or jerry-rigged.
For example, JDRF’s forward-looking site redesign in 2018 was underpinned by a responsive atomic pattern library. Pages are built by combining components from the library in new arrangements, with each component designed with the requirements of the flexible system in mind. This approach has allowed JDRF to quickly respond to new communication needs around COVID-19. The new coronavirus section on the home page, a grouping of five components, is both consistent with the overall site look and feel and efficiently guides visitors to JDRF’s timely resources for T1D patients navigating the pandemic.
UNICEF USA has also prepared in advance to handle unforeseen situations. Among a set of enhancements added to the site in 2018 is an alternate home page design, immediately available with a switch in the CMS, to focus on a single emergency. For UNICEF, that often means mobilizing within hours to a natural disaster or humanitarian crisis — but UNICEF is currently using it to bring focus to their efforts to combat COVID-19.
This feature came out of our work with UNICEF USA in 2018 —one of many potential additions brainstormed by our combined teams. To select which features we would ultimately design and implement, we facilitated a feature prioritization exercise, which gave the UNICEF USA team an opportunity to think through which features would provide most value to the mission. That process clarified that tools to respond quickly to emergencies were more critical than some of the others under consideration.
Organizations that have already invested in design systems, implemented as pattern libraries, are able to quickly pivot to meet new communication needs — without making the experience feel forced or jerry-rigged.
Steps your team can take right now
Even if your organization hasn’t been laying the groundwork for this situation for the past year or two, there are a few things you can do right now to make your COVID-19 communications more effective:
1. Before launching new content, make sure website tracking is updated to reflect your new pages and calls-to-action.
Add any new tags or events that might be needed to ensure that you’re ready to measure the key actions you may want visitors to take and that all the right data is available to assess the impact of your content.
Assess whether the KPIs and metrics you’ve set align to the purpose of your website. For example, are you interested in driving clicks to other sites or pages? If so, focus on a metric like outbound click rates, rather than less meaningful metrics like time-on-site or session volume. If you’re unsure of a particular strategy, don’t be afraid to turn to A/B testing, but don’t get bogged down by this. Use it to help you pivot or decide quickly and remember that learnings are going to be unique to this crisis.
2. Determine where to place navigation elements for new COVID-19-related content.
Adding a simple banner style announcement at the top of a page attached to the navigation bar or a sticky banner attached to the bottom of a browser window gives an organization the ability to quickly draw attention to a customized announcement. Design and build a web component like this, that can be turned on or off quickly depending on the need, while thinking about how it might fit in with your overall design system. A masthead announcement should draw attention to the urgent message your organization is putting out while maintaining the structural integrity of your brand and navigation that is part of the typical day to day masthead.
Planning for this type of component as you design your global navigation will allow your organization the flexibility and speed needed to update messaging in a timely way. Our clients Teach for America and the City of New York are using Masthead banners and sticky bottom banners respectively to guide visitors to content that addresses how their organizations are tackling the COVID-19 health crisis.
3. Determine if your organization’s response to the pandemic merits revising the home page.
Your homepage is the online front door to your organization. As such, it introduces your mission and brand to the world. It should also let people know what is new at your organization and how the work you do is relevant to the current moment. Good homepage design incorporates ways to fold in news and updates into the default template. Updatable hero components and a content strategy that allows evergreen introductory messages to be complemented by timely news when appropriate can do a lot of work with very little extra effort.
With minor additional planning, your homepage can also accommodate more significant “takeover” style messaging. The UNICEF USA example mentioned above successfully uses this model for emergency response messaging. Other types of organizations may find seasonal or campaign-based takeover templates can serve them effectively. An alternate homepage template doesn’t have to be a significant design variation or engineering lift if planned for as a complement to the default template.
4. Consider grouping your COVID-related content together.
Some of our clients (Teach for America, JDRF, The City of New York) are effectively leveraging landing page elements to create resource hubs that collect information on COVID-19. When producing regular updates, announcements and tools of different kinds it is smart to provide a “one stop” location for your community to find what is most valuable at any given moment.
Using a standard landing page template for this purpose is ok, but you might want to differentiate rapid response content or new resources from other more typical content you produce. Some organizations may create brand new stand alone hubs for COVID-19 responses. This addresses the need to differentiate content, but it raises issues of maintainability and integration with the rest of your web presence.
Being able to “flag” a typical landing page with unique elements that set it apart from the typical evergreen landing pages illustrates your organization’s timeliness and relevance without requiring significant extra development work. Consider a module or graphic element like a label or header treatment that can be included as an optional element to be added to the standard library of landing page components.
5. Focus on priorities.
There may be more urgent requests coming in right now than your site team can get done. To keep everyone focused on what is most mission-critical to tackle first, it can be helpful to have a system to clarify how much effort each request involves and compare that to the benefit, either to your business or the needs of your constituents. This can be done with a simple scoring matrix. For example, roughly assess the effort each update will involve from 1 to 3. “1” could be under 2 hours of work, “2” could be up to a day of work, and “3” could be anything that takes more than one day. Mapping the scores on a matrix will immediately reveal which updates are quick wins (low effort, high benefit) which can be batched together to make several improvements in the next release, and which may be an essential change that will require deciding to pause on several other tasks.
Good homepage design incorporates ways to fold in news and updates into the default template.
Thinking Longer-Term
Hopefully these recommendations help you tune your website to the needs of the moment. This can also be an opportunity to enact changes to strengthen your digital practice overall. Here are two key recommendations to start that discussion:
1. Adopt agile site governance.
Organizations that manage the website using agile methods do a better job prioritizing and spending time doing mission-critical work.
2. Adopt an atomic design system.
An atomic design system that is implemented in a pattern library can be used as a reference by all teams. This living style guide will improve the consistency of your UI design and create a standardized approach that will increase efficiency when creating new components and patterns.
Your ability to move forward quickly with either of these recommendations may be hampered by technical debt in your current CMS. Within the past two years, WordPress, Drupal, and other leading content management systems have launched updates to enable component-based design and drag-and-drop editor controls to build pages.
We’ve taken advantage of these tools to allow sites we’ve designed in the past year to fully embrace a component-based design system and an agile-based iterative release and optimization model.
No matter how you move forward, use this opportunity to start writing your wish list for your next website while you tackle these short-term fixes and recommendations.
Want to talk to us about how you’re adapting your technology to this moment or want to learn more? Reach out.