.svg)
.svg)
Left Coast Animal Rescue is a non-profit dedicated to finding forever homes for dogs and cats in the Santa Cruz, CA area. Adoptions have increased during the COVID-19 pandemic, which motivated the organization to create solid adoption processes and a supportive community of volunteers. Donations are increasing and community events will be doubled next year. The organization must transition from paper ledgers and simple spreadsheets to a more robust tracking system.
Design a responsive dashboard to help the non-profit view meaningful data at a glance from anywhere
Create a new logo and company branding that represents the organization’s laid-back yet determined-on-a-mission mood
Research was conducted to uncover the wants, needs, motivations, and frustrations of users. The observations and insights will serve as the foundation for future design decisions. I focused my efforts on understanding users' opinions about dashboard design trends, and non-profit management. Before diving into the research I developed a research plan outlining the goals, assumptions, and methodologies used.
Explore wants, needs, motivations and frustrations of dashboard users
Understand how non-profit organizations utilize dashboards internally
Determine how to organize data to be most effective/efficient for users
The organization has never incorporated a dashboard into its internal processes and will rely on the research gathered
All Left Coast Animal Rescue employees and volunteers will utilize the dashboard
Secondary research to learn about existing conditions
Competitive analysis to research direct and indirect competitors
User interviews to understand how dashboards are used, and what features a non-profit organization may benefit from
Market research helped me get a sense of what I already know and don't know, who the audiences might be, and currents trends. Since my goal was to design a dashboard for non-profits, I decided to focus my secondary research on dashboard design and non-profit management.
Organizations make business decisions based on key metrics, such as donations and revenue/expense ratios.
Employ a slim administrative staff and rely heavily on the assistance of volunteers and community-based organizations to manage events and donations.
Multiple systems are used when managing volunteers, events, and donations due to the high cost of purchasing a fully integrated system and various Federal/State regulations.
Donations may be monetary or tangible items. Sometimes it’s difficult to consolidate donations from different sources or determine the origin.
Most people use a cloud-based SaaS system via desktop
Tablets and mobile devices not generally used
Excel is a cheap, but time consuming option
All stakeholders should be able to use the dashboard to assess the organization’s impact, financial position, and progress toward goals
Data originating from different sources increases chance of error and inaccuracy
Using a main raw data set is helpful when needing to display data in different kinds of charts or graphs
Company branding colors and style are incorporated into the dashboard
Limited training is desired
UI should be customizable to fit users needs, have limited distractions, and a neutral background
Filtering is very useful
After reading about non-profit organizations and dashboards, I researched a few existing data visualization software companies that provide products for non-profits. Many of the existing options are expensive with varying degrees of usability. LCAR needs a database and reporting system that can be used by users of all technology levels. Users value simple UI, system integrations, and web-based platforms. Dashboards are frustrating when they are not user friendly, lack customization, or require third parties to complete data integration. The competitor matrix shows how a few organizations rank against each other in the non-profit dashboard space. The high usability/low cost quadrant is the ideal area to be in.
.svg)
I continued my non-profit and dashboard research by conducting user interviews with dashboard users and non-profit employees.
Use neutral colored backgrounds, and legible typography styles. Only use color to communicate importance or urgency.
Organizations rely heavily on volunteers to help with events and donations. Give volunteer staff access to their own dashboard.
Design a dashboard interface that is simple, easy to navigate, and requires limited training. Add tooltips within dashboard to help less tech-savvy users.
Most organizations use a combination of spreadsheets and physical ledgers to manage data. Allow data transfers from CSV files and databases.
Allow organizations to use their logo, colors and style to create a unique look. Create an editable dashboard to display widgets and graphs that meet their needs.
Allow staff and volunteers to communicate through the platform easily through chat or email. External messages should not feel spammy.
Through secondary research, competitive analysis, and the survey, I was able to develop an understanding of potential users and how they might use a dashboard at a non-profit organization. I chose to develop two visualization tools to help me build empathy for users: a persona and a customer journey map.
Throughout user research I started noticing patterns in the non-profit and dashboard spaces. Many working professionals choose to work at non-profits for their whole careers because of the organization’s mission. Non-profit stakeholders use key metrics to make business decisions. Having one data management system track donations, events and volunteers would help management use time, money, and energy more efficiently.
.png)
I created a customer journey map to show Dolly’s key stages of her dashboard journey and how she might interact with the product when completing a task. Dolly’s feelings, and connection to physical/human resources are put on display while she transitions the organization from spreadsheets to a dashboard.
I created a diagram of the dashboard pages and sections that Dolly would need to complete her main tasks. Many existing dashboard designs use widgets on the home page for users to absorb detailed information at a glance. Widgets may include graphs, charts, progress toward goals, or event information. The search and navigation functions encourage efficiency while clicking is kept minimal, allowing user to view a volunteer profile in less than 3 clicks.
.svg)
Dashboard design can be highly detailed and complicated depending on the functionality desired. When sketching initial concepts for the homepage I kept the user’s goals in mind. The design should be simple and easy to navigate, utilize color to communicate importance or urgency, and offer customization. I considered existing dashboard design patterns when developing potential concepts, and experimented with having the navigation on the left and the top.
Dolly is the Programs Manager at Left Coast Animal Rescue and is in charge of planning events, keeping track of donations, and managing volunteers. She recently started using the dashboard system recommended by a colleague. After integrating existing data into the system, Dolly is ready to test the program in preparation for the next event. She needs to select the most qualified volunteer for the event, assign that volunteer, and contact the volunteer with a reminder for the event. In the end, Dolly is impressed by how the dashboard made her task so simple. She was able to complete the task within 5 minutes and still had time to review key metrics from the dashboard before a board meeting that day.
The organization requested help a lightweight brand redesign. I developed a style tile to define the brand logo, color palette, typefaces, imagery, and basic UI elements. The organization wanted to emote warm, breezy, friendly, active, and slightly whimsical vibes because they are a community-oriented rescue located by the beach.
I sketched a variety of logo concepts and decided to use a combination of a logo and logomark when developing the branding. After receiving feedback about both logo options, I decided to go with option 1. People we drawn to the whimsical, laid back feel of the wave paw print logo alongside the handwritten display typeface. The color palette and typefaces were inspired by the colorful gondolas and grunge themes at the Santa Cruz Beach Boardwalk. The primary typeface used for the dashboard is Poppins, as Permanent Market is harder to read.
My initial sketches were transformed into mid-fidelity wireframes, keeping in mind the main task flow and existing design patterns. I prioritized a simple navigation and having access to key metrics. The user can access most of the dashboard within less than three clicks. The home screen features a calendar for added efficiency.
A high-fidelity prototype for usability testing was developed in Figma using the mid-fidelity wireframes and refreshed branding. Users completed the main flow - assigning a volunteer to an event and sending them a reminder. Usability testing was performed over Google Hangouts and Zoom with screen sharing so that I could observe the participant's movements.
How easily users can navigate between different areas of the dashboard when performing the task.
How users prefer to search for a volunteer.
How easily users assign the volunteer to an event and send a message.
Observe whether participants exhibit hesitation, confusion, or difficulty with a task, and if errors occur.
Remote moderated user testing with Google Hangouts or Zoom screen sharing
You are planning a Monthly Foster Orientation event for the Animal Rescue and need to find volunteers to help out. Kaylynn Press has assisted with the events in the past and you'd like her to attend again.
Search for Kaylynn using the dashboard search bar and view her profile.
Select the Add to Event button in the profile quickview and add Kaylynn to the Monthly Foster Orientation event.
Send Kaylynn a reminder to attend the event.
I synthesized the usability testing data by analyzing each participant's experience with the prototype. For each task, I noted the number of mis-clicks, and any user hesitation or confusion during the test. In addition to completing the tasks, participants were asked about their overall experience with the dashboard design.
I organized feedback received from usability tests and translated it into actionable items for potential design iterations. Changes were made based on strong patterns surfaced during usability testing. Multiple users struggled with the same tasks. After reviewing the affinity map, I created a priority revisions matrix. Revisions identified as high user value and low design effort were prioritized first. The yellow notes are revisions made, and the gray notes are pending.
Refine the color palette and create a more unified color-coding system
Consider removing upcoming meetings under the calendar and replacing it with upcoming events
Add more metrics to homepage, like goals / financials
Add a "start tutorial" button to help user learn
Add a login/logout button on navigation panel
Add "today is" text before date/time
Add more space between modules
Add text labels to filter, add volunteer, and action icons
Add text label to checkbox in heading
Create a screen for the filtering button
Create separate buttons for events and reminder email, or make a drop down list to choose an event from the list and add a remind button
Swap bell icon for an envelope icon
Add text label or hover text to remind button
Refine the color palette and create a more unified color-coding system for events and skills
Make the send email button a drop down button for send email or reminder email
I established a set of brand guidelines and design patterns by referencing my logo and branding concepts and revised hi-fi wireframes
Priority feedback from usability testing was implemented to produce revised responsive dashboard designs. The main areas I addressed related to the color palette, and the send reminder email function. I added a logout button in the navigation panel and update the home screen layout to incorporate more charts and graphs.
Using the information from secondary research, competitive analysis, user interviews, and usability testing, I created a list of potential features that could be added to the dashboard in the future.
Dashboards host a high volume of complex data and help users view the most important information at a glance. I learned that 'dashboard' is a vague term that can be anything from a simple physical activity screen on your mobile device to a detailed customer relationship management system. Two of the most important dashboard design considerations to keep in mind are minimizing the amount of screens the user visits when accessing information, and utilizing visual tools like icons, charts and graph to tell a story.
