Fur-fectly planned experiences
A dog socialization app
PawPals helps dog owners find compatible fur-friends and coordinate play dates.
1st Place Thinkful 2021 Hackathon
See it in action!
Overview
Duration
One week
Problem
How might we connect dog owners to get their compatible pets together at local dog friendly venues for exercise and socialization?
Design Role
- UI Design
- Visual Design
- Brand Identity
Design Deliverables
- User Survey
- Competitive Analysis
- User Personas
- User Stories & Flows
- Wireframes
- Wireframe Prototype
- Design System
- Mockups
- Usability Testing
- Hi-Fi Prototype
Design Tools
- Figma
- Maze
- UsabilityHub
- Trello
- Slack
- Zoom
Discovery Phase
User Surveys
Getting to know the users
During the discovery phase of the project our team’s UX Researcher conducted a user survey and 2 interviews in order to understand our users motivations and pain points. Through questions like: What are some other activities you may do when taking your dog out?, and What would you most like to see from a dog meet app?, she was able to identify the following pain points.
- Meeting other compatible dog owners
- Needing dog-friendly places to go
- Not always having a dog park nerby
- Having a bad experience at a dog park
- Time and energy constraints
User Research Findings
Where do our users live?
- 29% Urban Areas
- 51% Suburban Areas
- 19% Rural Areas
58.5% of the people surveyed walk their dogs on a daily basis.
Surveyed people information
- 63% of respondents were female
- 39% of respondents were aged 26-40
- 59% of respondents reported annual income was up to $60,000
Competitive Analysis
Where does PawPals sit in the marketplace?
Our team’s UX Researcher used two direct competitors: MatchDog and Booper. She was able to identify areas of opportunity such as that neither competitor has the option to rate interactions with other dogs, neither competitor provide information on other dog resources such as vets, pet stores, etc.
PawPals’ could emerge as a competitor by filling a niche not currently being met by apps currently on the market.
User Personas
Bringing users to life
The team created two user personas named Willow and David. What would Willow think about the platform’s features? What emotions would the branding evoke for David? By giving a background, a name, and a face to potential users we could better keep our design decisions user-centered.
Willow
Age: 27
Job Title: Etsy shop owner
Goals:
- Giving her dog more outside time.
- Finding good play dates for her pet.
Frustrations:
- She is concerned about meeting other pet owners in a safe place.
- She wants to be able to set up play dates with compatible dogs.
David
Age: 36
Job Title: Marketing Analyst
Goals:
- He wants to ensure that his dog gets enough exericise.
- Meeting new people.
Frustrations:
- He is new to the area and doesn’t know what’s nearby.
- Wants to avoid a specific park where more aggresive dogs also frequent.
Information Architecture
User Stories and User Flows
Defining user’s goals
Before beginning to design an MVP, our team identified some user stories for our users and ranked them based on their priority. We then turned them into user flows. Partly due to the time constraints, we decided to limit the number of stories we pursued. The stories we decided to include in our MVP were:
| Role | Task | Importance |
|---|---|---|
| As a dog owner | I want to create a profile for my dog. | High |
| As a dog owner | I want to find a compatible playmate using a variety of filters. | High |
| As a dog owner | I want to message other dog owners. | High |
| As a dog owner | I want to find local dog-friendly parks and venues. | High |
Wireframes & Usability Testing
Getting feedback on the foundation
Using the user stories as a guide, Our UX Designer began designing the skeletal structure of the platform. We use the lo-fi wireframes to perform a usability test.
Outcomes:
- We needed to change the user flow we had in mind, and change the CTA’s functionality
- Message cards needed to be redesigned to avoid redundancy of CTA’s.
- We needed to change the copy on the friend request modal to indicate that the request needed to be accepted by the other party.
After the user’s feedback, I went back to the design board to create the next iteration of the project.
Brand Identity & Visual Design
Finding the brand’s identity
First impressions matter
For the brand identity we drew inspiration from dogs themselves and their relationship with their owners. Through the user surveys and interviews we learned that the relationship between a dog and their owner is very close. We found that some of the owners even refer to themselves not as “owners” of their dogs, but as their “dog-parents”. We thought that the name PawPals evoked that special connection.
During the logo creation I first assumed that a combination mark where the letter "w" resembled a dog's face was the best option for the brand logo. When I presented it to my team, they were not convinced that the type was legible. I went back to the drawing board to design two more options, and I then conducted a preference test to see how potential users reacted to all 3 of them. I was glad that my teammates were able to identify that problem. During the preference test, users also thought that it was hard to read the type on my original logo. I then decided to use the design the testers had liked the most.
Colors
While performing research about dogs, we learned that contrary to the common belief, dogs' vision is not limited to colors within the grey scale. Dogs can actually see shades of blue and yellow. We drew that as inspiration to come up with our color palette. After trying several shades of yellow, we decided to settle with an orange color instead. Our preoccupation was that yellow did not pass our accessibility tests and it would be difficult to see for some of our users.
Pattern
We also learned that owners also associated their dogs with being active. They often used dog walks and play time as a reason to be active and/or meet new people. For that reason, we knew that we wanted to portray an energetic/fun feel to our project. We also created a Memphis style pattern to add some cheerfulness and fun to the platform.
Mockups
First Hi-Fi iteration
Putting everything together!
Once we created the brand’s identity, we had a clear idea of what the feel of the platform would like.
We then created a style guide which we used to create the first mockups for PawPals. In order to do the mockups, we selected key screens from our wireframes and applied the treatments and guidelines of our style guide.
Testing
Iterations based on testing
Putting our designs to the test
We conducted an unmoderated test using Maze in order to identify possible user pain points. Depicted on the left is PawPals Home screen. Hotspots show a 66.7% misclick rate based on the original CTA buttons. After identifying user pain points, we created a new iteration for the Home screen, seen on the right side. We realized that we needed to eliminate a CTA that represented a user story that we were not planning to develop.
Our UX researcher also conducted user interviews which revealed that privacy was a major concern for them. For that reason, we decided to place a toggle which users could use to share their location with other PawPals users in the Home screen.
High Fidelity Prototype
Final MVP
Refining the experience
Once we applied the style guide to the design, we had a high fidelity prototype ready to be tested by real users. We tested the design in person with one participant and remotely via an unmoderated test with five users. Their input was invaluable in order to polish our design and come up with the final MVP.
Conclusion
Key Learnings
Teamwork makes the dream work!
Working in collaboration with other designers allowed me to have instant feedback about my design decisions. I was able to identify areas of possible conflict for real users and to come up with new iterations of my design.
Communication is key.
A great part of our team’s success in this project is due to the fact that my team members and I established a communication plan since the first day of the project. We agreed to have a daily standup and created communication channels to be in contact throughout the day.
Establishing clear roles and deadlines is a must.
It is essential to set roles and responsibilities, as well as to establish clear deadlines for each part of the project.
