PupConnect
Project Overview
The number of new dog owners have significantly increased over the past few decades. But owning a dog is not easy. 54% of dog owners regret owning a dog because of challenges such as cleaning after the dog, training the dog, health issues, or finding a place for the dog to stay while they're away. In order to give dog owners a better experience in owning a pet, our team decided to create a mobile application that could help ease their way into becoming a pet parent.
​
Problem Statement
We are developing an all inclusive dog care application, Pup-Connect, to help new dog owners in the city find all their dog's care and needs by providing both information about dog services and an online forum for owners to connect with each other.
​
​
My Role
UX/UI Designer​
My Team
Melissa Hui, Brandon Hsu, Brenda Vuong, Brianna Huynh​
​
Duration
10 weeks
​
Tools
Figma​
Key Points
Research
Workshop
Design
Takeaways
User Research
User Survey
Our research goal through this survey was to gain a better understanding of our users. We wanted more insight on our typical users' struggles in caring for a dog, their preferences in a dog-care product, and what products they were currently using. As shown below, we were able to deduce that a majority of our users liked the idea of having a community where they could connect with other pet owners and that they struggled in finding information about how to care for their dog. By gathering information from our surveys we were able to move forward with tailoring the content of the app to our users' needs.
Competitive Analysis
We conducted a competitive analysis based on other products our users have used according to our survey, to see what other products offered, lacked, and could improve on. Our goal for this competitive analysis was to see what other products offered so we could create an even better product. From our competitive analysis, we deduced that we would provide informational services on lifestyle services and health, because most products don't address those needs, and we would provide information for training, as most other applications offer as well.
Design Workshop
Affinity Diagram
Using the results from our user surveys, we organized our data by creating an affinity diagram to identify who our users were, what their needs/wants were, and what their values were.
We identified that our users wanted to be able to communicate with dog trainers, easily find information regarding health and clinics, communicate with other dog owners, and find all dog-related information in one product.
User Personas
Now that we conducted user research and organized our findings, we created a user persona to summarize who our users were. This included new dog owners as our primary users, and contractors or business owners that want to offer their services as our secondary users.
Design
Sketches
Each member of the team brainstormed sketches of how our product could best address our users' needs. We all came to a consensus that out product would offer a search page for users to look up dog services they needed, where the search feed would provide a list of businesses near them with ratings, reviews, images, and other relevant information about that business. In addition to that, there would be a public forum for users to share their experiences or inquiries with each other, and a messaging feature for users to communicate with one another on a more personal level. And with the level of personalization this product would offer, we created a profile page for the user, where they could see the reviews they wrote and their bookmarks for their favorite businesses.
Low Fidelity Wireframes
As a team, we discussed what features and design would look best in our product based on our sketches. Our low fidelity wireframes focused on addressing our users' needs using our designs from our sketches and maintaining consistency throughout each page.
High Fidelity Mockups
Some changes we made from low fidelity to high fidelity was how the Write a Review screen was formatted, how reviews were designed, and the overall design of each screen's layout was designed. Similarly, it was important for colors and styles to be consistent throughout the interface, so we changed all headers and navigation bars to our primary orange color, and designed posts as cards and tab headers across many screens. And because accessibility is vital for our users to have a better experience, we used WebAim's Contrast Checker to ensure that the contrast between the foreground and background colors passed accessibility.
Takeaways
Lessons Learned + Next Steps
Working in a team with both experienced and unexperienced designers gave me insight on how to work with different people, as well as how important communication, time management, and leadership was. I learned that it takes a lot of communication about our personal visions, strengths, and weaknesses to fluidly work together to come to a consensus about our project and what steps we should take. With such a short amount of time to fulfill our vision, it was important that we stayed on track with our design process and kept each other updated about our progress. With that in mind, our next steps would be to conduct usability testing to understand how our users interacted with our product, how we could give them a better experience in using it, and whether we successfully addressed their needs.