SOS-app
by Ukraine Global Taskforce

How my team designed, developed and launched an emergency contact app for Ukrainian Refugees in less than 2 months.

Overview

The Ukraine Global Taskforce was founded a group of senior tech workers in response to the war, to quickly design digital tools to help refugees. Within two months, we designed, developed and launched our first app, the SOS-app that my product team worked on.

This is the story of how we did it from my perspective as one of the primary designers working on the project.

TLDR: Preview the Prototype

SOS-app makes it easy for refugees to quickly contact emergency services in foreign lands where they may not speak the local language.

SOS-app saves your contact details, so that when there is an emergency, you simply open the app, push the red button, and the local services are contacted via a trusted line, and sent to your location.

The prototype below demonstrates the onboarding flow, the sign up and contacting emergency services. (Not available on mobile!)

1. Discovery

We evaluated the problem space to discover opportunities, interviewing experts for greater insights.

2. Ideation & User Flows

We ideated through discussion, and captured the most viable idea in a user flow, creating a shared understanding

3. Prototyping

We wireframed the idea, defining the UX and then hifi UI Design, Illustration & Onboarding.

4. Development & QA

We handed off to development, continued running usability tests and performed QA to maintain design parity.

The Team

We came together remotely via an open call by the organisers, and were placed in teams based on skillset. My team had

  • 3x Product & UX Designers (inc. Me)
  • 2x Product Managers
  • 1x Developer Lead
  • 2x Backend & 2x Frontend Developers

Once the project emerged as one of the most viable solutions, we had additional input from the founding team members and leads.

Discovery

Our team was first tasked with creating a sheltering app, but competition research found several viable solutions for refugees in Poland and Germany already. So, we wondered if we could support these platforms instead.

Expert Interviews

We interviewed the leaders and found a common thread that in the scramble to launch a platform for refugees to find shelter, they had overlooked safety features that were fast becoming essential.

After discussion with the group and weighing up different options, we decided refugee safety was the opportunity to pursue.

Ideation to User Flows

As a team, we ideated on to find a valuable and viable product, slowly developing the first ideas for an SOS-app that refugees could use to quickly get emergency help.

Sharing ideas and ideation sessions on Zoom and Discord, one team member verbalised a user flow that captured the idea.

Sensing the idea was close, I took the writing and visualised it as a user flow, to clarify the meaning to myself and the team.

This helped the team

  • Gain an important shared understanding of what we would try to build
  • Empowering the developer team to start researching the technical implementation
  • Empower the design team to iterating towards a finished design, starting with wireframing.

And the sense of excitement was palpable!

Wireframes to Prototypes

Based on the user flow that the team had defined together, I created the first wireframe flows including

  • Onboarding process
  • Screens for data entry
  • Home screen

This again catalysed the team into more ideation and clarifying questions. We iterated as a team as feedback was shared, and new perspectives were found, arriving in due course at a high fidelity prototype

Crucially, the development team were an active part of the conversation, questioning the flows and providing needed feedback on feasibility and possibilities we might not have thought of.

While other designers on the team concentrated on bringing the designs up to high fidelity, I worked on the onboarding process

Onboarding Illustration and Writing

A crucial component of onboarding new users is winning their trust. I wanted to create a professional looking, illustrative and easy to follow onboarding process that would quickly teach users

  • what our app does
  • who it’s for
  • how to use it

I created vector-based illustrations, experimenting with the words and images until a cohesive flow took shape.

Another unexpected result was the energy boost the team got from seeing the first high fidelity mockups! It provided a glimpse into the future and the product we were creating, which served as important motivation!

Usability Tests

I started running usability tests at this stage, and building a repository in Dovetail of the insights I found, taking action to improve the clarity of the flow through out the sign up process. We noticed bits of text were not being read by users, and were therefore able to highlight important information.

Development

The development process was a winding path as certain technologies were ruled out and new approaches were needed.

I realised late that there was no oversight from the design team during the development process. By the time I was reviewing their work, a gulf had emerged between the code and the designs.

So I needed to sound the alarm and raise these usability issues, which was awkward! I knew I was derailing their timeline, but one must stick one’s neck out for the user!

And thankfully, someone on the dev team heard my whooping and hollering, and heard me out. We quickly addressed the most essential problems, such as

  • resizing on smaller phones,
  • spacing and sizing issues
  • and the emergency contact button that didn’t look like a button.
Before, spacing and flow were awkward, and the text did not match the illustration
After, there was more clarity, better visual balance and a much more recognisable button for emergency use!

Release

We were proud to release our MVP with such a short turn around - less than 2 months!

With a small marketing team and lots of organic sharing, we reached over 1000 users on our day of release, and we levelled out over the next two weeks to between 20 - 40 users per day, most originating in Poland and Ukraine.

Retrospective

It’s always important to look back at your work and learn from successes and mistakes, and for this, I love the Agile retrospective.

What went well?

  • We spoke to experts and people in the field about our concepts.
  • In the design phase, the design led, while the team leads and dev team supported - a really coherent, useful, collaborative process.
  • When the designs were getting lost in the development, I spoke up convincingly amongst senior developers to get important ideas into code.

What Didn’t?

  • No success criteria was set, and no success metrics were set. Little data was captured, so we can’t retrospectively measure anything either. So much regret around this!
  • We didn’t talk to users! There was little appetite amongst the team to interview or run usability tests. I realised late that if anyone was going to do it, it was me!
  • We didn’t do enough to distinguish our product: “unlike <competitor app>, SOS-app does <unique function>.”

What would I do differently next time?

  • Never start a project again without defining success criteria, and working towards measurable goals.
  • If proper research and discovery is to be done, I will need to step up and be the one!

Conclusion

It was an incredible experience to work on this app with such high level people, gaining some valuable new skills, and more importantly, gaining trust in my existing skills.

I learnt I could hold my own with peers from some of the biggest companies in the world.

I was disappointed the team did not want to continue working on the project after the MVP release. And to my regret and disappointment, I realised a few important things.

  • We never created a shared understanding of success before we started.
  • Additionally, there was a high level of burnout in the group, with people coming in after full work days.

As excited as I was to have people to guide me, I also learnt that I need to be the one who steps up and makes sure I (and my team) aim resolutely towards making an impact on our users.

Get in touch below for a chat about design, product and web development.

No strings, just good vibes, excited to hear new ideas!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Made in Webflow