Eugenia Basti
UX designer

PPE NEEDED

Redesign the platform that solves the problem of PPE [Personal protective equipment] shortage due to COVID19.

Image alt tag

MVP [Minimum valid product] interactive prototype.

Client: PPE NEEDED [NGO]

Role: Leader of the UX team

Deliverables:

  • Research analysis

  • Definition

  • Prototype [Low fidelity]

  • Testing

  • MVP Final Prototype [High fidelity]

  • Documentation for developers

Project time: 2 weeks

Tools: Adobe XD, Photoshop, Loom, Monkey survey, Miro.

The PPEneeded case

The PPEneeded case

Introduction to PPE NEEDED

PPE Needed is a non-profit organization that aims to fight the shortage of personal protective equipment (PPE) in countries affected by the current coronavirus (COVID-19) crisis. Through the platform on their website, organizations and individuals can either donate their surplus to frontline workers or request the much-needed PPE. This way, crucial materials are redistributed to those who need them most.

However, in the second covid19 wave the requests and donations were decreased and this raised the question of how the existing platform could be improved.

The design process.

The design process.

#1.0 Research

As I believe research is very crucial to a successful product we focused a lot on this step. The research methods we used were the following:

  • Analysis of google analytics data

  • Usability testing on the existing platform

  • Competitive benchmarking in similar platforms

  • Review of the existing platform

Google Analytics insights.

Google Analytics insights.

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

Usability testing.

Usability testing.

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

Tools: Loom [for screen and camera recording]

See the full usability testing video.

Usability testing findings.

Usability testing findings.

Competitive benchmarking | project95.

Competitive benchmarking | project95.

#2.3 Research | Competitive benchmarking

At this point, the team aimed to understand the good practices of other similar platforms. In this way, we analyzed what to avoid and what to implement in our design.

The platforms we analyzed were the following:

Existing website review.

Existing website review.

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

#2.0 After collecting all the research data we moved to the definition phase.

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

Affinity diagram session.

Affinity diagram session.

#2.2 Affinity diagram

Handling all the qualitative and quantitative data of the analysis can be challenging. For this reason, I decided to facilitate an affinity diagram session to help us categorize our findings.

I gathered a team of 4 people and presented my research findings. During my presentation everyone took notes and at the end, we stuck them all to the wall. Next step was to start grouping the post its according to their content. We ended up with the following groups:

  • Header

  • Map

  • Primary navigation

  • Donations

  • Icons

  • Gain trust

  • Landing page

  • Parking lot ideas

Affinity diagram | focus groups.

Affinity diagram | focus groups.

#2.3 User Journey Map

To understand how customers interact with the service I decided to create a 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, I 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.

Download User journey map.

User journey map.

User journey map.

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

Information architecture.

Information architecture.

After defining the structure, we were ready for the ideation phase.

#3 Sketchy wireframes

I usually start the design process with sketchy wireframes. This is the way I iterate through many design options quickly.

The main purpose of this step is to quickly and intuitively translate the information architecture into screen states. We made sure that each screen focuses on one main action, that is highly prioritized to help the user identify the action he/she is required to take.

It took three iterations of the sketchy wireframes but after the final version, there were no more doubts or questions before moving to the low fidelity prototype.

Sketchy wireframes.

Sketchy wireframes.

Low fidelity interactive prototype.

Low fidelity interactive prototype.

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

Usability testing.

Usability testing.

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

Tools: Let's view [for screen mirroring], ScreenRec [for testing record]

Usability testing insights.

Usability testing insights.

#6 Design system

A 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 much elaborated. Nevertheless, we provided to the developers all the necessary information to create the website.

Design system.

Design system.

8
Iterations
34
Screens
2weeks
Duration
"You managed to change our perspective on the importance of UX in creating a successful service.
Stakeholders of PPEneeded organization quote.

MVP [Minimum valid product] interactive prototype.

Check my interactive prototype!

We created an MVP interactive prototype in order to test our solution and iterate. After several improvements, we concluded with the following structure.

In order to create an interactive prototype, we focussed on the following specific flows.

  • Donate PPE

  • Request PPE

This is demo content.

PPE NEEDED

#7 What I learned

Lead a team of designers

It was very educating to have the role of the team leader. I learned how to organize the workload and delegate to the team members, as well as communicate our progress and next steps to the rest of the team leaders and product owner.

PPE NEEDED

Measure success

Regardless of how big or small a project is, it is essential to define in the beginning what are the KPIs. Despite the conclusion of this project, the fact that we defined success measures from the beginning, brought the objectives to the forefront of decision making.

PPE NEEDED

The need to prioritize

Dealing with a project that was greatly affected by covid19 related factors, was complex because of the fast changes in our goals and user's needs.

Priority was a big factor as we had to deliver fast solutions to problems that were changing in directions that were out of our control.

PPE NEEDED

The need to reassess and adapt

Eventually, the organization didn't adapt fast enough to the new demands and problems covid19 created. Lack of funding eventually lead to the closure of PPEneeded organization.

The big learning for me was to approach this kind of business case critically. If something goes the wrong direction or is not evolving fast enough to catch up with the needs of its users then we should get a step back and assess the situation. Ask ourselves: What problem are we solving, How do we know this problem exists? How are we solving the problem, How we can improve?

If we can't answer the above questions then maybe we should think of alternatives to repurpose the organization's goal.