Fighting Global PPE Shortages During COVID-19
PPE Needed aims to address the shortage of personal protective equipment (PPE) during the global coronavirus (COVID-19) pandemic.
PPE Needed is a digital platform designed to support those responding to global emergencies, such as the COVID-19 crisis.
It also provides a global overview of PPE shortages, helping to connect suppliers with those in need.
On our website, organizations and individuals can donate their surplus to frontline workers, offer their services to produce PPE, or request PPE.
This platform serves as a central hub for people and companies willing to help, bridging the gap between available surplus and the shortages reported by frontline workers. It supports coordinated efforts and gives visibility to smaller, more local organizations in need.
​
Problem:
When the second wave of COVID-19 hit, PPE Needed saw a significant decrease in users and listings on the platform.
We hypothesize that by understanding users' needs and pain points with PPE Needed, and addressing them through improved design, we can enhance the platform's performance.
​
Responsibilities:
We are improving the platform's user experience for those who are doing their best to help in this crisis.
​
Tools:
Adobe XD, Photoshop, Loom, Monkey survey, Miro.
After thoroughly defining the process, we initiated our research, carefully gathering the necessary information to ensure a solid foundation for the next steps.
Research | Google Analytics
The first step was to go through Google Analytics data to understand our audience, where they came from, what their goals are, where they had difficulty completing their goals and so much more useful insights.
65% of the Users access the website from mobile device.
60% of the Users are 25-45
70% of the Users land on the website from a social media website.
Most used screen resolution is 375x812
​The bounce rate is 80%
Research | Usability Testing
In order to see the product through the eyes of the user, I conducted a usability testing session to identify the pain points of the user.
In the usability section, we considered three users and developed a variety of questions for them.
The questions were organized into five key areas:
-
Landing page and understanding the purpose of PPE Needed.
-
Donating funds to the cause.Requesting PPE.
-
Contacting for support or funds.Overall feedback and comments.
Landing page
​
-
The explanation of what PPE means was not found, nor in the landing page (where the users expected to find it) nor anywhere else on the website.
-
All three users failed to understand the purpose of the landing page.
-
The function of the "Learn more" button does not match the mental model of the users.
-
The user was frustrated that he had to go through 2 pages and still didn’t find any information on what PPE is, so he would abandon the effort to donate.
-
He would expect the explanation of PPE to be in the landing page.
-
The user found that the page took too long to load.
Ask for PPE
​
-
The field of the delivery address is very confusing.Completing the form took longer.
-
Mandatory fields were missing to point out.The user didn’t receive a confirmation email to let him know that his contact and that information were right and online.
-
The user missed the possibility to make changes in his registration.
-
In the scenario that he got donors from another part, he couldn't find ways to do this change on the page or in the email.
-
Mandatory fields on the forms could make more sense.
-
DonateThe users couldn’t understand the difference between donating money or donating PPE.
-
The donate button was lost in the background; it was not easily spotted by the users.
Donate
Header / Burger menu
​
-
The user assumed that by clicking on the logo, it would lead him to the home page.
-
The header missed a background color and was messing with the content when scrolling down.
-
The social media links are not the most important information on the website; instead, users missed information like the mission and goals of the organization.I
-
n the burger menu, the information is confusing and the hierarchy is poor.
Contact
-
The users didn’t spot the contact email immediately in the burger menu.
-
The design is cluttered there.The users would expect to find the contact form in the footer or at least somewhere on the landing page.
-
The user would expect that a "get in touch" with a hyperlink mail would be better to contact the foundation.
Research | Competitive Benchmarking
Through analyzing the competitors, we identified several key areas where they excelled and where improvements are needed for PPE Needed.
Competitor Analysis Conclusion:
​
-
Competitors have clear and easy-to-use websites. They make it simple to find donation options, and they explain terms like PPE clearly. Their donation buttons are easy to spot, and the website design is well-organized.
​
-
On the other hand, PPE Needed has issues like hidden donation buttons and unclear information about PPE on the landing page. The "Ask for PPE" form is confusing, and contact details are hard to find.
​
-
Competitors also have faster websites and better user feedback. To improve, PPE Needed should make navigation easier, improve forms, and place contact information where users can easily find it.
Research | Existing website review
By reviewing the existing platform of PPE Needed we pointed out the areas of improvement and where the user had pain points during the usability test.
1- Fix the button in the video header for better accessibility.​
​
2- Consolidate icons into the menu or footer to avoid redundancy.
​
3- Reduce the font size in the hamburger menu.
​
4- Adjust the space between sentences for better readability.
​
5- Align icons more effectively in the menu.
​
6- Add the "PPE Needed" box to the landing page for clearer communication.
​
7- Replace or enhance the current landing page, adding sections such as:
-
FAQ
-
Contact floating button
-
What type of PPE is available
-
User reviews
8- Clarify the meaning of PPE on the landing page.
​​
9- Ensure icons match their respective functions.
​
10-Make the "Donate to our cause" button more prominent.
After collecting all the research data we moved to the definition phase
Define | Building Empathy
Based on the demographic information from google analytics, and the main functions of the platform, we set up two personas. We referred to them throughout the entire product development process.
This was a key point to redefine and communicate to the stakeholders who is our target, what are their mental models, and how we can help them reach their goals.
Define | Affinity diagram
​
Managing qualitative and quantitative data can be challenging, so organized an affinity diagram session to categorize our findings. presented the research to a team of 4, and everyone took notes. Afterward, we placed the notes on the wall and grouped them by content.
Define | User Journey Map​
​
Having all the data from my research and especially from the usability test, and the affinity diagram, I defined my high-level steps. Then, defined on a scale of 5, how the user feels at each high-level step, based on the comments of the users and their goals, behaviors, and pain points. Visualizing where the current apps are failing the users helped to focus on finding solutions for the specific pain points.
Define | Information Architecture​
​
The information architecture of this project is relatively simple. Yet it was essential to visualize it, in order to communicate with the rest of the team and the stakeholders the structure of the website.
After defining the structure, we were ready for the ideation phase.
Ideate | Sketchy Wireframes​
​
The goal is to translate the information architecture into clear screen states, focusing on one main action per screen. After three iterations, the final version was clear, and we moved on to the low-fidelity prototype.
.png)
Prototype | Low Fidelity Interactive Prototype
​
At the beginning of the design process, we created wireframes for testing purposes. This was a very useful step to identify the areas of improvement we had and where we failed to meet the user's mental model. After three iterations we have solved all the issues the users encountered.
Test | User Testing
​
At the beginning of the design process, we created a low fidelity interactive prototype for testing purposes. This was a very useful step to identify the areas of improvement we had and where we failed to meet the user's mental model. After three iterations we have solved all the issues the users encountered.
Landing page
​
- The difference between the buttons "DONATE FUNDS" and "DONATE PPE" was not clear enough.​
​
+The users found all the crucial information on the landing page, such as what the site is about, how it works, and what the problem is.
​
+The users felt there was enough information to make them trust the organization.
- The users did not realize that the spots on the map were links and led to a specific request.
​
- It was not clear that after contacting the requester of PPE, the communication happens outside the platform.
​
- They would expect to have filters to select areas rather than having to zoom in on the map.
Donate PPE
Request for PPE
​
- The form was long and displayed all on one page.
​
- Most users didn't spot the information on how it works at the top.
​
- It was not very clear what to expect after the request.
​
+ The form information was chunked, allowing users to visually group the information required.
Header / Burger menu
​
+ The primary navigation was very clear.
​
+ The users could successfully navigate through the pages, and the content of each page matched the mental model of the users.
Test | Design system
​
As mentioned due to the fast-changing covid19 related situation we decided to create an MVP [Minimum vital product] to launch as soon as possible. In a couple of weeks, a lot changed and we felt the urge to wrap it up and deliver our product.
Therefore the design system is not very elaborate. Nevertheless, we provided the developers with all the necessary information to create the website.
Final Design
​
​
Interactive Prototype
What I learned
