Design and development during turbulent times

Fist raised up

Usually we are talking about design in a perfect environment: stable internet connection, various tools to use, enough time and safe placement, but what if we erase all of those conditions and put war in your country instead of them? In this article, I will tell you how to design during a crisis.

Hello, my name is Andrey. I am a Head of Product in a Ukrainian company. We are working on a health and wellness product that has already helped thousands of users to become healthier and happier but the war has hit us unexpectedly and now we have to deal with some new challenges.

As I have already mentioned there is a war going on in Ukraine right now and like many other tech people, we try to help our country during this fight. It can be hard sometimes, considering we are working in between bombings and air raid alerts but we are doing our best.

So what exactly are we doing now? We are making content for news: visuals, infographics, posters and websites.

This is the 7th day of the war in Ukraine and in this article, I have collected all the life hacks that I have figured out myself during this time. Hopefully, they will help other digital product developers who find themselves in similar conditions.

No code

In times of crisis, time is our main enemy because there is no time at all. Your website should be working here and now. For this type of issue the best solutions are no-code solutions. They allow you to launch projects faster.

Important Tips:

  1. Make sure the tool you are using has an exporting function and doesn’t depend on that tool servers. Otherwise, all your work may be lost due to various technical problems or DDoS attacks.
  2. Make sure that the service does not publicly display your personal data which you have provided during registration. It may not be safe.

Example

Notion Website screenshot
Notion

For example, we have made a website using Notion. We collected all the pages with information inside Notion, then exported them into HTML, tweaked by hand (just a little) and uploaded to our hosting. This saved us a lot of time for design and development.

Content is a king

In a state of war, there is no time to write all the content by yourself. Most likely, there are thousands of similar activists working around you. Take advantage of the content that has already been made before you, do your research.

What you should pay attention to:

Double-check the information that you borrow from your colleagues. Don’t rely on someone else, no-one will do it for you. Mistakes usually cost too much.

Example

When we needed to find a list of humanitarian organizations that help Ukrainians, we simply went through several sites and copied all the content.

Bootstrap

Since connection is highly unstable during a military conflict and most of the internet providers can’t handle the workload, the product you are working on simply has to be simple: No additional graphics, no heavy scripts and no animations. Ps. I know it hurts.

Example

Website stop-war-ukraine.com screenshot

We made this site https://stop-war-ukraine.com using Bootstrap. This allowed us to reduce the size of the website and increase the loading speed significantly. We have also tried to use minimum graphics and images.

No time for beauty

Forget the fine-grained shadows under the cards, or perfectly matched font pairs. Imagine that the time that you save when you skip to choose “just the right type of font” could save someone’s life.

In these situations, content is much more important than the way that it is presented. Of course, you should make sure that the text is readable and the elements have sufficient contrast, but it’s definitely not the right time for beauty.

Mobile first

Mobile-first approach is no longer a surprise, BUT it is very helpful during a military conflict. This approach is 1000% justified. Just imagine, people are in bomb shelters, basements, they are moving around the country and immigrating, they don’t have time to open their laptops. Thus, the smartphone is the only communication channel for them.

Mobile website stop-war-ukraine.com screenshots

ASAP

Once again, time. You don’t have time to think about MVPs, research, CJMs, etc. If you have at least one page of the website- just show it. Do not wait until the project reaches its final stage. The possibility of internet connection breaking in just 5 minutes is too high meaning the world won’t be able to see something that can save their life.

P.S.

If you want to support our country during these difficult times, you can find many convenient ways to do it on the websites that we have created.

Poster with title: Real ways you can help Ukraine as a foreigner

👉 https://stop-war-ukraine.com


Design and development during turbulent times was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a comment

Your email address will not be published.