BARKin

Client: Designation
Timeframe: 4 weeks
Role: UI/UX design
Tools: Sketch, Proto.io, After Effects

TechAndAll_Perspective_Screen_MockUp.png
 
 

Challenge overview

670,000 out of 3.3 million dogs entering shelters every year are euthanized, nearly half due to lack of space and adopters. Project Adoptable is a Chicago-based adoption group aiming to rescue dogs with behavior issues from high kill shelters. The group places them in the care of fosters and uses training and behavior modification to increase their chances of being adopted into forever homes.

Finding suitable foster care for dogs that exhibit aggression can be challenging. However, some of these behaviors stem from external influences rather than the dog’s nature, and can be changed by a more positive environment. A UX team at Designation took this mock project brief to figure out how to prepare fosters to train and care for this canine demographic. In their quest to help Project Adoptable meet its goals, they created two user personas.

 
 
Personas.png

As the primary difference between users was level of experience, they concluded that the ideal solution was to find a way to give users like Amber the necessary resources to become more like Paula. The UX team came up with a mobile app featuring foster-related forums and a built-in directory of affiliated licensed professionals, in addition to other Project Adoptable fosters. Our UI team took their deliverables and individually set out to create a brand, high-fidelity mockups, microinteractions, and a prototype from the ground up.

 
 
 

Understanding the product

My teammates and I started by taking a deep dive into shelter and adoption sites to learn about the competition.

 
 
PAWS Chicago.png

PAWS Chicago's urgent CTA evokes an emotional response from viewers. Images show animals being cared for and are treated with a light-colored overlay.

Anti-Cruelty Society.png

The Anti-Cruelty Society uses burgundy as the primary color to convey a sense of professionalism and seriousness. A warm color palette and rounded UI elements add a friendlier touch.

 
 
Petfinder.png

Petfinder uses bright colors that are friendly and encouraging to appeal to a wide audience. The website also incorporates line drawings of animals and fun animations.

Adopt-a-Pet.com.png

The colorful shapes and softer palette of Adopt-a-Pet.com imbue the page with a sweet charm. Small bits of humor, including pets in party hats, contribute to the overall mood.

 
 

As the fostering journey could be an emotional rollercoaster, our team decided to take a positive, community-oriented approach to help reduce stress. We developed three design principles to guide our decision-making process.

 
 

Post, post, post

Fostering a dog is no easy feat. Making the post button accessible and noticeable through size, color, and placement encourages and prioritizes user communication.

 

Think positive

To add levity to this emotionally daunting process, the user is engaged through rounded elements, sans serif typography, and bright color palettes.

 

Count on us

Users are tired of being misinformed by general online searches. Displaying users’ titles and experience levels along with their activity guarantees information from a reputable source.

 
 
 

Style directions

With these guidelines set, I proceeded to define style directions that appealed to both Amber and Paula.

 
 
Style Tile 1.png

This first style tile represented what the users could provide their foster dogs, as well as what they could receive from their foster community: comfort and reassurance. The design captured the feeling of safety, of not having to worry or be stressed in a shelter environment.

 
 
Style Tile 2.png

The second style tile focused on warmth, conveying the now-bright future of a dog on the road to its forever home. The occasional silly image helped to illustrate that the fostering journey would be difficult, but offer fun moments too.

 
 
Style Tile 3.png

For the final style tile, I tried to communicate a sense of trust, stability, and guidance. I initially began working with darker shades of blue, which felt too intimidating for a first-time foster like Amber. She’d rely on the app for advice from a community she can count on, while Paula, though experienced, also needed professional resources. Based on feedback, this direction was the most successful and made the most sense for users due to its emphasis on credibility and knowledge.

 
 
 

Brand exploration

As this was a mock project, we were tasked with thinking up a name and logo that suited users’ needs.

 
 
Logo Sketches Final .png
 
 

I started by brainstorming words related to dogs, fostering, and community such as play, second chance, and togetherness. To warm up I sketched dogs in various poses, and then moved on to dog toys. Play is an important part of positive reinforcement and good behavior, serving as a mental break, physical activity, and stress reliever. Out of several real-life toys, the knot ball, made up of rope twisted and knotted into shape, stood out to me the most. I thought it fit the brand because knots tie things together, representing the users coming together as a foster community.

To create possible names, I combined community- and dog-related words in different ways. This turned into a frustrating multi-day process; it was really hard to find a name that carried meaningful weight. To get out of my own head and look at things from another perspective, I consulted my teammates to gain some insight. While talking through my goal for the name and my brainstorming so far, we landed on the word kinship. The word means “a sharing of characteristics or origins,” which worked well because the targeted users were a specific community of fosters. I combined bark, for its connection to dogs, and kin to create BARKIN.

 
 
Logo.png
 
 

The original typeface I used was friendly, but contrasted with the rest of the interface—as the design was supposed to inspire credibility and professionalism while still being approachable, the typography had to do the same. I also received feedback to draw more attention to “kin,” and settled on BARKin.

 
 
 

Wireframe changes

Before mocking up high-fidelity screens, my team and I analyzed the original wireframes and addressed issues we found with the UX team, who gave us the go-ahead to make changes. I created my own wireframes to incorporate the improvements to the app.

 
 
Home.png

On the home screen, I replaced the topics tab with notifications, which was originally part of the bottom navigation bar.

 
 
Directory.png

On the directory screen, I moved contacts’ names to the right to align all the information so the user’s eye didn’t have to move back and forth.

 
 
Search.png

I moved my topics to the search screen so that everything topic-related would be in one place. Having both the heading and search field helper text was repetitive, so I removed the heading. I organized the topics into a list instead of using images in a grid view; I thought certain topics, such as biting and aggression, were difficult to represent visually without being intimidating.

 
 
Post.png

It didn’t make sense for these options to be displayed before a post is typed out, and could potentially cause the user to go through multiple topics before finding the right one. To save the user time when posting, the app read keywords as they’re typed out and related topics were auto-populated by relevancy. Users could then tap to select multiple topic pages.

 
 
Profile-Settings.png

Instead of including the edit and add dog options multiple times on the same screen, I moved them to the settings menu. I aligned the profile photo to the left and moved the content up to better utilize the space. I also replaced the bookmarks button with an icon and placed it on the top right of the screen.

 
 
 

Final designs

Our creative director mentioned that my final style tile was very blue, which I was very conscious of when creating my first iteration of high-fidelity screens. As a result, I concentrated on injecting the yellow into my design as much as possible.

 
 
Comment .png

I received feedback that the copy was hard to read, so I increased the leading as well as the text size.

The reaction icons for posts were too large; I adjusted their sizing and made them red to grab the user’s attention.

 
 
Messages.png

Using an entire yellow field for unread messages was jarring. Instead, I replaced it with a simple dot to indicate unread messages and notifications.

The tabs and header text size were unnecessarily large so I shrunk them down while still ensuring their legibility.

 
 
Messages.png

The yellow post button and on state weren’t legible enough against the blues. For the post button, I opted for the same red used in the new bookmarks badge icon. For the on state, I used the same gray as the copy because it stood out well against the darker blue and contrasted with the white off state.

 
 
Profile.png

The profile photos looked like they were floating so I changed the background color and anchored them with a white card.

Due to the amount of blue, I switched the color of the bookmark icon to yellow.

 
 

And to help us familiarize ourselves with microinteractions, we were charged with making our own.

 
 
Loading.gif

Done in Proto.io, this loading screen is the first thing users see and a playful introduction to the app.

 
PA_loginloop_1.1.gif

For the login screen, I used After Effects to imitate a knot ball’s actual movement.

 
Post.gif

This microinteraction, built in Proto.io, approximated how topics would appear as the user types their post.

 
 

In addition, a UI kit and style guide were created in the event future designers or developers needed specifications to build off of the existing brand and deliverables.

 
 
 

Future considerations

Though the prototype was the final deliverable for the project, a hypothetical next step for BARKin would involve building out task flows for signing up, onboarding, and messaging a professional for help. I’d also love to test the app with users to see if our assumptions were correct. And if not, continue to iterate and test, and repeat. I’d be particularly interested in seeing if the color palette brought to mind the intended mood, and if the app’s functionality remained intact.

Additionally, my team and I talked about a resources section to include general dog care, common illnesses, and contact information for emergency services. The UX team came up with the idea of including urgent foster care alerts; since Project Adoptable’s mission is to rescue at-risk dogs, it made perfect sense to incorporate a feature that increased the chances of saving more.

With these changes, BARKin could be a fully realized one-stop shop for Project Adoptable’s fosters, right at their fingertips. Those new to the community would have everything they need to become a seasoned pro, and help others successfully rehabilitate their own foster dogs.

 

Reflections

It was during this project that user-centered design really clicked for me. I learned the essential truth: always bring it back to the users. Whether it’s based on previous UX research or usability testing, decisions had to be made with purpose and justification. I also learned that it’s equally important to weave this reasoning into the explanation of my process, strengthening the story. This experience prepared me to present work that’s rooted in real life, a vital part of helping clients achieve their goals.