Project Adoptable began when the owner, Kaitlin Krupp, stumbled upon a dog named Finn in a local no-kill shelter. Finn had been waiting to be adopted for four months and was beginning to show signs of stress. His lips became bloody from pushing his nose constantly through his cage’s fencing and he lost a lot of weight. Potential adopters passed him by, scared off by his ceaseless amounts of energy. Kaitlin decided to foster Finn, providing him with a loving home, tasty treats, and positive reinforcement training methods. Thus began Project Adoptable, which aims to rescue dogs with little to no training from high kill situations and provide them with the opportunity to succeed in becoming the adoptable dogs that they truly are. Kaitlin wanted to create an app to help her foster parents with training tips and tricks and general resources related to dog fostering.
This was a mock project for DESIGNATION so we weren’t able to present to the client for feedback. Because of this we had a little more freedom to create a name for the app, logo, and color scheme we saw fit.
My team began evaluating our UX team’s research and wireframes. The majority of dog fosters through Project Adoptable were women so we focused on two personas:
She is an experienced foster and is very active in the pet adoption community; she fosters to prepare dogs for adoption by others.
She is inexperienced with training and wants to become more self-assured; she fosters for companionship.
The wireframes were done well and thoroughly; we had just a couple of areas to explore further.
1. We felt there was a better method for selecting the topic the post was assigned; a slider/picker was growing in popularity in lieu of checkboxes.
2. We examined arranging the directory section differently; replacing the word directory with messages and then placing contacts in a different tab.
3. We discussed removing the separate tab for notifications and placing them under the profile section.
4. The UX team set it up that when the user tapped on a list item in the notification tab it expanded. We considered other solutions to this interaction.
We kicked off an extensive visual competitive analysis by exploring numerous animal rescue and training applications.
PAWS Chicago used a light color palette with soft greens and tans, and many photographs to increase audience engagement. They used sans serif fonts throughout the site for an easily readable and modern look, but their logo uses a serif font for seriousness and impact.
P5 Dog Training App from Purina Pro Plan used a combination of bold colors, mostly light background and cards. The app consisted of charts, largo icons, and silhouettes and drawings.
Pooch used white space with a mix of illustrations and user uploaded photos. They used a mix of sans serif fonts in headers and body. The blue and orange color palette was friendly and encouraging; the purple cards were attention-grabbing and differentiated the content.
Puppy Coach 101 used black and grey in the backgrounds for a darker look and feel. The clipart icons looked outdated. The combination of design elements—improper spacing, inconsistent buttons, and color choice—made the product look like it had a limited budget
All Paws used bright colors for a welcoming feel. They used custom photography of animals for engagement. They used varying font weights to create hierarchy for scannable content, but the spacing was a little cramped.
PetFinder used older UI elements such as gradients and shading in their buttons that gave the app an outdated look. They incorporated the modern swipe pattern made popular by Tinder which helped it appear a little more up-to-date. They used custom photography in addition to the user uploaded images for a balanced look.
YESPET! used a graffiti font and a heart with dog- and cat- silhouetted negative space in their logo. Aside from the user uploaded photographs they used white space throughout with pink and gray accent colors.
BarkBuddy used a light-colored background and illustrations for a friendly look. They used the popular Tinder swipe pattern. The color palette had a calming feel.
Pose a Pet used a medium gray with an eye-catching accent color of highlighter yellow. The gradients and shadows in the header and buttons looked outdated. The font looked cartoonish and was difficult to read, especially with the blue copy against the gray background.
Zeppee used a white background with a mustard yellow heading. The user uploaded images added engagement. They used different font points and weights successfully for hierarchy in the list items. They also incorporated the Tinder swipe pattern.
Key Takeaways: The market had a variety of design styles and color palettes. Light-colored backgrounds with pops of color felt friendly and welcoming. Illustrations and line drawings were fun and playful. User uploaded imagery might cheapen the look due to photograph inconsistency so it was important that the bounding areas of these photos be consistent and limiting.
We then created a matrix with these products to find a gap in the marketplace that our app could fill. We determined our product should be in the middle of the serious and playful scale, and that it should use a brighter or lighter color palette.
I created three moodboards and transformed each of them into style tiles.
I focused on a softer feminine color palette with a hint of a vintage aimed toward our user personas. I used Josefin Sans for its geometric, elegant, and vintage feeling. I saw silhouettes of dogs as a solution to labeling the numerous topics of interest.
I mixed the serious blue color with orange and yellow for encouragement and fun. Content heavy sections were easily readable due to the ample amount of white space. The line illustrations of dogs gave the design a unique look, but it ended up a difficult task to draw multiple dogs in a similar styles.
I used bright playful colors and geometric dog illustrations. White space balanced out the multiple bright pops of color. I used the minimalist font Muli for its simple, modern look.
At this point, I wasn’t fully satisfied to move forward with any one direction. Moodboard 2 had a good balance of color, but when I transformed it into a style tile it looked sparse. I heard continual feedback that the geometric dog heads from my third tile were eye-catching and impactful, but I was concerned they might be too whimsical for the app’s subject matter; the screens reminded me of a game or candy store.
I switched focus and set about deciding on a name and logo for the project; this could help me envision which design direction to go in. I began sketching different words associated with the project, name ideas, and corresponding logos:
1. Brainstorming of associated words, name ideas with a few corresponding logos.
2. Word-mapping and narrowed down list of potential names with a few corresponding logos.
3. Rough illustration exploration for the brand.
4. Further-developed logo ideas, especially focused on the use of negative space.
I narrowed down the names to:
I shared these names with my design team, creative director, other designers in the program, and various acquaintances. I heard the most positive feedback on Raise The Woof so I set about fine tuning an appropriate logo. I decided to use negative space to create a house from two dogs sitting.
With the logo and name in place I again tackled the style direction. I combined the blue and orange color from tile two with the geometric dogs from tile three; I redesigned the dogs in the logo to reflect the geometric illustrations and created a final style tile.
With the style direction secured, I began to build out screens. There were many topics of interest in the app and I needed to create multiple geometric dog faces to correspond to each topic. It was a time-consuming yet fun challenge. After much consideration, I used the bottom navigation tabs from the wireframes. For the notification section the user had the option to go to the corresponding message thread instead of just expanding the list item within the tab. I used the popular iOS picker to select the topic a post was placed under.
I received feedback from another designer that illustrations resembling my dog icons tested well in a demographic of females aged 30–55. This affirmed that my design appealed to our personas, Paula and Amber. Our UX team acknowledged that my taglines and copy aligned with the brand.
We had the requirement to include microinteractions or animations within our project. I decided to have the dogs in the logo on the splash screen wag their tails and bark. I also created a dog that jumped in a somersault motion on the congratulations screen. This added subtle delightment and encouragement for Paula and Amber without overwhelming or distracting them from the purpose of the app. Hover over each image to see the animation:
If granted more time on this project I would further develop the dog illustrations to better represent their corresponding topics. For example, I would illustrate the barking dog category to look like the dog icon was barking and I would make the aggressive dog category represented by a well-known aggressive breed. I received numerous positive reactions to the animations so I recommend that Kaitlin implement more microinteractions throughout the app. It would be beneficial to continue testing the arrangement of the bottom tab navigation; perhaps the notifications could be housed within the profile section and the contact and messaging could be separated. This app is currently utilized by a small community of local fosters, but it could be beneficial to determine the parameters for the dog expert resources as the app expands and grows in popularity.
This was a rewarding project because it supplied a much-needed service to the dog fostering community. It was a great learning process in that it incorporated many popular navigation patterns, UI elements, and screen subject matter. I gained experience creating a brand in combination with a product. Many community-based apps contain contacts, messaging, notifications, posts, topics, and feeds. I had to tackle the challenge of creating these screens in a way that was familiar and recognizable, yet created a unique experience to the product. Based off of feedback from the UX team and other design critics, I acheived my goals and Kaitlin would be thrilled with the end results.
I recently had a similar experience creating a fully-developed faux brand and product–but with less time constraint–on a project called Habfit.
