• UX/UI
  • February 2022
  • Tech To The Rescue × Mirumee

#TechForUkraineA web app that makes it easy to support refugees from Ukraine

Designed for an initiative that pairs technology companies with Ukrainian NGOs. Giving had to be simple, intuitive and mobile — possible anywhere, anytime, in three taps.

Role
UX/UI
Team
Head of Design — Iwo Rzepiela
UX/UI — Jakub Nowak
For
Tech To The Rescue, with the Mirumee team
When and where
February 2022 · Warsaw
  • 3taps from the amount to the payment method
  • 700+technology companies from 84 countries in the initiative
  • 150+NGOs from 117 countries

Illustration: a phone with the fundraiser’s page — the amount raised in yellow tiles and the line “Pomóż osobom z Ukrainy” (Help people from Ukraine). Someone picks 65 zł and the counter grows by it.

01 Brief

A donation that fits in three taps

The brief: design a web app that makes supporting refugees from Ukraine easy and appealing — and shows how humanitarian organisations use the donations.

Simple, intuitive and mobile — so anyone can give anywhere, anytime.

  1. Amounts that say what they pay forA night’s shelter, medicine, an hour of therapy, a food voucher — or your own amount.
  2. Three tapsThe amount, “Pomagam”, the payment method.
  3. Methods with a searchWallets, BLIK, cards and banks, filtered as you type.
  4. Recurring BLIKPoland’s most popular payment, for monthly giving too.
  5. CardA number pad, the card brand recognised, 3-D Secure.
  6. Local marketsPre-authorized debit in Canada.
  7. A nudge to give monthlyAfter a one-off gift — an offer to give every month.
  8. Thank-youThe counter, an Instagram filter and a Facebook frame.

02 The fundraiser’s page

An amount that says what it pays for

The page opens with the amount raised and a line in Ukraine’s colours. Every amount says what it will fund — and further down, the organisation explains why help has to be regular.

  1. The counter

    The amount raised in yellow tiles and the number of people who gave — from the first screen.

  2. Monthly or one-off

    The switch sits above the amounts; monthly is selected from the start.

  3. Amounts with a purpose

    35 zł is an emergency night’s shelter, 65 zł helps pay for medicine, 98 zł is an hour of psychotherapy, 150 zł a food voucher for a family. Or type your own amount.

  4. “Pomagam” once you choose

    The button (“I’m helping”) appears only once an amount is chosen and stays at the bottom of the screen.

  • The organisation’s texts, the map and the illustrations come from the mock-up on the boards and in the recording.

Go to a part of the page

Łącznie zebrano296 osób

6 563 281 zł

Pomóż osobom z Ukrainy

Nawet niewielkie kwoty, wpłacane regularnie, pozwalają nam na stabilne działanie i długofalowe planowanie pomocy dla uchodźców.

Częstotliwość wpłaty
Kwota wpłaty

#PomagamUchodźcom
#Regularnie

Do naszego kraju przybyło już ponad milion uchodźców. Do Polski w najbliższym czasie trafić może 4 mln uchodźców z Ukrainy. W związku z bardzo niskim kursem hrywny ludzie ci zostali z dnia na dzień pozbawieni środków do życia. Potrzebna jest długofalowa pomoc.

Nasze działania

Centrum Pomocy Cudzoziemcom

Organizujemy lekcje języka polskiego, przygotowujemy do rynku pracy, pomagamy wynająć mieszkanie, pomagamy wybrać odpowiednią szkołę dla dzieci i udzielamy pomocy w sytuacji kryzysowej.

Pomoc humanitarna

Prowadzimy monitoring sytuacji, udzielamy pomocy humanitarnej i prawnej uchodźcom i uchodźczyniom, nagłaśniamy sprawę, lobbujemy. Na miejscu otworzyliśmy tymczasową siedzibę naszej Fundacji. Wykorzystujemy całą wiedzę i doświadczenie 21 lat działalności.

Mieszkania dla uchodźców

Program integracyjno-mieszkaniowy Witaj w domu został uruchomiony w 2017 roku. Jest odpowiedzią Fundacji Ocalenie na podstawowe problemy w integracji uchodźców i uchodźczyń w Polsce: zagrożenie bezdomnością i ubóstwem, nieznajomość języka polskiego i problemy psychologiczne (w tym związane z traumą).

Pomoc psychologiczna

Oferujemy pomoc psychologiczną dla cudzoziemek i cudzoziemców – po polsku, angielsku i rosyjsku.

Amounts, details and codes are samples

The app was designed in Polish, so the phones keep its words.

03 Three taps

3 taps to give support

Giving support has never been this simple.

  1. The amount

    One tap picks the amount and reveals “Pomagam”.

  2. “Pomagam”

    Opens the payment methods — the wallets come first.

  3. The method

    Apple Pay opens the payment sheet filled in from the phone. Face ID confirms it.

Taps

  1. 1
  2. 2
  3. 3

Łącznie zebrano296 osób

6 563 281 zł

Pomóż osobom z Ukrainy

Nawet niewielkie kwoty, wpłacane regularnie, pozwalają nam na stabilne działanie i długofalowe planowanie pomocy dla uchodźców.

Częstotliwość wpłaty
Kwota wpłaty

Amounts, details and codes are samples

04 Payment methods

A search for the payment method

The list starts with the wallets, BLIK and cards, with the banks below. The search narrows it with every letter.

  1. Wallets first

    Apple Pay and Google Pay, then BLIK and cards — the quickest ways to pay.

  2. Search as you type

    The “Szukaj” field filters from the first letter: “R” leaves only Revolut, as in the recording. Polish letters and case don’t matter.

  3. Two versions of the list

    The recordings show one list with Polish banks and one with other markets’ methods: PayPal, PAD in Canada, Boleto, Alipay and SEPA.

  • On the board, the SEPA mark sits next to Santander and Santander’s next to mBank — on the phone every mark is next to its own name, and mBank gets a monogram.

List version

Type for me:

Metody płatności

Metody płatności

Amounts, details and codes are samples

05 BLIK

Recurring BLIK

Poland’s most popular form of payment, used for recurring payments.

  1. E-mail

    The address is needed for the payment — and for the link that lets the donor manage the monthly gift.

  2. A code from the bank’s app

    Six boxes and a number pad; the code can be copied in the bank’s app and pasted.

  3. Confirmed in the bank

    A screen with a lighthouse asks you to confirm in the bank’s app and come back.

The bank’s app

370 454

A sample code — you can also type any 6 digits on the phone.

BLIK

Połączenie jest szyfrowane

Podaj swój adres E-mail

Adres e-mail jest niezbędny do realizacji płatności. Otrzymasz na niego również link do zarządzania swoją płatnością cykliczną.

Amounts, details and codes are samples

06 Card

Paying by card

A number pad from the first field, the card brand recognised from the first digits and 3-D Secure with an SMS code — as in the recording.

  1. Card number

    After the first digits only the brand’s mark stays lit, and the number splits into fours.

  2. Expiry and CCV

    Two short fields side by side; “Dalej” changes colour once every field is filled.

  3. 3-D Secure

    The bank’s page with the SMS code, which the phone suggests above the keyboard.

Test card5555 5555 5555 444412/27 · 123

Karta

Połączenie jest szyfrowane

Podaj dane karty

Raz w miesiącu będziemy pobierać z niej Twoją darowiznę.

Amounts, details and codes are samples

07 Canada

Pre-authorized debit in Canada

Authorisation, the local way: Canada’s PAD collects the gift from a bank account once a month — after two short steps.

  1. Account details

    First name, last name, institution number and transit number — letters on the letter keyboard, numbers on the number pad.

  2. Account number

    A screen of its own for the one long number.

  3. “Dalej” when complete

    The button darkens only once every field is filled.

PAD Canada

Połączenie jest szyfrowane

Podaj dane konta

Raz w miesiącu będziemy pobierać z niej Twoją darowiznę.

Amounts, details and codes are samples

08 Monthly

A nudge towards recurring payments

If a user picks a one-off payment instead of a recurring one, the last step encourages them to reconsider.

  1. A different thank-you

    After a one-off gift the page says thank you, then explains why regular help matters.

  2. One button

    “Zadeklaruj regularne wpłaty” (Pledge regular donations) — on this phone it returns to the form set to monthly, with the same amount.

  3. After a monthly gift

    The thank-you mentions the first payment taken and a monthly newsletter.

“Yet regular help is what matters”

Thank-you after a gift

Dziękujemy za pomoc

Z Twoją pomocą zebraliśmy296 osób

6 563 281 zł

Twoje wsparcie pomoże sfinansować bieżące potrzeby. Ważna jest jednak regularna pomoc – wsparcie psychologiczne dla osób z traumą wojenną, lekcje wyrównawcze dla dzieci, programy aktywizacji zawodowej i wiele więcej. Dlatego ważna jest regularna pomoc.

Nakładka na profil, która pomaga

Powiedz światu o pomocy

W podziękowaniu za wsparcie przygotowaliśmy dla Ciebie specjalny filtr na Instagram Stories i nakładkę na zdjęcie profilowe na FB. Powiedz światu, że warto jest pomagać

Amounts, details and codes are samples

09 Thank-you

An Instagram filter

After donating, the user is encouraged to share the fundraiser with friends.

  1. The counter with your gift

    The thank-you shows the counter — here it grows with the sample gifts made on this page’s phones.

  2. Filter and frame

    An Instagram Stories filter with Ukraine’s colours on the cheeks and the fundraiser’s hashtags, plus a Facebook profile-picture frame.

  3. Share the fundraiser

    The third button passes the fundraiser’s link on.

  • The face in the story is a drawing — the mock-up showed a photo of a real person here.

Nakładka na profil, która pomaga

Powiedz światu o pomocy

W podziękowaniu za wsparcie przygotowaliśmy dla Ciebie specjalny filtr na Instagram Stories i nakładkę na zdjęcie profilowe na FB. Powiedz światu, że warto jest pomagać

23:28Flag of UkraineLINK#PomagamUchodźcom#RegularnieTry It
Story layers

Amounts, details and codes are samples

10 Boards and recordings

Mock-ups that work

Six boards, two full-length screens and six recordings of the flows from the case study. The people’s, cards’ and accounts’ details in the recordings are samples, and the face in the story is drawn.

Apple Pay, Google Pay, BLIK, Visa, Mastercard, PayPal, Revolut, Alipay, Boleto, SEPA and the banks’ names and marks belong to their owners; they appear as in the app’s mock-ups.