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.
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.