Designing for emotion: techniques explained on UkrainianPower case
We continue exploring emotions in digital product design, but in this section, we’re going to rely on the Lazarev.Agency real-life case. Welcome UkrainianPower, 8 times award-winning website that promotes partnership between Ukrainian creatives and global firms.
After a full-scale russian invasion of Ukraine, creatives lost many of their local clients as businesses started shutting down and cutting costs. Ukrainian agencies had no other choice but to enter the global market, looking for new customers and sources of livelihood.
To encourage international companies to partner with Ukrainians, Lazarev.agency built the experience by combining emotional storytelling and rational understanding. Wanna know how exactly we reached the outstanding performance results by evoking the right emotions? Then keep on reading. In the upcoming sections, we’ll dive deeper into the emotional design strategies by analyzing the UkrainianPower case.
Storytelling: how to tell a memorable story
Once upon a time, one nasty terroristic country named russia invaded the small but truly brave Ukraine. Russia planned to occupy Ukraine in three days, but it didn’t happen as expected. Ukrainian people were ready to defend their land and started fighting, some — on the battlefield, others — in the rear supporting the army, refugees, and the country’s economy.
Creatives were one of those ready to do whatever it takes to help Ukraine, donate and move the victory day closer. But the russian invasion made it difficult to benefit financially from the local market. The UkrainianPower website was created with one clear goal — to help the Ukrainian creative agencies reach out to new markets and showcase their expertise.
As you can see, the whole idea of this website is driven by a terrible yet very motivating story about brave people who aren’t giving up but fighting. The storytelling line moves users throughout the whole website, guiding them down from war anxiety to business stableness. The narrative connects with the international community on an emotional level and shapes their minds on partnership.
To create a memorable story for the brand, stick to a few simple rules:
- Introduce the conflict. If your story has none, you’re probably not telling a story. There is no need to be overdramatic. Just think of the problems the target audience has and provide a solution.
- Structure your story. To accomplish that, let your narrative answer three questions: What? And then what? So what’s the point? The first part should introduce the problem, while the last one brings results and conclusions into a game.
- Trigger the right emotional motivations. The most powerful are: a desire to succeed; feel secure; be confident about the future; freely choose the way to live; avoid stress and health problems.
Storytelling is an effective instrument, and our case proves that. Being launched at the end of June 2022, UkrainianPower gained much publicity all over the world, shaking Cannes and being written about in 10+ Ukrainian and international media, including Adweek. Statistics say that the website was visited over 10 thousand times over one month. It was nominated for the most prestigious awards like FWA, Awwwards, and RedDot.
Colors and emotions: how they relate
When used correctly, colors can make people feel happy or sad, anxious or relaxed. Those reactions are culturally imprinted and rooted in psychological effects.
In the UkrainianPower design, we added red accents in text blocks to deliver the emotional drivers behind the Ukrainians' desire to fight for work and survive. The green palette at the end of the page relieves the emotional pressure and highlights partnership benefits between Ukrainian and international agencies.
Use the color palette wisely when delivering messages and driving users to take action. For instance, leverage the power of pastel colors like lilac, mint, or baby blue to calm and relax users. Or go for muted and cool colors to express sadness and grief.
Impress users with details
As Leonardo Da Vinci once said, “Details make perfection, and perfection is not a detail”. Who are we to argue with Leo?
As mentioned before, such small things as swipes or animated buttons can make a difference to your design and evoke emotions.
Returning to the UkrainianPower case, it’s all about details making a user experience more personal and interactive. For example, we added the hover effects on awards blocks to add playful vibes. Such a website’s interactiveness engages people and extends web sessions.
There are also animated circles with 3D elements. They make people stop and choose whether they want to see Ukrainian agencies as their competitors or equal partners. We added a blur hover effect to tell that the pursuit of partnership is the main purpose of this site.
Another thing that highlights the emotional stress caused by war is font. It’s rather sharp and straight. Besides, its density in the layout is quite high, which demonstrates the tension of the situation. The right accents are made by using a large font size and stretching it to the entire site. That looks pretty much like a scream eager to emphasize the incredibly unfair situation with the war.
The Lazarev.Agency designers also decided to attract users’ attention to the problem by using an irregular structural layout. It looks new and unusual, arousing interest and highlighting the issue described on the website.
Speaking of details, we can’t overlook the website’s background, which isn’t pure white but contains noise. The grainy veil in the background impacts the user’s mood focusing on the chaos and devastation caused by the war.
Motion for emotion
It’s said that “A picture is worth a thousand words”, and we have no intention of arguing with that. However, we’d like to add a small yet important remark. The effect of a picture can be doubled by making it movable. In simple words, motion in design is a handy instrument to engage users and deliver messages more efficiently.
In the UkrainianPower case, we needed an instant attention-grabber capable of informing users about the situation in Ukraine. We understood that things such as coming to another country, killing civilians, and destroying cities with missiles are difficult to comprehend for civilized people living in a time when everything is resolved in a diplomatic way. That’s why we added a powerful video. Instead of telling how horrible the war is and how much grief it brings to peoples’ lives, we showed it.
We also used videos to introduce each of the agencies presented on the website. Instead of telling how cool they are, we showed it allowing the creative teams to tell their stories in a more dynamic and engaging way.
Don’t underestimate the power of motion in your design. It’s best to tell stories, describe complex concepts and instantly convey the brand’s message.