Queen Elizabeth’s legacy: a guide on giving tribute with UX

7 tips for designing better blacked-out websites during an unprecedented situation

Darren Yeo

·

Follow

Published in

UX Collective

·

10 min read

·

Sep 26, 2022

--

2

Listen

Share

The queen is dead, long live the queen.

Many British citizens were stunned to hear of the sudden loss of their beloved monarch, who had ruled for over 70 years. Queen Elizabeth II has garnered many admirers over her lifetime, including those outside of her own country. She inadvertently became a pop icon due to her humourous candour and eloquent demure. She brought about the existence of new companies and the end of colonialism. She was the face of British culture and the face found on their currency. So, as her legacy ends, her entire nation joins in mourning and remembrance of their hero.

What distinguishes us from all other living things on the planet is our shared agreement to connect to social issues larger than our primal instincts for food and shelter. Beyond the simple exchange of words, meaning and symbolism are usually layered from previous generations. Take the colour red in Chinese traditions, which is often used in celebrations such as weddings and New Year traditions. In Indonesian practice, putting a hand on the heart is considered respectful and customary, especially when greeting someone who is older than you or your elders.

So it shouldn't be surprising to see a change in human behaviour and practice when there is grief and mourning for a respected figure, such as the Queen. Universally, human beings understand the concept of death, which is the end of a person's life. Across most cultures, special arrangements like a funeral are conducted. The deviation often lies in the funeral customs and procedures. This is where it becomes interesting because, as civilisation progresses, so too does the evolution of such practices. And as the medium shifts from oratory, to print, to broadcast, and currently to digital media, this is where UX/UI comes into play with its own interpretations.

What has been done? Is there a standard? And how could an organisation appropriately cater to special events without causing too much technical effort and cognitive overload for their users? With the exception of myself typing the wrong keywords for "blacked-out" and "grayscale" tributes, there haven’t been many examples to study. Yet not having the standards of a blacked-out variation can lead to devastating consequences. And when there are past mistakes, an organization may lose courage as they do not want to be seen as “completely losing the plot” by being labeled as overdoers. This leaves us with a question: should a muted tribute persist, or could there be a guide to aid designers and companies to design better pages for condolences? I believe there is, and will attempt to offer a few guidelines.

A disclaimer: taking references from many sites during the death of Queen Elizabeth II was an opportunistic attempt to document a better way to give tributes on digital channels. As a form of learning, I find no pleasure in offending how any of these companies react to a sudden situation on top of their daily operations. They are, in every way, great companies, as can be seen by their financial statements and brand equity. Thus, it is of great importance to me to only provide constructive feedback so that we, as a design community, can react better in times of an unforeseen crisis.

1. Make some perceived effort. Otherwise, don’t do it at all.

People can see the effort a company puts in when giving tribute. This is especially prominent when many other companies are attempting to display their gratitude to the respectable deceased person. Take the British residents who visit the supermarket. Throughout their experience, they will see various touchpoints, from the grocery app they are in, to the time traveled when commuting, to search engines and social media channels. Even at the supermarket, they would scan products and investigate the nutritional value of the new cereal box they had come across. On the way out, they see other retail shops, prompting them to visit their sites to do further research. The list is endless.

Some companies, mostly tech startups, tend not to participate, and their results reflect business as usual. Others went on the other spectrum, by not only displaying a banner, but apply their tribute throughout their entire site. In this case, a company should not place themselves at at lower end of the spectrum. This means putting in the minimum effort so as to acknowledge that a situation has happened, such as a call-out alert or plain text with a black background. There is no glory in jumping on the bandwagon when users can spot your bluff.

Sincerity lies in the amount of perceived effort and thought that is put into the design. Consider allocating ramp-up resources to cater to sudden situations. Create presets, such as blacked-out components, to be ready to activate. Otherwise, don't do it at all.

2. The topic of black: it can be overrated

While it is attributed to the Roman Empire, no one can fully explain why black is the chosen colour associated with death in most cultures. Some say death is like eternal sleep, likened to darkness when a person closes their eyes. Others say death is like the night, attributing it to the mysteries and wisdom of God. Whatever the case is, black is being symbolized by the clothes we wear at a funeral. It is then of no surprise that black is commonly used in giving tributes on websites.

At the same time, black is versatile, which leads to various treatments, ranging from grayscale screens, to vignette or black/white duotone images, to desaturated logos. As conventional as it sounds, black is the nomenclature—the default of death.

There are some exceptions, though, that are debatable. With the use of tints and shades, some colour can be added to the palette as strokes of accent color, adding drama to an otherwise dull image. Another attempt is to use sepia, a reminiscence of the glorious past. The key consideration is creating equilibrium and controlling the use of color. Using too much color, or matching corporate colors too intentionally could be perceived as pushing a company's ulterior agenda.

3. Words are important. So is how it looks.

Words mean everything when it comes to a solemn occasion. It should contain a heartfelt and authentic tone, paired with an endearing image of the person. Sometimes, even a personal note from a leader is appropriate as it gives weight to the significance of an event, especially when the deceased was an important catalyst for the company.

Yet at the same time, the digital channel is not a blog or a letter, but an entrypoint for various actions. A shopper visiting your site may be looking for a particular item or visiting hours. An investor could be looking for the annual report. A traveller may wish to book their mode of transport. It is therefore essential for websites to also provide practical information, which may be highly relevant to a user.

In the case of the queen's death, the day of the funeral was seen as a bank holiday, whereby certain operations and stores would pause. Although various news and social media channels may have already broadcast about the ad-hoc bank holiday, many companies have also taken the initiative to inform their users of their closures.

This is where the understanding of microcopies comes into play, where the balance of functional and emotional writing comes into play. Yet there is also a need to monitor word count so as to avoid text overflows beyond the visible breakpoint. That being said, the last thing a company should do is just provide a functional copy without any expression. Neither should it make it look ordinary, or worse, confusing. Such actions may come across as scornful, such that the inconvenience and disorder are overstated.

4. On accessibility and inclusion

The heart of the matter is due to a wide spectrum of users, each facing their own varied difficulties in navigating and utilising a product. Standards should be upheld without any compromises. "Real" text functionality should be readily available for a visually impaired user instead of rasterised or graphical text. Colour contrast is important too, such that intentional designing of blacked-out components ought to be done rather than a simplistic application of grayscale throughout the site. Simple, jargon-free text with no heavy cognitive load should be used.

While it may be hard to anticipate every special need, it is important that such components and patterns are tested before active sessions. This means conducting usability tests or collecting industry standards on blackened out components. Both options have their challenges, one based on the effort and the other due to the scarcity of available materials. Preparation is needed to avoid oversight.

Should an international brand participate? Such guidelines aren't straight-forward due to organizational structures and geopolitical relationships. The matter is complicated when there is a single site that does not have any localisation or immediate local resources to work on the site update. Despite the odds, some companies do go beyond borders in consideration of global citizens. Others use their limited resources and make do with working on their social media platform—a quicker and more versatile way of adjusting their international brand image with the local situation.

5. Timing is everything, even after the event.

When Queen Elizabeth passed away, the news was announced on Thursday evening at 6.30pm. With little time to react, companies race against time to change their sites on the following working day. Any later, work will have to continue on the weekends.

The principle here is to execute as quickly as possible. As with the first point, it is important that the initial perceived effort be felt. However, as soon as the first set of deliverables are shipped, subsequent features and functionalities can be added to give depth to the tribute. Some examples are dedicated pages showing milestones with the honored person. A tribute video, or even a simple online form to collect and display messages from the public.

And so the days continue, up till the end of the procession. What some companies may do is to immediately revert back to business as usual, almost like amnesia. Yet it is important to note that the human condition also requires time to adjust and accept the new realities. Such emotions may be more intensely felt with close ties, such that grief continues on beyond a funeral. If so, then carefully time when the tribute is over. In some cases, the tribute can continue below the fold, or elsewhere within the digital product.

6. A deserving impact

Especially for tributes, less is more. A full page with a blown image is justifiable. Keep it minimal, and let the image do the talking.

7. Controlled creativity

Other symbolism may be used among the blacked-out screens and monochromatic images. There are the half-drawn flags to make room for an "invisible flag of death" flying above. The use of black ribbons is associated with the ancient Jewish mourning tradition known as Kriah, where a strip of clothing is "torn". And the use of flowers: each has its own meaning in a bouquet for the Queen.

It is therefore possible to extend the symbolism of death from the physical realm to digital channels with some creativity. Harrods and Zoopla, for example, have decided to display the inanimate object of a half-drawn flag as a sign of respect over a person's face. Google's search engines depict death with a black ribbon.

And just like a memorial, a permanent digital memorial can also be created. Certainly, the life and the rule of Queen Elizabeth will be etched into the digital history walls with interactive media, along with a mobile responsive website.

About 7 years ago, Singapore mourned the passing of one of its most prolific leaders, Mr. Lee Kuan Yew. Tributes poured in all around, with citizens and companies taking up the initiative to memorialised the occasion. One example was the imprinting of Mr. Lee's face in the loop of the black ribbon, which caught on virally when people started sticking the customised black ribbons on their windscreens. Nevertheless, the theme of tribute remains consistent across countries and cultures. Designers and companies can better position themselves to show their gratitude and respect to the heroes of our lives.

Further Reading:
Quinto, Anne. Websites in Thailand have turned black and white to mourn King Bhumibol’s death. Online, 2016.

Hick, Robin. Straits Times publishes 24-page special morning edition in tribute to Lee Kuan Yew, Singapore news websites go ad-free. Online, 2015.

Sentance, Rebecca. Three UX and accessibility lessons from National Rail’s greyscale fiasco. Online, 2021.