top of page

Health and Hygiene

Health and Hygiene is a non-profit organization that believes every living being on earth has a right to healthy, clean, safe and environmentally friendly living. We are a team of caring and enthusiastic donors, volunteers, employees and partners who are determined to make a difference in this world by providing clean water, improving water conservation methods, improving sanitization in developing countries and providing education on healthy living.

Role: Product Designer

Industry:  Health-Tech and Non-profit start-up

Duration: 80 hours | June 2023

Tools:  Figma, FigJam, Optimal workshop, Canva, Coolors, pen and paper

​ HP Elite Dragonfly.png
iPhone 13.png
iPhone 13a.png
iPhone 12 Pro.png
iPhone Xdash.png

Purpose

Health and Hygiene has a robust list of donors that are presently tracked through physical ledgers and spreadsheets. The stakeholders involved with data management want a dashboard to be designed to view this data on a desktop and mobile without a dedicated mobile app. Management is also looking to enhance volunteer management feature by digitizing communication to volunteers about upcoming events which is done manually by calling individual volunteers.

Challenge

Stakeholders who are not tech savvy would still prefer basic spreadsheets or physical ledgers for maintaining data and would not be motivated to automize processes.

Design process

It was important to understand what users think and feel rather than assuming the solution right off the bat. I followed systematic step-by-step design thinking methodology of empathizing, defining, ideating, prototyping and testing to find solution as it highly focuses on understanding user needs  which helps in making designs human-centered.

Empathize

Define

Ideate

Prototype

Test

Design thinking process diagram

I wanted to seek clarity on whether users prefer consuming data on desktop or mobile, whether users have experienced frustration while analyzing and interpreting data at a non-profit organization, and whether users would accept digitizing processes for ease of operation.

Problem

During research, I got below response from the user interviews.

51.5%

Users said they  are not tech savvy but would like to be trained in responsive design operations.

67%

Users said it would be convenient to access company website on mobile.

77.1%

Users agreed that responsive dashboards are easier for data analysis than spreadsheets.

This brought me to two basic problems, how might we help stakeholders use dashboards and other website information on desktop and mobile? and how might we explore ways to digitize feature to search for volunteers, send them event reminders, add new volunteers and view volunteer profile?

Goal

My goal on this project as Product Designer of Health and Hygiene is to design a dashboard that would help stakeholders view information at a glance and to improvise one of their key features pertaining to volunteer management. The work I produce must be easy to navigate, read and understand. It should be simple enough to view and use on a desktop and on a mobile. Users should get relevant, actionable data, allowing the business to track internal metrics.

Research

5779724.png

For this project, I deep-dived into the lives of people who passionately work for improving the health and hygiene for people through this non-profit organization. I interviewed internal stakeholders and understood their thoughts, motivations and frustrations.

Interviewees were from all walks of lives. I noticed many users were comfortable using manual methods of communication but were motivated to get trained on the digitized features. Management teams found  analyzing data as spreadsheets, time-consuming. They wanted to glance at relevant information on daily basis instead of going through details. Administration and operations staff spent lot of time in sending reminders to volunteers through calls and messages. Considering there are many new volunteers adding up as health and hygiene is actively involved in several new initiatives, its important for them to digitize processes for smoother business operations.


 

61222.png

During the empathize stage, user interviews provided a foundation for me in building user personas and discover pain points for my focused user groups of internal stakeholders - both management and back office employees.

Synthesizing this data helped me in deriving problem and hypothesis statements. I analyzed competitors through SWOT and narrowed research findings through affinity mapping. This paved way for exploring ideas, deriving solutions and building wireframes. 

 

User interviews

In empathize stage, I conducted user interviews to understand what users actually thought, felt and wanted, and why? I chose 5 questions - qualitative and quantitative.

Number

3 participants

Duration

25 minutes

Interview style

Structured

Research questions

  • Do you prefer accessing company website on desktop or mobile?

  • What research would you carry out before deciding elements of the dashboard?

  • Do you think its important for non-profits to have a dashboard for data visualization instead of spreadsheets or physical ledger?

  • Do you prefer communicating via calls, texts or in-person?

  • Do you enjoy working on manual processes or digitized?

Understanding the users

My list of users include people who advocate for healthy and hygienic living and want to volunteer for this cause by participating in related events, and stakeholders involved with management of data in this organization.

In the define stage, I conducted thorough user research, including developing personas and user stories.

Synthesizing the data from the interviews, I was able to form two distinct user personas and their pain points. This subsequently allowed me to write definitive problem and hypothesis statements, and formulate their user stories. The user stories helped me understand the problems Mike and Jess faced on their paths. It also helped reduce the impact of my own designer biases, by understanding how the users think and feel though every step.

This new understanding allowed me to recognize roadblocks and pain points to correct, by identifying improvement opportunities. An example of this would be allowing them to share their thoughts, motivations and frustrations regarding routine operations and management activities.

As a result, I was able to hone the idea of designing a responsive dashboard and digitize volunteer communication feature while still keeping manual calling and messaging option intact if needed. 

Personas

RESEARCH SYNTHESIS

Research syn.png

Mike's pain points

Economic

Being a NPO, Health and Hygiene always works on a budget and fundraisers.

Product

Mike needs a dashboard that can provide him with relevant data at a glance on daily basis.

Process

Mike wants the dashboard to be viewable on desktop and mobile for convenience when he is travelling.

Mike's story

Jess' pain points

Economic

Being a NPO, Health and Hygiene always works on a budget and fundraisers.

Product

Jess wants a feature that can ease daily operational activities for her so she can utilize more time in productive activities.

Process

Jess wants volunteer management activities to be eased out so they can send reminders to many volunteers at a time.

Jess' story

Analyzing the competitors

Now that we begin with ideate stage, let's brainstorm solutions to our problem statements. For this reason, I have added SWOT analysis and affinity mapping.
 

SWOT Analysis

Competitive analysis-1_edited.jpg

Affinity mapping

It was a valuable experience to perform research with users from various walks of life. All the participants were co-operative and genuinely answered every question. This process provided valuable insight on the importance of grouping, for the purpose of clarity of thoughts. Obtaining different perspectives from users with varied backgrounds helped in empathizing with their individual requirements. This process helped in recognizing variety of challenges and provided an opportunity to brainstorm on required solutions.

 

During the interview, I focused on questions that provided clarity on what motivates people to use a view dashboard for data visualization in place of physical ledger or only spreadsheets and what information they would like to add to the dashboard. Participants’ answers also helped analyze important information to be added to the volunteer, donations, and events pages. All the parameters that I grouped are as below:

 

  • Motivation: All the users were keen about having a responsive dashboard. They mentioned that relying on spreadsheet alone is time consuming and difficult to monitor information for data visualization.

 

  • Easy navigation: Users mentioned not everyone in NPOs is tech savvy and many stakeholders work outside of NPO as well hence ease of navigation and to be able to promptly access information on the go is crucial.

 

  • Research: Users mentioned they would consider target audience, data size, data relevance, number of volunteers, donors and new events, and tech savviness of the staff before building a dashboard and improvising key features.

 

  • Responsive web design: Users preferred browsing responsive website on mobile for convenience and on desktop for full screen visual.

 

  • Competitors: Users agreed there is a competitor existence in NPO especially at events when every organization is pitching for fund raising to donors about USPs and pricing.

 

  • Dashboard benefits: Dashboards are less stressful and less time consuming. They can display company and employee performance, and external stakeholder information at a glance daily which increases productivity.

 

  • Dashboard information: Users would like to have information like number of resources, resource allocation, timelines, project / event progress, tracking expenses, details of donors and volunteers, company performance, expenses vs donations comparison and how many events have been conducted with their success rate on the dashboard.

 

  • Event reminders to volunteer: Users mentioned volunteer reminders should have a confirmation feature where the volunteers can’t cancel their participation or inform 24hrs in advance to cancel. Some also mentioned reminders can be automated. Some prefer integrated calendars to book events with volunteers which have questionnaires to get a response from the volunteer management team. Some users would prefer a google forum or questionnaire to request for volunteer and match the right volunteer for the NPOs cause.

Challenges

  • Not everyone is tech savvy.

  • Currently the NPO website is not responsive.

  • Some competitors could be more popular with big names for fund-raising.

  • NPO has huge data on spreadsheets and physical ledgers.

  • Data visualization is complex currently.

  • Event, donation, and volunteer management is complex currently.

Opportunities

  • NPOs have a combination of tech friendly and tech non-friendly stakeholders.

  • Some users are enthusiastic about responsive dashboard and website.

  • Users are ready to improvise key features of the website.

  • Users are ready to create new events and more volunteer engagement.

  • Users are confident that designing a dashboard will ease data visualization.

Identifying gaps and opportunities

1. How might we help stakeholders use dashboards and other website information on desktop and mobile?

2. How might we explore ways to digitize feature to search for volunteers, send them event reminders, add new volunteers and view volunteer profile?

Two ideas were generated 

1. Design a responsive dashboard that provides data at a glance on daily basis and addresses the requirement of wanting to view dashboard on desktop and mobile.

2. Provide administrative and operations staff with a separate CTA button for sending event reminders to new volunteers so don't have to call or type message for every new volunteer to send reminder.

 

Initiating product design

In the design stage, I made sure user goals align with business goals while keeping technical considerations in mind. Card sorting activity results provided strong foundation for information architecture - sitemap, user flows and task flows. This was followed by low, mid and high fidelity wireframes.
 

Project goals

Frame 11_edited.jpg

Prioritizing site features

Taking User Personas and project goals into account, I began to brainstorm and prioritize potential app features into four categories: Must haves, nice to have, surprising and delightful, and features that can come later.

Sitemap

sitemap npo.png

Task flows

TF1_edited_edited.jpg
TF2_edited_edited.jpg

Wireframes

Low fidelity wireframes help in quick interpretation and visualization of the product design. My initial thoughts were to make them more detailed but gradually I realized that wireframes at this stage provide clarity on important features and iterating is easier. 

Donation dashboard.png
Frame 82.png

UI Component library

The design components included in this library were brainstormed based on user research data, affinity mapping, accessibility requirement, ease of navigation and to make app visually appealing
 

Accessibility test

I have run an accessibility test for Nail it's color palette as I consider it to be an important element in designing. The color palette has passed the the accessibility test.

UI component library.png

High-fidelity wireframes

Frame 38.png
Donation dashboard 1.png

Usability study

In testing stage, I focused on usability testing parameters, analyzed and prioritized results from the test and incorporated the same in my final design.
 

Usability testing parameters

Number

5 participants

Duration

20 minutes

Type

Moderated

Analyzing test results

Analyzing the data from the usability test helped me identify problems and assess the relevancy of each usability issue. I tested four tasks with the participants and implemented iterations. 
 

Tasks
Employee of Health and Hygiene NPO wants to -
1. Add new volunteer, Jane Doe
2. Search for volunteer, Jane Doe to view her full profile and send her event reminder.

Prioritizing revisions

Changed background color of the tile to white to improve readability and removed bottom navigation as I have already added menu icon. 

Volunteer page1b.png

Final product

Post usability test, the final product comprising of a responsive dashboard and responsive web design was ready for product development. 

Responsive dashboard

iPhone 12 Pro.png

Responsive web design

Frame 35.png

Health and Hygiene journey

Creating a mobile first design did pose few challenges while designing responsive dashboard. By applying design principles, I was able to achieve near to perfect responsive dashboard in lesser time than originally estimated. This made me realize the importance of applying design principles in the real world.

bottom of page