A web app to easily access and track the hospitals’ equipment repair and supplies demands, and connect them with the volunteers during the COVID19 crisis.
Background
HospitalAid is one of the projects in Helpful Engineering, a community of volunteers who design, resource, and execute projects to help people suffering from the COVID-19 crisis worldwide.
​
The HospitalAid team consists of volunteers from all around the world, working together to come out with a solution to provide easy access and tracking of hospitals' need for equipment repairs and supply demands, then connect them to the volunteers.
Goals
-
To design a mobile-first website for the people who work in hospitals to be able to list and publish the repair and supply demands
-
To design an additional feature for volunteers to access the data so then they can connect themselves with the hospitals.
My Roles
UX Designer.
Engaged in the process of the design, from defining the concept to creating low-fidelity wireframes.
Tools Used
Pencil & paper, Figma
Design Process
Ideation
Problem Statement
User Story Journey
Interaction Design
User Flow
Wireframes
Low Fidelity Prototype
User Interface Design
Brand & Identity
High Fidelity Wireframes
Responsive UI Design
Development
Zeplin Handover
1. Ideation
The initial ideation process had already been done when I joined this project. The problem statements are reflected in the presentation slides below.
From the information given in the presentation slides, we started to brainstorm and created a user story map. to gain more understanding of what users will be able to do with the web app we are designing.
​
There are two users' point-of-views in using the web app: users who work in the hospitals (also known as clinical engineers), and users who want to help (volunteers, donors, and suppliers).
2. Interaction Design
We then translated the user story maps to a user flow and sketches to visualise the very first look of the web app.
User Flow
Sketches
Low Fidelity Wireframes
3. User Interface Design
We had a Graphic Designer who was in charge of the branding process and a UI Designer who translated the wireframes from low to high fidelity.
​
These are a few keywords used to define the brand identity:
helpful - community - kind - easy - global
Mobile High Fidelity Wireframes
Desktop High Fidelity Wireframes
4. Development
Once the UI design is finalised, it was then handed over to the development team to be built using Zeplin.
​
The next step is going to be running the usability testing when the prototype is ready.
Reflection
This is one of the most valuable projects I have been involved with. Working together with other volunteers from all around the world to help people who are affected by the pandemic is such a wonderful experience.
I would like to thank everyone in the team for making me feel welcomed and it is amazing to get to know you all.
Other Case Study