Data Dashboard
A data managing tool for a non-profit organization
Project Overview
Thrive DC is a non-profit organization in Washington, DC, assisting vulnerable individuals. They require an upgraded database solution to enhance their operations. This is a real organization however this case study was intended for UX and UI practicum only.
Role
UX Researcher | UX/UI Designer
Scope
80 hours
Tools
Figma | Whimsical | Canva | Maze
SUMMARY
The Problem
Thrive DC requires an upgraded database solution to enhance and organize their operations.
The Solution
a MVP (Minimum Viable Product) data dashboard that assists team members in managing their donations, volunteers, and events.
Who are the potential users?
To begin this project, I conducted a questionnaire with people who have experience in managing data. The goals were to:
-
Discover who our target audience is and their pain points, wants/needs.
-
The use and importance of data collecting and dashboards to further ground my knowledge in the function of a data dashboard
Conclusion of findings...
-
Our target audience is adult professionals.
-
Data dashboards are tools for businesses and business professionals to simplify large amounts of data. People find it important that dashboards are accessible and easy to understand
Understanding the Market
Next, I analyzed and compared other data dashboards to discover the type of content that belongs on dashboards.
Key Findings
-
Design patterns I should consider such as minimal UI elements, ample whitespace, strategic information architecture, sidebar navigation.
-
Insights on what metrics I should avoid such as hidden and unnecessary features, information overload, and missing features on mobile view.
1 on 1 Research Interviews
How can I design a dashboard that provides the users at Thrive DC, with the right information and features? In order to answer this question, I needed to gain insights from real data professionals. 3 Participants were asked the following question:
"Tell us how dashboards can help you when interpreting data results?"
I concluded that showing users information that they need to see (including graphs and numbers) while avoiding overbearing information architecture which will contribute to a successful data dashboard for the team at Thrive DC.
DEFINE
What's important to the team at Thrive DC?
Thinking back to their mission, "to strive to be a one-stop shop in Washington, DC providing vulnerable individuals with comprehensive services to help stabilize their lives." In order for the porduct to successfully demonstrate that, I believed that the following aspects will have to be demonstrated in the design:
-
Community
-
Donations
-
Volunteers
-
Events
-
Organization
User Perspective with Empathy Mapping
Based on the research findings, I believe this is what a general user would look like for the data dashboard.
Sitemap
Emerging into the design phase, I then mapped out Thrive DC's navigation and information architecture.
User Flows
Follwed by mapping out the main user navigations. Keeping in mind that they need to be short and easy to navigate.
DESIGN
Key Dashboard Features
Based on Thrive DC's 3 main functions, the features include the following:
Donations
-
Search for a donor to contact them with a thank-you note
-
Check how much money has been donated, with filters
Volunteers
-
Add a volunteer as a new contact
-
View a volunteer profile
Events
-
Create an event
-
Request volunteer help for a specific event
Desktop Wireframing
The wireframes introduced a clean and minimal layout. I've also implemented what a volunteer or donor's access would look (and function) to demonstrate that connection with them and the Thrive DC team.
In the wireframes some aspects were iterated, as you will see in the high fidelity mockups.
UI Kit
Since this dashboard was designed for Thrive DC, I mostly stuck to their brand's typography, color palette, icons, etc.
High-Fidelity Mockups
After applying the UI, the design was finally coming together. Which was definitely one of my favorite aspects of this case study!
TESTING
Is it Usable?
The main goal for testing was to enable users to navigate the site and user tasks with ease. During this time, I also reached out to Thrive DC team members for their insights!
Method
-
Maze (Remote Testing)
-
Recruitment via Discord
Participants
5 total
Tasks
-
Check Donations
-
Give a Donor a thank you
-
View a volunteer profile and add them as a contact
-
Create an Event
Metrics
-
Success Rate
-
Error Free Rate
-
Written Feedback
Test Results
Overall, my final design has great usability prospects with room for improvement.
Test Interpretation & Priotization
After testing, I was able to Pinpoint areas that needed revision and successful areas that link back to our project's goals and user wants/needs with Affinity Mapping. There were 4 revisions made.
Final Design & Project Reflection
Check out the final prototype and my final thoughts as this case study comes to an end!
Conclusion & Positioning
This design not only demonstrated a solution for the Thrive DC team members but in helping me get an idea of what it means to design for non-profit organizations.
The current solution
To provide users with information that they need to see and keep the features relevant to Thrive DC's services, and community.
What makes it work?
The design demonstrates this solution by utilizing common design patterns, minimal aesthetics (with a touch of my personal UI taste), and quick task flows.
To put into context
Dashboards are not fun! But professionals everywhere need such tools for whatever their job demands. The Thrive DC team can now have a platform that not only organizes their data, but has a reach to their donors volunteers, and to each other.
Lessons learned
-
Always keep design files in a folder to help with organizing and easy location.
-
Note-taking through-out my design process will help me recall my thought process.
-
Designing a responsive data dashboard would require further development & testing.
-
Never be afraid to reach out to the organization's team members for user testing.