Helping users go ‘Out and About’ safely during the COVID-19 Pandemic.
At a glance
-
1. Discovery
Insights from 5 interviews, a survey and competitor analysis showed a pain points in people going out and about during the COVID-19 pandemic.
These insights were synthesised into a problem statement:
The user needs more information in real-time about crowds and COVID-19 measures so that they can comfortably plan ahead while also being able to relax and have some flexibility. -
2. Design
With the problem statement and persona in mind, I sketched ideas for a solution that allows the user to see what local establishments had space for walk-ins or bookings.
I developed my ideas into a high-fidelity prototype on Figma.
-
3. Testing and Development
I tested the prototype moderated with fellow classmates and unmoderated on Maze to understand better how users interact with the solution.
I gathered feedback and reiterated certain elements to further improve the prototype.
A disappointing night out
The concept of this project was inspired by a night out in London shortly after COVID restrictions had eased. I found it frustrating that you had to book ahead for so many places or you would be stuck with a long waiting time, and I found it concerning that some bars and restaurants were so busy that social distancing was near-impossible.
Project Brief
A design solution that would help people enjoy their outings during the pandemic, while also promoting safety.
The target audience was people who wanted to spend time with their friends and family while also being mindful of their health and the health of others.
Research
Interviews
At the discovery phase of my project, I conducted user interviews via Zoom to get a better insight into the problem, and to confirm it was actually a problem to be addressed.
I interviewed with 5 people. I was most curious about people's experiences and frustrations when they go out for leisure.
Key Questions
Tell me about the last time you went out for entertainment.
Do you always plan ahead on your outing i.e. making bookings?
Since the pandemic, what are your main frustrations when going out?
Interview Insights
-
1
People are concerned about crowds in an establishment and this affects their visiting choices.
-
2
People are busy and like some spontaneity. Therefore, they don’t always book ahead which normally results in long waiting times.
-
3
People in the UK find inconsistencies in contact tracing and other contact-reduced service solutions.
Surveys
To gain some more insight and quantitaive data I distributed a survey with different questions about experiences going out since COVID. I recieved 12 responses with interesting insights.
I included a question with a free text field asking respondents to describe their recent experiences going out. The responses were of particular interest:
Tell me a bit about your experiences on outings surrounding this topic. Try to be specific about the positives and frustrations of going out since the pandemic.
I usually call ahead to make a reservation before heading to a restaurant. As long as the tables are distanced properly and the wait staff is wearing masks I am comfortable.
This one time I found a really good restaurant that advertised outside dinning. The thing is, it was 1hr away. The day I went they had closed the outside dinning, but it wasn’t on their website. They reassured that ppl would be seated far apart, but the restaurant space was crowded and there were so many staff, it didn’t feel safe. I liked that they had outdoor seating, but I wish that they updated its availability and minized human contact
I refuse to go to a place that doesn't offer outdoor dining.
The survey responses also provided quantitative data which validated the extent of the problem space.
The majority of respondents were also worried about COVID security in establishments.
More than half of the respondents visited multiple places at least sometimes
More than half of respondents end up waiting for some time to walk-in at least half the time
What People Said
“If I am walking past a pub and its full to the brim, I cross to the other side of the street.”
— Interviewee No.5
“I often go into a restaurant, and the contact tracing form - the thing designed to slow the spread of the virus - is a communal book and pen...”
— Fellow Student
Defining the problem
Affinity Map
To define the problem I sorted insights and thoughts into sections. This helped me visualise the overarching themes and feelings associated with the problem space:
Long waiting times causing frustration and irritation
Concern/Anxiety for COVID-19 safety
Ease of contact tracing and contact-free ordering
Persona
Based on the research I set up a persona. I referred to her as Lauren throughout the entire product development process.
A persona is a great way to keep the design focussed on the user as it means you can humanise your target audience. I combined the frustrations and needs of the people I interviewed and created Lauren.
Her main motivation is spending time with friends and family in a safe yet relaxed way.
Competitor Research
What’s out there?
Often times Lauren would either call ahead to enquire about availability or chance her arm at a walk-in. Other times, if it's a special occasion, she'd book ahead on Open Table, Google Maps or the establishment's own booking system.
Why isn't it working?
There are many pain points in these processes:
Open Table doesn't carry establishments that don't serve food such as pubs and bars.
Google maps sometimes show 'Busy times' but these are not accurate.
If you want to go to multiple places or have a last-minute change of plans there is not much flexibility.
Contact tracing is rarely a smooth process. It is often separate from the booking.
Refined Problem Statement
The user needs more information in real-time about crowds and COVID-19 measures so that they can comfortably plan ahead while also being able to relax and have some flexibility.
Designing the solution
I brainstormed design implications based off the problem statement.
At a high-level, what would the app do?
The app would display nearby locations to Lauren with information about how busy they are and what COVID-19 measures are in place. Plus, she would be able to book and fill out a contact tracing form from her phone.
The User Flow
The purpose of the app was to facilitate the user in making decisions in the real world. So I mapped out a few user flows that would keep options to a minimum and reduce decision fatigue.
The onboarding journey had to be simple and clear. The details required from the user had to be minimal.
Sketching
Starting the initial designing process with low-fidelity sketch wireframes is a great way to iterate and reiterate the design solution.
This way I do not become attached to a particular design and I can easily move on when I receive feedback and ideas.
Key Elements
Map - I decided the map was an easy and quick way for a Lauren to identify places near to her location.
Header and Tray Navigation - These are well-established design patterns that Lauren would understand and have used before. Plus, they provided space for navigation and branding that wouldn't cover up the key content in the map.
Location Copy - I decided to save unnecessary screens and use overlays to display copy for the restaurants and bars listed on the app. This means the user could easily tap in and out of each location.
Most users would complete the task of booking by searching on the map rather than switching to list view.
User Testing
Once I had wireframes ready, I launched into remote user testing. This was my favourite part of the process as I received useful feedback.
Aims
Observe what elements the user is naturally drawn to.
Understand the user's hesitations and pain points in the user flow.
Method
I initially used moderated user testing, remotely via Zoom. I asked participants with varying levels of technical competency to sign up to the app and start using it to make a booking.
I also used unmoderated user testing via Maze. This tool is great for seeing which paths users took to complete the task and the heat maps which showed where the users tapped on the screen.
Insights from Testing
I organised user feedback and my observations into different categories. This helped me to plan reiterations. The key takeaways were:
Navigation -
The navigation was confusing to most users. It was unclear what page you were on and what the functionality of a lot of pages were, especially the booking completion page. The sizing and spacing of the navigation elements was unusual too.
Map -
Upon landing on the map screen, users would hesitate and be unsure what the functionality was. One user noted that he found it annoying in the map view that he had to open and close each pin to find out the capacity of each location.
Content -
Users expressed disappointment that the app didn't have much content around COVID-19 and staying safe.
Re-iterations
-
Map
Firstly, I adjusted the UI so that the map pins would display the busyness of each establishment on first look. For this I used a traffic light system.
I also added an onboarding process to quickly explain the elements on the map view so that the user can get started straight away.
-
Navigation
This was the hardest part of the project. I sketched and wireframed 7 iterations of the header and tray navigation.
I kept some basic principles in mind:
Keeping the logo in the header
Adding back buttons to the header once Lauren reached a stage where they could change their mind or reached several layers into the information architecture.
Moving the filter and list view button to the header in the 'discover' screens to prevent content being hidden.
Filling in the icons when you land on their respective screens so Lauren could easily see what screen she is in
Readjusting the icons on the navigation to conventional sizes.
-
Content
The message of the app was centered around safety while enjoying time out and about. Thios was a key user need. So I wanted to incorporate more messaging about staying safe during the pandemic.
I included a reminder to bring a mask in the booking completion screen.
The Final Prototype
I created a high-fidelity prototype in Figma which can be viewed below.
This prototype was presented to my classmates for feedback.
Other Feature Ideas
I also considered and designed notifications that the app could push to users in order to promote COVID safety.
They would be adjusted according to local rules and restrictions during the COVID-19 pandemic.
Feedback
“"Very useful app, especially in this historical moment. The different colours of the pin is a very good idea to understand how busy a place is. This idea should be already live if not implemented somewhere!"
— Classmate
“I like the focus on a "real time" solution; the alerts are a fantastic and helpful idea, especially if location-based...like how you can get Apple to remind you if you are "leaving" a place to put on your mask. I appreciated your commitment to onboarding for the prototype”
— Classmate