Dogversations

User Interface Design | Branding

Company

Challenge

Create an app that encourages discourse pertaining to the fostering and training of dogs.

Tools

Dogversations was an app that connects users through a shared connection of nurturing dogs. 670,000 out of 3.3 million dogs in shelters are euthanized every year. Almost half of these are due to the lack of space, resources, and adopters. Project Adoptable is a Chicago-based adoption group whose aim is to rescue dogs with behavioral problems from high kill shelters. Project Adoptable places these dogs in the homes of fosters who train them in order to increase their chances of finding forever homes. A DESIGNATION UX team used this mock-brief to find a solution for preparing fosters to provide adequate training and care for these dogs. Over the course of four weeks my team and I synthesized our research and created individual iterations.

UX wireframes

2017

Our two users were Nate Sato and Allie Smith. Nate's primary motivation was encouragement. His goal was to improve his confidence. His main frustration was intimidation. Allie was motivated by having fun and being social. Her goal was to maintain a fitness lifestyle. Her frustration was boredom.

Wireframes provided by the UX team.

Competitive ANalysis

2017

All of the apps had a friendly feel with light and bright backgrounds/color palettes. They typically showcased true-to-life images (user generated). Adoption-geared apps had a higher sense of urgency in their images. The lack of information about the animal and know-how of specific app usage coupled with unclear CTAs made using the apps confusing and not intuitive.

Based on our research, my team and I decided imagery should not be the main focus of the app, especially since it was forum-based, and the app should be more focused on the conversations. To solve this, I decided to use icons rather than imagery but gave users the option to share photos.

In-Category
  • PAWS Chicago gave off the feeling of comfort and security, it also seemed rather professional. This was in-part to its color palette and certain UI elements such as its imagery and the layout/organization of information.
  • Pro Plan 5's interface seemed dull despite its amount of color. It was a little buttoned up because of its lack of imagery and toned down minimal iconography.
  • Puppy Coach 101 interface seemed dull despite its amount of color. It was a little buttoned up because of its lack of imagery and toned down minimal iconography.
  • Pooch's overall design was the most on the nose as far as design. It was clean and uncluttered, with good hierarchy of information.
Out-of-Category
  • Petfinder photography was haphazard because the photos were unrelated and differed greatly in content and stylization (all were bad stock photos).
  • AllPaws' platform was fairly simple. It followed a basic swiping platform for selecting pets. It had basic information on the animals but didn't go into much detail.
  • Woof, or WeRescue, the overall brand was simplistic and approachable but basic. Like the other adoption apps we looked at, WeRescue heavily relied on the use of imagery.
  • BarkBuddy also used a swiping pattern to help users search for animals. The assumed problem with this type of platform was the potential conversion rate.
  • Pose a Pet had outdated and bland color scheme and UI elements.

Key Screens
(Individual Iteration)

2017

This is some text inside of a div block.The biggest changes I made to the wireframes was the addition of new screens. These included: build workout, featured, playlist, workout summary, current song, horizontal view, and run screens. I designed these to provide users with more features, and because I didn't think the app was as flushed out it could have been.

More screens, including active states and pop-ups can be seen in the prototype.

Home

For this screen I added a search so users would be able to search through their feed to see if someone they're following has posted something containing a keyword for which they are looking. I also made the cards more responsive to the length of posts.

New post

I added another floating action button to this screen to allow more room for lengthy posts and provide users with the option for attachments. The predictive text above the keyboard would appear as the person is typing possible key terms.

Search / topics

I decided to combine the topics tab from the home screen with the search screen because users would likely want to search through topics to find new ones. I also added a horizontal scroll for users' saved topics so it wouldn't take up a large portion of the screen.

Topic

Because one of our design principles was to encourage users to engage, I decided to add more functions to feeds within topics. Some of these include a members list, a specific locations for files users upload, and an option to add other members on the platform that might be interested.

Notifications
+ comment on your post

I added the ability for users to mark a notification as read either manually or by marking all notification as read or mute them.

I decided to have tapping on a notification card to take users to the related post so users remember what it relates to. Also, so users can see other peoples' interactions and further discourse.

Inbox
+ message

I added an icon to indicate whether a message is read or unread, as well as to manually change its read status.

I decided to maintain the card pattern to tie it into the rest of the theme. I also added an indication for if the other person has read your message. Additionally, I included more information about the person users are chatting with.

Other user profile
+ your profile

I created additional tabs to profiles to giver users the option to add more information about themselves. In addition, I added a feed of their posts, and put dogs into another tab.

I added a few things to 'your profile'. The first being the feed on this screen would show a user's previous posts to give them the option to see what they already posted. On this particular screen, I added the offline ribbon so users would be able to better identify the other person's status.

Other deliverables

2017

As part of my final deliverables, I created a style guide to help Dogversations with future design decisions and to help cultivate the brand. I also created a proto.io prototype with the final screen designs. Since we didn’t have a complete flow, the prototype ran through the screens in chronological order to provide a better idea of how the end product would look.