top of page
two hands reaching out.png

Humanitarian Evacuation
Life-saving passages (H.E.L.P.)

A Design for Social Good Case Study
By Charity M. Jantzen

“Refugees didn’t just escape a place. They had to escape a thousand memories until they’d put enough time and distance between them and their misery to wake to a better day.”— Nadia Hashimi

Das Produkt

Willkommen zu einem neuen Kinoerlebnis wie nie zuvor! Sie können sich Filme ansehen, Tickets, Konzessionen und Waren kaufen und dieses Retro-Theater mieten. Unsere Website/App ist so konzipiert, dass Sie alles von Ihrem ausgewählten Gerät aus anpassen können, von wo Sie parken, bis hin zu Untertiteln und Untertitelbeschreibungen.

Three iphones side by side, the first iphone displays the system menu, the midde iphone displays the sign in page and the last iphone displays the landing page.

The Problem

Refugees like Bohuslava Shevchenko who is a Ukrainian mother who needs to find safe passage to a neighboring country is unable to because Russia has been shelling her village nonstop, and she is scared for her family and her own life.

The Goal

Provide civilians in conflict a method to find a way to safety and much-needed resources.

My Role

All roles:

UX design and UX research from conceptualization to completion. 

Responsibilities 

  • Developing personas, user stories, and user journey maps

  • Conducting usability studies

  • Creating wireframes and prototypes

  • Testing and iterating on designs

  • Designing Mockups

  • High-fidelity prototype

  • Implementing accessibility

Den Benutzer verstehen

Person: Tony Ajana

Problemstellung:

Tony ist ein begeisterter Kinogänger, der es liebt, mit seinen Kindern ins Kino zu gehen, aber der Aufwand, Tickets und Snacks im Kino zu kaufen, wird überwältigend. Er braucht eine Möglichkeit, seine Einkäufe online zu tätigen, weil er den Film genießen möchte.

Humanitarian Line Persona

Person: Tony Ajana

Problemstellung:

Tony ist ein begeisterter Kinogänger, der es liebt, mit seinen Kindern ins Kino zu gehen, aber der Aufwand, Tickets und Snacks im Kino zu kaufen, wird überwältigend. Er braucht eine Möglichkeit, seine Einkäufe online zu tätigen, weil er den Film genießen möchte.

Humanitarian Line Persona for Annamaria Moslovka

Karte der Benutzerreise

Ich habe diese Reisekarte erstellt, um mir zu helfen, Lücken zwischen der Benutzerpersönlichkeit und dem mentalen Modell des Benutzers zu identifizieren. Darüber hinaus half mir die Journey Map dabei, das allgemeine Endziel des Benutzers zu visualisieren und wie er sein Ziel erreichen musste.  

Humanitarian Routes Journey Maps

Ideation

After taking advanced steps to understand the users thinking and paths, I was able to noodle on a few designs before going digital. 

I like to utilize the whiteboard and crazy 8 methods for to get the creative juices flowing.

Crazy 8_edited.png
68209129731__31937DA5-BF3B-4A24-8B8F-986

Starten des Entwurfs

Seitenverzeichnis

Die Benutzer hatten erhebliche Navigationskomplikationen, was sie zu ihrem Hauptschmerzpunkt machte. Ich beschloss, dieses Wissen zu nutzen, und erstellte eine Sitemap. 

 

Mein Ziel war es, strategische Entscheidungen zur Informationsarchitektur zu treffen, um die allgemeine Website-Navigation zu verbessern. Ich habe mich für eine Navigationsstruktur entschieden, die den Benutzern die Arbeit erleichtert und die Flexibilität bietet, sie in Zukunft zu erweitern.

Digital Wireframes of the HELP app

Benutzerfluss

Bevor ich beginne, zeichne ich den Benutzerfluss auf und verwende ihn als Leitfaden, wenn ich mit dem Erstellen der Seiten beginne. Ich finde das äußerst hilfreich, wenn ich alleine arbeite und an Projekten, die eine schnelle Abwicklung haben. Darüber hinaus bietet mir der Benutzerfluss eine Methode zum Nachverfolgen abgeschlossener, ausstehender und als außerhalb des Umfangs liegender Designs, während ich entwerfe.

Low fidelity prototype iteraction arrows in figma

Usability-Studie: Parameter

Usability icon paper with a hand clicking a box
Studientyp

Moderierte Usability-Studie

Map pin icon on a blue circle
Ort

Moderierte Usability-Studie

Participants hand icon on blue icon
Teilnehmer

5 Teilnehmer

clock on blue circle
Länge

20-30 Minuten

Usability-Studie: Ergebnisse

Dies waren die wichtigsten Ergebnisse der Usability-Studie: 

The number 1 on a circle on blue
Snacks kaufen

Die meisten Benutzer hatten Probleme damit, andere Konzessionsartikel hinzuzufügen

The number 2 on a circle on blue
Konzept

Mehrere Benutzer verstanden den Prozess nicht und waren beim Kauf und der Teilnahme schüchtern. 

The number 3 on a circle on blue
Konzept

Mehrere Benutzer verstanden den Prozess nicht und waren beim Kauf und der Teilnahme schüchtern. 

The number 4 on a circle on blue
Datum

Benutzer konnten nicht angeben, an welchem Datum sie den Film besuchen wollten.

Das Design neu definieren

Modelle

Nachdem ich Feedback zum VIP-/Mitgliederprofil erhalten hatte, entschied ich mich für einen sozialeren Ansatz und fügte Gamification-Abzeichen hinzu, um die Benutzer zu belohnen.

Menu of the iphone showing before and after the usablity study

Mockups

The users did not want separate fields for address information; they felt entering their address as one field would be better. 

Mockup of the user contact information before and after usability study

Mockups

iphone side by side of the HELP app

High-Fidelity-Prototyp

Mein Ziel war es, die Zeit, die die Benutzer in Warteschlangen verbringen, und ihre Verwirrung zu reduzieren und den Ticketverkauf zu steigern. basierend auf dem Feedback; Dieses Ziel habe ich erreicht. Außerdem hat es Spaß gemacht, ein neues Programm und alle Trigger zu lernen. 

 

Sehen Sie sich das Showboat-Autokino an

High-Fidelity-Prototyp

app preview of two iphones on blue background

Überlegungen zur Barrierefreiheit

number one icon in a blue circle

Ich möchte sicherstellen, dass die Website für Menschen mit Sehbehinderung und Farbenblindheit lesbar ist. Ich habe dies erreicht, indem ich bereitgestellt habe, dass die Website WGA AA-konform ist und ein Verhältnis von 4.5.1 zwischen den Links, dem Haupttext und dem Hintergrundkontrast aufweist. 

The number 2 on a circle on blue

Ich wollte ein hierarchisches Seitenlayout verwenden, um die Dinge zu organisieren und Bildschirmlesern bei der Navigation zu helfen, was als nächstes zu tun ist.  

The number 3 on a circle on blue

Ich habe die Website so gestaltet, dass die Textgröße und der Textabstand geändert werden, was dem Benutzer bei Sehverlust und anderen Problemen mit der Barrierefreiheit hilft.

Vorwärts gehen

High-Fidelity-Prototyp

Mein Ziel war es, die Zeit, die die Benutzer in Warteschlangen verbringen, und ihre Verwirrung zu reduzieren und den Ticketverkauf zu steigern. basierend auf dem Feedback; Dieses Ziel habe ich erreicht. Außerdem hat es Spaß gemacht, ein neues Programm und alle Trigger zu lernen. 

 

Sehen Sie sich das Showboat-Autokino an

High-Fidelity-Prototyp

HELP Site Map

High-Fidelity-Prototyp

Mein Ziel war es, die Zeit, die die Benutzer in Warteschlangen verbringen, und ihre Verwirrung zu reduzieren und den Ticketverkauf zu steigern. basierend auf dem Feedback; Dieses Ziel habe ich erreicht. Außerdem hat es Spaß gemacht, ein neues Programm und alle Trigger zu lernen. 

 

Sehen Sie sich das Showboat-Autokino an

High-Fidelity-Prototyp

HELP app on multiple devices

Vorwärts gehen

Imbiss

number one icon in a blue circle

Einfluss

"Hervorragend!"  

"Ich liebe die neue Seite; sie ist fantastisch und gut gemacht." 

Der Benutzer fand  einen neu „eingerichteten, absolut kohärenten Benutzerfluss mit klaren Navigationshinweisen“. Die Website hat insgesamt das mentale Modell und die Ziele des Benutzers erreicht. Benutzer konnten Tickets, Waren, Ermäßigungen und sogar Parkplätze online kaufen.

The number 2 on a circle on blue

Was ich gelernt habe

Das Wertvollste für mich ist es, ein Tagebuch zu führen, wenn alle Ziele, Zitate, Gedanken und Ideen zusammenkommen.

Nächste Schritte

number one icon in a blue circle

Führen Sie nachfolgende Usability-Tests auf der Website durch und nehmen Sie die folgenden Änderungen vor. 

The number 2 on a circle on blue

Beginnen Sie mit dem Entwerfen der Close Circuit- und Untertitel-Apps für Menschen mit Behinderungen. 

The number 3 on a circle on blue

Mein nächster Schritt wäre, an den Untermenüs zu arbeiten, diese zu verspotten und neue Funktionen zu entwickeln.

bottom of page