THE
COMPANY
PPE Needed aimed to fight the shortage of personal protective equipment (PPE) during the global coronavirus (Covid-19) crisis.
THE
TEAM
My Role - UX/UI Designer
Eugenia Basti - UX/UI Designer
Tanin Kavosi - UX/UI Designer
Atieh Hamidi - Developer
Fernanda Tourinho Santos - Business Dev.
Dunya Ressang - Co-Founder
THE
METHODS
Market research, Interviews, Surveys, User flow, Wireframes, Site Map, Competitive Analysis, Affinity Mapping, Hi-Fi Prototypes & Agile Development.
Tools: Google Forms, Miro, Adobe XD, Photoshop, Google Slides, Survey Monkey.
TIME
FRAME
Sep 2020 - Feb 2021
PROJECT
OVERVIEW
The PPE Needed platform functioned as a central point for people and companies willing to help with the supply of personal protective equipment (PPE), filling the gap between available surplus and shortages reported by frontline workers to support these coordinated efforts and give visibility to smaller and more local organisations in need. However, when the second wave of Covid hit, PPE Needed had a huge decrease in the number of users and listings on the platform. We started by understanding users’ needs and pain points.
PROBLEMS &
CHALLENGES
Finding out what was the main problem causing the decreasing number of users and PPE listings in the platform. We had an assumption that, because of the bad experience navigating the platform, the bounce rate was high. The page took too long to load, the main map on the home page wasn't functioning properly, and it was hard to find clear information about how to donate or have access to PPEs.
THE
APPROACH
1. Conducted research: This involved gathering information about the target audience, their needs, and preferences. The information was obtained through user surveys, interviews, focus groups, affinity diagrams, and analytics.
2. Identified the problem: Before starting we identified the problem that needed to be solved. This involved understanding the needs of the target audience, identifying user pain points, analysing the competition, and conducting a heuristic analysis of the existing platform.
3. Defined the scope: Once the problem was identified, we defined the scope of the project. This involved determining the goals, the features that needed to be included, and the resources required to complete the project.
4. Created personas: Personas represent our target audience. They were based on the data collected during the research phase and helped us to understand the needs and preferences of the users.
5. Create wireframes: we created wireframes to structure the product and determine the placement of content and features.
6. Design prototypes: After reviewing the wireframes, we moved to the high-fidelity prototype to test the functionality and usability of the product.
THE
OUTCOME
Working in collaboration with healthcare providers and suppliers was crucial in gaining a comprehensive understanding of the main issue with the platform. During the evaluation process, we examined the pain points and made significant improvements to address them. However, we ultimately reached the conclusion that the platform no longer met the market's needs. Healthcare professionals had successfully secured their primary supplies of personal protective equipment (PPE), and the general public had easier access to PPE through various channels such as physical stores, online shops, and pharmacies. Consequently, the urgency for our platform decreased, leading to a decline in its popularity. As a result, PPE Needed made the decision to shut down its service.
BEFORE
WEBSITE
*Video of a user, during navigation test.
FINAL RESULT
MOBILE
See the full case study, with detailed information, below:
PROBLEM
DEFINITION
How might we improve the platform navigation so the bounce rate is reduced and both existing and new users stay longer on the page and interact more with what the platform has to offer?
The IBM Design Thinking Process
Human-centered framework for moving from design to operations.
THE DESIGN
PROCESS
We used the design thinking process from IBM for our project development.
Why the IBM Design Thinking process?
The UX team joined when the platform was already live. Our objective was to define PPE Needed pain points and find out if, after six months of Covid, the PPE shortage problem still needed solving.
The IBM Design Thinking process helped us craft the business outcomes and define the scale of PPE Needed as a non-profit organisation. We brought together what was desirable from a human-centered point of view, also taking into consideration if the project was still technologically and economically viable.
The steps of the IBM Design Thinking process are:
1-Understand and develop empathy for users.
2-Explore the process of generating potential solutions for your users' problems.
3-Prototype ideas as concrete experiences.
4-Evaluate and decide whether to move forward with an idea or generate alternate solutions.
We also have three main focuses that we used together with the four steps:
A-Invest for Market Outcomes: Focus on big problems and outcomes for users, not only features.
B-Collaborate, Align, and Engage: Playbacks help to align the team, with the stakeholders, and clients around the user value that we will be delivering.
C-Envision the User Experience: Help the team in designing experiences for real users.
PPE NEEDED PLATFORM
GENERAL ANALYTICS
84.91%
The bounce rate.
56 Sec.
The average time that the users stay on the website.
10.8%
Returning users.
56.09%
Of the users are from the Netherlands.
The team analysed the data from Google analytics, from 1 Sep 2020 to 6 Dec 2020.
67.1%
Of users, accesses were from mobile, 29.9% from desktop, and 2.9% from tablets.
8am-6pm
Peak time, on Sunday and Wednesday.
70.4%
Of the users come from a social media network.
36.44%
Of the users are
Android users.
51.3%
Of the users are female.
37%
Of the users are between 25-34 years old.
3 months
The last months PPE lost returning users, and also had a decrease in the number of new users.
HEURISTIC
EVALUATION
After going through Google Analytics, we reviewed the Platform and its functionalities. Many areas for improvement, pain-points, and design problems were found.
LEAN UX
CANVAS
We continued the project with the Lean UX Canvas tool to figure out the current business scenario and user needs. It structures the process of converting our assumptions into some critical hypotheses, that we then validate via research.
COMPETITOR ANALYSIS & BENCHMARKING
After going through the platform analysis and defining the current business scenario and users' needs, we looked to our competitors to gather insights and identify new market opportunities.
In this qualitative research, we focused on the top 3 competitors (PPE Dashboard, Project N95, and Get Us PPE) - and searched for quick wins that we could potentially implement to then evaluate if they would make PPE Needed more successful in achieving its goals.
Our objectives with this analysis were:
1-Identify the UX factors that will drive PPE’s goals.
2-Propose ways to improve these UX factors.
After this analysis, we decided to:
- Make top navigation fixed, with visible navigation options.
- Add a clear explanation at the very first part of the landing page stating what is PPE and what they do.
- Use graphics/images to illustrate the different types of PPEs available for the users.
- Add a filter option in the world map to reduce loading time.
- Add the world map in a dedicated area to optimise the platform loading time.
- Introduce a FAQ and Contact Us.
- Clear CTAs Buttons.
- Add a dedicated area for the blog posts, make it visible and easy to find.
QUANTITATIVE RESEARCH & SURVEYS
We needed to know more about our users: who they are, what they want to achieve using our platform, and what they think about PPE.
So we developed two user surveys that were later analysed to validate qualitative findings. The first was sent to general users (38 participants) and the second was sent to frontline workers (8 participants). We used Survey Monkey to publish our questionnaire.
Key findings from users worldwide
68.42%
Of the participants think that the shortage of PPE is currently an issue because of Covid.
54%
Of the participants would be willing to donate to Covid causes somehow.
52.63%
Prefer to donate to a cause that they relate to, and 23.68% prefer to donate to a well-known organisation.
34%
Of the users search for keywords when they want to find an institution to donate to.
57.89%
Prefer to be approached by charities through social media platforms.
73.68%
Of the participants prefer to make a one-off donation and not have continuous engagement with the organisation.
Key findings from frontline workers worldwide
100%
Of the responders have PPE available in their organisation/work.
50%
Of them think that there will be a shortage of PPE in the next 6 months.
87.50%
Of the front-liners workers don't rely on PPE donations to be able to work.
12.5%
Rely on private PPE donations or funds designated to buy PPE. They are in charge of supplying their PPE.
71.43%
Of the workers need masks the most, followed by isolation covers and gloves.
USABILITY TESTING OF THE EXISTING WEBSITE
We conducted a usability test of the existing platform with 3 different users. The purpose of this test was to identify users' pain points while navigating the page. The results weren’t good, and we ended up with the users frustrated and unhappy with the overall experience.
Summary:
There were some perceivable trends when we analysed the test from these 3 users:
- Most crucial was that the purpose of the website (what it was about) was not clear, so elements such as the map and numbers made no sense to them.
- Users asked for more information on the Home Page.
- Some confusion happened on the difference between donating money and donating PPE. Although, once they went through the donate money navigation, all agreed it was easy and quick to complete.
- Another concern was in the interaction between the platform and the users. Lack of credibility because the terms and conditions were not accessible, the contact information was hard to find, and no confirmation after posting a listing (or ways to change them).
Users quotes from the navigation test
“I can't understand what is the main purpose of this page.”
“This website is taking too long to load. I wouldn't dedicate more time to browse it.”
“The process of filling the forms on the website is very confusing.”
AFFINITY
DIAGRAM
Because we gathered so much data (pain points) from our users utilising all these techniques, the team needed to make sense of it and organise it into topics. Our prioritisation criteria involved both the number and severity of issues and also how easy it would be to fix them.
The findings from the affinity diagram in clusters, divided in 7 topics:
Header
- Create a 'burger menu' for the mobile design.
- Items from the 'burger menu' will be displayed on the header for the desktop design.
- Pin the header when scrolling down the page.
- Create a proper home page.
PPE Needed logo should lead the user back to the home page.
Home page
- Relocate the news from the blog to a proper page on the website.
- Showcase the problem that PPE Needed is trying to solve, and how.
- On the PPE Needed page, increase the visibility on how 'process / donations / request more' work.
Navigation Bar
- Redefine and reorganise the website navigation.
- Create a navigation menu: 'burger menu' for mobile and a header for the desktop.
- Create a FAQ section.
- Create font hierarchy.
Gain Trust
- Include a testimonials section.
Display partners' logos in a more visible way.
How can "PPE Needed" be seen as reliable?
World Map
- Improve the map format: Showcase with colour (or colour intensity) the areas that PPE Needed has helped deliver PPEs.
- Add a filter option in the map to better display donations from requests.
- Redefine the colour scheme of the "Request" and "Donate" buttons and map.
- Redefine the size and position of the map on the page to reduce loading time.
Donations
- Display with numbers, or another type of graphic, the impact of the donations from PPE Needed as a way to increase users' confidence and trust.
- Make "Donations funds" more visible and easy to identify on the Home page.
Graphics
- Redefine the icons used in the "Request PPE" and "Donate PPE".
- Use graphic images to showcase the types of PPE that PPE Needed works with.
THE USER PERSONAS
With all the data that we gathered during the research, we created two representations of our key audience.
They were based on our qualitative and some quantitative user research and web analysis. These personas represent the largest user group of our website at that moment and express their specific needs and expectations.
EMPATHY
MAP
We created an Empathy Map to summarise the users' perception of PPE Needed and their feelings towards the cause. This increases our understanding of our user base.
USER JOURNEY MAP
To display the users’ experience across the different areas and features of the website, we employed the User Journey Map. The overall sentiment and feedback was negative, with just two steps having a more neutral perception.
INFORMATION
ARCHITECTURE
Our research showed that users were lost when navigating the platform. Elements (such as contact info) were not where they expected them to be, and the session titles did not match the content they displayed, creating even more confusion. The content was fragmented and the flow was unintuitive, with many different pages talking about the same topic.
To address these problems, we proposed a new information architecture for the platform. Our objective was to make the navigation much more concise, simpler and understandable for the user.
THE NEW
DESIGN
Following our discoveries and proposed changes, including a new information architecture, we redesigned the website. We focused on the mobile version, as the majority of our users utilised mobile devices to access PPE Needed.
This design was tested by several users, and their perception was a lot more positive. Users mentioned that it was intuitive to navigate, that important information was easy to find, and that it was aesthetically clean and pleasing.
NEXT
STEPS
PPE Needed was created to help supply people with PPE during the first wave of Covid-19, but the business side of it was not set up to support it for the long term. When the second wave of Covid-19 hit, the team at PPE Needed noticed that the engagement and traffic on the platform were drastically lower than on the first wave.
This was when the UX team got asked to research and understand what was happening and to suggest a course of action. After the research, with the results we collected, PPE Needed did not have a way to raise enough funds to continue, as users did not like donating regularly or donating to keep the service running, preferring one-off donations that went directly to the cause.
More critically, PPE Needed lost its problem-solution fit at that time. PPE became largely accessible and cheap throughout the countries we were covering during the second wave of Covid-19, so the major pain to be addressed was minor to non-existent.
Nevertheless, we built the mid-fi prototype for the mobile version to showcase what the platform could have looked like and to test if our design solutions were effective, even though we knew that the project was coming to an end and the platform would be shut down soon.