An administration dashboard for non-profit organizations to track their volunteers and people in need.
REACH4HELP is a platform that aims to help people in need connect with access to volunteers worldwide. The founder wants to see the insights and the analysis of requests for help and track the volunteer hours. As a product designer, the task was to design the dashboard for the administration team so that they can see the requests and volunteers' insights through a web-based dashboard.
I worked as a volunteer Product Designer and was individually in charge of the whole end-to-end design process from UX research to UI design: Stakeholder interview, prototyping, usability testing, and UI Design.
Figma, Miro, Notion
“How might we create an informational and analytical dashboard so that the organization can connect with volunteers and people in need?”
The dashboard is tough to design because it's a B2B product, and I have never had any experience designing this type of product. The problem is that I could not follow the common UX Process to design an analytical dashboard. I was nervous but then started googling for some online research about the dashboard.
What is an ideal dashboard?
Every businesses and organization want to see data, facts and analyze them so they can use those synthesized insights to form decisions. Therefore, an ideal dashboard needs to meet at least 2 requirements: Informational and Analytical.
A new UX process for a productive dashboard?
Now I've already known what an ideal dashboard means, so how about designing it? After researching further about the methods, fortunately, I have read an article by Daniel O'Sullivan, 6 steps to designing better dashboards. In the article, Daniel wrote about productized application dashboards, which includes 5 steps of application distilling. This process is about pulling the key functions (navigations, features, and metrics) from the creators and users of an application to form a blueprint to design a productive dashboard.
“Designed correctly, a dashboard increases productivity for all users.”
Research & Strategy
As a newly-joined product designer in the design team and I had to work directly with the executive team (including the founder and engineering lead), I need to know about user needs, business goals, and technical limitations of the organization to guide my design decision. A stakeholder interview is a way to do so.
I carried 2 stakeholder interviews, one with the founder, and the second with both the Founder, the Outreach Lead, and the Engineering lead. By doing that, I had more understanding of, not only the nature of the organization model but also the requirements of the dashboard and technical constraints that our team had. I collected stakeholder answers and then grouped them into 3 categories (Navigations, Features, and Metrics).
Our success metrics
Through our ideation explorations, we also set success metrics for our project which helped us scope down.
How the dashboard can help us achieve our goal
Distilling step 1
I opened a large whiteboard on Miro and write 3 words across the top: Features, Navigations, and Metrics. I used 3 sticky notepads in different colours. Have them list out everything the application does in each of those categories, and then place each one on the board under its respective heading.
Distilling step 2, 3, 4, 5
I then drew a large board then place the sticky notes on it (navigation to the left, features and metrics in the main area). I worked on this step over and over again on a daily basis with the stakeholders using the Card Sorting method to make sure we get the best version that met our success metrics and technical requirements:
Wireframing and High-fidelity prototype
1. An interactive map to coordinate all requests and volunteers
2. Analytics of Requests (People In Need)
3. Analytics of Volunteers
What I'm going to do next