Crystal Dionysopoulou is the founder and Creative Director of Lucid Fox, a dynamic web design and development agency that puts people first. She draws on years of experience as a UX designer and front-end developer to guide the creation of the perfect website for your organization from start to finish.
If 2020 taught us anything, it was how crucial it is for us to be able to think on our feet. In a year when suddenly everyone had to work from home, businesses and organizations required an up-to-date website to stay relevant.
This article is for those who had to shoehorn COVID banners and announcements on an inflexible website template. (You have my sympathies!) While these techniques can’t change the past, here are some design ideas to help your organization adjust and optimize your website in the future.
1. Know your audience’s goals and mindset.
Knowing who visits your site might not seem like a design technique at first glance. Still, understanding your audience is the foundation of all other design strategies and directly influences the success or failure of a website.
Before you consider updating or overhauling your website, make sure you know who uses it and why. It’s important to understand both the tasks that someone needs to do on a site—for example, donate, find resources—and the mindset they are in when visiting your site.
Tasks will tell you what people need to get done on your site, which helps you organize it efficiently.
The mindset (or emotional journey) helps you understand how to write the content, the order in which people will be visiting links, and even what colors would be more appropriate to use. For example, if someone might be in a worried state while browsing your site, intense colors like red or orange won’t help them; it would be better to choose calming colors like blues and greens.
If you offer many different paths on your site, a good strategy is to let users pick their own way forward. In the examples below, some websites chose to ask their visitors what they need.
Once your website is designed and structured according to this technique, it becomes easier to update it when those needs change by asking these questions:
Which tasks don’t apply anymore?
Is this a temporary or permanent change?
Are there any new tasks that people need to do in this situation?
Is this a temporary or permanent change?
What mindset are people likely to be in when they come on the site to complete this task?
The answers to these questions will help guide your design decisions anytime you encounter organizational changes… or global pandemics.
In practice:
1) The Brain Donor Project
How they use this technique: They anticipate the visitor’s emotional journey.
Most people probably have never thought about donating their brains to science. The Brain Donor Project’s end goal is to get you to register your brain for donation after your death—a major ask that is likely to be shocking or even offensive to some people.
The project seems to understand that people are likely to hesitate, so instead of pushing visitors to immediately pre-register their brains, they encourage them to explore the site and learn more about Brain Donor Project’s mission and why it matters.
2) SOS Violence Conjugale
How they use this technique: They ask the user immediately what they need instead of assuming.
SOS Violence Conjugale provides assistance and resources for victims of domestic violence. They identified many reasons that someone might be on their site; instead of prioritizing one over another, they decided to offer the user the choice to help guide them to the right place. (For those who want to skip the “conversation,” the menu is also available in the top right corner.)
They also understand that just being on their website might put someone at risk, so at the bottom of the browser window they offer buttons to help you clear browser history or take an emergency exit from their site and place you on a “safe” website.
Bonus points: They use a very friendly, conversational tone and calming interface, which helps to put people at ease.
3) Bushfire Help
How they use this technique: They understand their audience is ready to help and offer relevant choices.
Bushfire Help connects people and organizations to help minimize the impact of fires in Australia. They assume that if someone is on their site, they are already there to help.
Instead of making site visitors click around extra pages, they put the different ways to help front-and-center so people can choose. Extra information is available further down the page, but they encourage action right away instead of trying to educate.
2. Have a plan for emergency announcements.
COVID banners became ubiquitous across the web, but they’re not the only reason to have a space for announcements. Other potential announcements include:
- Brand updates
- Changes to services or hours
- Promoting a special fundraising campaign
If you have a plan for where those announcements go, what they look like, and what kind of information they include, it will be easier to respond to last-minute changes (or, dare I say, “pivot”). They don’t need to appear all the time, but make sure your web developer has created a place for them that you can bring them to the forefront and update the content as necessary.
In practice:
1) “I Have A Dream” Foundation
How they use this technique: They use their homepage slideshow for major announcements.
While I personally have a love-hate relationship with sliders on websites, if your organization has one, this is a good use for it. If your slider is typically where blog posts or news items go, an emergency or timely announcement will fit right in. (Additionally, people who are familiar with your org will know to look there for the most up-to-date info.)
If you want to make sure the announcement gets extra attention, change the colors or styles of the announcement from the typical design. The contrast will draw the eyes of your site visitors.
2) Relief International
How they use this technique: They use a large screen overlay to display a COVID-related call-to-action.
If your organization has an urgent need or emergency announcement, a full-page overlay like the one Relief International uses is a good solution. An overlay like this tells your site visitors that whatever information is displayed here is more important than what they were trying to do on your site.
Use with caution: if this type of overlay or pop-up is overused, people will start to ignore it—even if the information inside changes.
3) Start Early
How they use this technique: They use a dismissible banner at the top for important announcements.
This is the most common pattern we’ve seen in COVID announcements: an out-of-the way and often subtle banner, with a link to learn more about the news. In this case, Start Early uses the banner to announce their name change and rebrand.
Again, this approach is one to use sparingly: if Start Early had a COVID banner in place before announcing their rebranding, it’s possible that people would miss the change.
4) Spondylitis Association of America
How they use this technique: They added a section to their homepage content that flows with the rest of the page.
Instead of adding a more temporary design element, the Spondylitis Association of America added content in a section on their homepage for a COVID-19 research announcement.
This method is good if the announcement or call-to-action will be around for a while. It is easily discoverable, but does not have the urgency (or temporary feel) of pop-ups or banners. That also means that if you needed to make a critical announcement for another reason, you could use one of the other methods without confusing your audience.
3. Design for variable-length content.
It’s tempting to try and keep your website pixel-perfect to the original design. (Anyone else edit the content until it’s just the right number of characters so it looks just so with the background image? No? Just me?)
In real life, though, the content on your website is going to evolve over time as your organization grows and changes. Instead of stressing over how to edit content down to the perfect length (and trying to make sure your colleagues do the same), it is easier to embrace the variety.
There are two different places where copy length variation can happen:
1) Content that is frequently updated
Repeated content, like blog posts, event listings, or even things like your programs or success stories. The titles, excerpts, or post summaries can vary dramatically depending on the writer and the content.
Taking different text lengths into consideration happens automatically because you’ll usually see these types of content side-by-side.
2) Content that was originally static but needs to be updated
Content that was originally static when created during the design phase probably wasn’t intended to change, but it may need to be updated for one reason or another.
It is hard to plan for changes that haven’t happened yet, but there are a few things you can do with the visual design so that updating your site is easier:
- Use vector format images (SVG) so that your new content can exist next to a pixel-perfect icon.
- Avoid stretching images if they live next to content; you don’t want to end up with a skewed or blurry picture.
In practice:
1) AMA Foundation
How they use this technique: They limit the length of text by automatically truncating when it gets too long.
If a lot of people create content in your organization, this tactic is for you—it’s just about the only way to guarantee that the content won’t exceed a certain length. Most content management systems include this functionality by default; ask your web developer if you’re not sure.
You can see how the blog post descriptions below are automatically cut off with an ellipses so that the three articles have similar vertical heights.
2) Assembly | Malala Fund
How they use this technique: They embrace variable text lengths by putting posts in a “masonry” grid.
Instead of trying to make sure the headline and first sentence of each post is the same length, the Assembly site chose to use a masonry-style grid, which de-emphasizes the length of text and visually balances the content by organizing the blocks vertically instead of horizontally. This method is great if you don’t want to limit your content writers.
4. Use design patterns.
If your organization has a brand manual, you know how important it is to be consistent. The same applies to your website—by reusing certain patterns across the site, your website becomes easier to browse the longer people are on it, because they know what to expect.
If you think your website doesn’t have any existing design patterns, take another look with a critical eye, and start small. Do the buttons have similar styles? What about calls to action? Do some pages use the same template? What do they have in common?
Design patterns are helpful when updating your website, too: if you have a predefined set of designs for components or pages on your site, adding content or even entire categories of pages becomes significantly easier.
It may be worth documenting these patterns once you notice them, especially if a lot of different people have access to update parts of the site. You don’t need to go all-out creating a design system with code samples—even a living document with screenshots and a few notes on how each pattern is used would help.
In practice:
1) Freely in Hope
How they use this technique: They display their programs and impactful statistics in identical formats, but with different colors and images to make them each stand out.
Notice the similarities of the layouts: they have a headline, a description, an impactful statistic, and a link. If they were to ever need to add another program, it would be pretty easy to add an extra row with the same pattern.
2) Women’s Funding Network
How they use this technique: They use identical page layouts on pages of the same “depth” (ie, how far away they are in the site map from the home page).
By having category pages and interior pages with distinct layouts, Women’s Funding Network made adding new pages or categories easy—the design is already done. Since the category pages have a full-bleed hero image, they also are distinguished from each other and appear more unique than they are.
If you browse the site, you’ll also notice subtle background patterns that help unify different sections on a page. This site is an excellent example of design patterns as well as a strong visual brand.
Bonus points: check out their announcement banner to promote their speaker series.
5. Break established web patterns with intention and caution.
In the last few years, most websites seem to follow the same pattern: logo in the top left, menu in the top right, button to the right of that, big image below the header, etc. Some may lament the death of creativity on the web, but this consistency means that people generally know how to navigate websites they’ve never visited before.
There are some websites that try to break these trends, but this can cause confusion. Avoid being too creative with the placement of ubiquitous things like a navigation menu or calls to action—your website is not an art piece. (Unless you have an art gallery and you are building a microsite as a virtual art installation, in which case, carry on!)
There are some instances, however, where getting a little creative can be beneficial. Two beautiful cases below show examples of sites that are far from what one would normally expect from a nonprofit.
In both instances, these sites are not the main website for the organization—they are microsites which showcase a particular report or campaign, so there is more room for unique design patterns.
In practice:
1) Civil Voices
How they use this technique: Civil Voices has taken a report that would have otherwise been a dry read and turned it into an interactive, playful site that encourages you to explore the results. It’s surprisingly interesting and fun to click around and could be an interesting way to inspire people to engage with an annual report.
2) IOM #FindAWay Campaign
How they use this technique: This microsite showcases four stories of migration in an effort to encourage donations to their Find A Way campaign. The stories are presented in an editorial format which feels more like something you’d find in a print National Geographic magazine, not on the web. It is an engaging website, and a great way to draw attention to one specific campaign.
Conclusion
We can’t predict future changes and shifts in our organizations and the world, but we can be prepared for them. By utilizing these design longevity techniques, your organization can focus on fulfilling your mission instead of scrambling to update your website effectively when curveballs come along.
Want to update your site and don’t know where to start? At Lucid Fox we focus on building sites that are sustainable and easy to maintain, and we would be happy to point you in the right direction. Get in touch!
About the Author
Crystal Dionysopoulou is the founder and Creative Director of Lucid Fox, a dynamic web design and development agency that puts people first. She draws on years of experience as a UX designer and front-end developer to guide the creation of the perfect website for your organization from start to finish.
