MVP [Minimum valid product] interactive prototype.
Eugenia Basti
UX designer
PPE NEEDED
Redesign the platform that solves the problem of PPE [Personal protective equipment] shortage due to COVID19.
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
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.
#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.
#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.
#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]
Usability testing findings.
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.
#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.
#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.
#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.
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.
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.
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.
#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.
#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.
8
Iterations
34
Screens
2weeks
Duration
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.
#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.
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.
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.
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.