Reach4Help Dashboard

An administration dashboard for non-profit organizations to track their volunteers and people in need.

Summary

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.

Role

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.

Tools

Figma, Miro, Notion

Timeline

Ongoing

THE CHALLENGE

“How might we create an informational and analytical dashboard so that the organization can connect with volunteers and people in need?”

Problem Space

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. 



  1. Informational: Shows data and facts.

  2. Analytical: Based on data and facts, the dashboard analyzes this information and offers recommendations for solving a problem or making a business decision.

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.”

Daniel O'Sullivan

THE PROCESS

Research & Strategy

Stakeholder Interview

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).

stakeholder-interview

Our success metrics

Through our ideation explorations, we also set success metrics for our project which helped us scope down.
 

  1. The number of completed requests increased across regions.
  2. New volunteers participate in

How the dashboard can help us achieve our goal

  1. Coordinate all requests and volunteers from an interactive map
  2. Track status of requests and take admin action for requests that need it
  3. Monitor volunteer performance and reviews from people they’ve helped

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.

Artboard-1

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:

Screen-Shot-2021-02-04-at-10.56.44-AM
Screen-Shot-2021-02-04-at-10.57.17-AM
Screen-Shot-2021-02-04-at-10.57.51-AM

THE SOLUTION

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

REFLECTIONS

Key Takeaways

  • Communicating with the stakeholder is the best way to keep us on track.
    Sitting down with stakeholders is the perfect opportunity for me to get to know the people working behind the scenes, defining the goals, establishing milestones, and prioritizing tasks together. Stakeholder interviews are beneficial for team communication, and it guides the flow of our entire project.

  • There is no universal UX Process.
    Different projects require different approaches because every UX process will depend on the type of product you’re designing. This is a lesson I learned from the beginning of our project. Designing a dashboard is a bit different from other apps because it requires an understanding of a business's nature and the priority of the data displayed on the dashboard. 

What I'm going to do next

  • Build a Design System for the organization.
    As we finally moved to the stage of auditing the design before bringing it to the engineering team, I am currently working on building a design system for our platform, to make sure that our design is consistent, scalable, and follow the style guides.

  • Developer handoff.
    The development of the website will take place in late February.
window.onscroll = function() {myFunction()}; function myFunction() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("progressBar").style.width = scrolled + "%"; }