MVP [Minimum valid product] interactive prototype.
Client: PPE NEEDED [NGO]
Role: Leader of the UX team
Prototype [Low fidelity]
MVP Final Prototype [High fidelity]
Documentation for developers
Project time: 2 weeks
Tools: Adobe XD, Photoshop, Loom, Monkey survey, Miro.
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.
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
#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.
#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]
#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.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.
#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:
Parking lot ideas
#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.
#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.
#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.
#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.
#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]
#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.
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.
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.
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.