Jailbreak Husky Dashboard

A responsive dashboard to manage & organize applications

mockuuups-imac-mockup-floor-shadow copy.png

mockuuups-6TQndDhSCy7MKqsrAfmZvU (1).png

OVERVIEW

Problem & Solution

Wading through adoption applications to find the perfect forever home for a pup is a tedious and time consuming process. Brooklyn, the superwoman that runs Jailbreak Husky Rescue in Denver, CO by herself (and a lot of caffeine), currently does not have a solid system for organizing and managing her adoption applications. She describes her current 'system' as chaotic and unorganized, mainly because she loathes administrative tasks. When it comes time to review applications she finds herself reviewing the same application multiple times in order to find the perfect forever home.

I designed a responsive dashboard for Jailbreak Husky Rescue in Denver, CO that helps organize and manage applications while streamlining the application review process by calculating each potential adopter's "match percentage."

Role
End-to-end UX / UI Designer

Product
Mobile first responsive dashboard

Duration
80 hours - October 2022

Tools
Figma, Whimsical, and Maze

Research

Research Plan

I created a research plan to learn more about the needs of the organization and what solutions are currently on the market, common UI elements and dashboard design patterns, and how information is commonly displayed, organized, and sorted / filtered in dashboards.

I used the following research methodologies:

Discovery

Since this was my first dashboard design, I spent time immersing myself in the world of dashboards. I researched different types of dashboards, their purposes, and common dashboard components and patterns, especially for filtering and sorting data. This research helped me understand how different types of information and data can be arranged and displayed on both desktop and mobile devices.

Competitive Analysis

I researched what competitors are already on the market and how they are helping rescues and shelters manage their animals. All competitors offer paid monthly subscriptions ranging from $1 an animal to $29.99 a month. Most competitors offer dashboards to organize and manage animals and volunteers, while some also offered additional services such as tracking donations.

In addition to direct competitors, I also researched how Indeed and Appfolio use dashboards to track applicants for jobs and apartment rentals. I actually found this research more helpful because it directly related to managing applications, which was my focus.

User Interview

I conducted multiple informal user interviews with Brooklyn via text messaging and email. I asked her open-ended questions to learn more about her rescue, processes, and struggles. This allowed me to empathize with Brooklyn and to develop a strong user persona that I revisited multiple times throughout my design process.

DEFINE

Determining the User

Since I was designing a dashboard specifically for Jailbreak Husky Rescue, I only developed on user persona based on my user interviews with Brooklyn. I referenced this user persona multiple times throughout my design process to ensure that my decisions would be useful for Brooklyn and Jailbreak Husky Rescue.

Prioritizing Features

Referring back to my interview I had with Brooklyn and her user persona, I generated a list of product features and organized them into four categories: must-have, nice-to-have, can come later, and surprising and delightful. This ensured I developed an MVP that Brooklyn would find useful without being overwhelmed.

DESIGN

Developing Flows

Using my feature map I developed 3 flows to show all the options the user would have when completing the following tasks from the dashboard:

adding a pup to the dashboard
filtering applications
reviewing applications.

These flows determined what screens I needed to include in my wireframes and prototype.

Wireframes

I created 3 main screens, both mobile and desktop, based off of my user flows to receive feedback before moving on to higher fidelity wireframes. I included annotations to help explain what the function of each component was and/or the reasoning behind design decisions.

After receiving feedback, I created mid-fidelity wireframes, which included more screens, content, and images.

It was at this point I realized I had two different design patterns emerging to allow the user to switch between content: drop down menus and accordions. Keeping learnability in mind, I decided to receive user feedback at this point to determine which pattern Brooklyn preferred.

Key
Insight

Receiving feedback at the mid-fidelity point revealed that Brooklyn would rather have the entire application viewable on one screen instead of hidden in sections using drop down menus or accordions.

Based on this feedback I was able to make changes before moving into the high-fidelity / prototype phase.

Final Product

Pup Dashboard

Important information at a glance! Quickly add a pup to the dashboard, access applications, or edit a pup's profile.

Applicant Dashboard

Don't waste time viewing applications that don't meet certain criteria. The applicant dashboard allows the user to filter applications and provides a quick peek at important information without having to review the entire application.

Application Match Percentage

Take the guessing out of who the best match is with a custom match percent. Percents are calculated based on answers provided by the rescue and potential adopter. Easy color coding allows the user to quickly scan for the best matches.

Pup Profiles

In addition to entering in general information for each pup, there are also options for tracking medical information, foster information, and uploading documents so the user has all the information they need in one place.

TESTING

Prototyping

My next step was to create a prototype in Figma to test my 3 flows. I used this prototype to observe how successful Brooklyn was at completing each task and to get overall feedback on the site’s visual information architecture.

View Prototype

Usability Testing

Since Brooklyn is extremely busy, I decided to set up my usability test with her remotely through Maze so she could complete it at her convenience. I wanted to assess her ability to complete the 3 tasks and get feedback about her overall experience, areas of strength, and suggestions for improvements.

My usability testing resulted in useful feedback gathered through the heat maps and misclicks that Maze provides and verbal feedback. Overall, Brooklyn was extremely satisfied with the design and was able to complete all 3 tasks successfully. However, there were still a few areas of improvement noted and ideas for future features emerged.

The heat map showed that there was confusion on which application had the highest match percent based on Brooklyn attempting to click on the "view" action for the green graph even though it wasn't the one with the best match percent.

Based on this feedback I made two changes to the custom match percent graphs.

I redesigned the graphs to be horizontal instead of circular because it's easier to quickly compare two graphs.

I switched the green and blue categories making the green "excellent" and blue "good."

Before

After

Brooklyn requested some additional input fields while adding a pup to allow her to easily track important data she needs for her PAFCA license, such as if a pet was deceased or euthanized, where they originated from - shelter, owner surrender, or transfer, and whether they originated in-state or out-of-state.

Lastly, Brooklyn said it would be helpful to be able to search applications by keywords. Sometimes she remembers specific information from an application, but can't remember whose application it was. Allowing her to search for keywords would let her easily locate memorable applications.

REFLECTION

Next Steps

What comes next? If I were to continue with this project I would:

conduct more usability testing to ensure the design changes I made resulted in a better user experience.
work with a developer to develop the algorithm for the application match percent. I'd like Brooklyn to have the ability to weigh certain criteria more heavily than others when determining the match percent.
explore design features to allow Brooklyn to create a public pup profile with the ability to only share certain information she entered when adding a pup to her dashboard.
design a foster dashboard to allow Brooklyn's fosters to have access to their foster pup's profile. This would allow the fosters to input in behavior and medical information, alleviating some administrative tasks from Brooklyn.

Takeaways

I came out of this project with two major takeaways.

Dashboards are meant to share important information with users quickly. When designing the dashboard I focused on only using color to show important data and actions that the user could take. This left me feeling like my dashboard lacked visual design appeal, but it made it more functional for the user.

Get feedback early and often. You don't have to wait until usability testing to receive feedback about your design. Receiving feedback early in my wireframing stage allowed me to tweak my design before the high-fidelity stage and reduced the amount of iterating I needed to do after my usability testing.

Previous project

Next project