End-to-End Mobile ApplicationDoggotoo
A mobile app designed to help you find places your dog can go too.
Role
UI/UX Designer
Researcher
Duration
8 weeks
June 2024
Deliverables
Competitor Analysis, User Interviews, Personas, Problem Statement, User Flows, Sitemap, Card Sorting, Usability Testing, Wireframing, Prototyping
Tools
OVERVIEW
Many people say that Chicago is one of the most dog-friendly cities in the United States, with 144 dog-friendly restaurants. However, I often find it challenging to determine whether I can bring my dog. It’s disappointing to arrive at a place without my dog, only to discover that dogs are actually allowed.
PROBLEM
Many dog owners find it challenging to locate reliable pet-friendly options nearby. With nearly 70% of U.S. households owning dogs, there is a clear need for a tool to help users quickly find trustworthy choices.
GOAL
Design a local discovery app that:
serves as a centralized platform making it easier to access accurate and reliable information about dog-friendly locations and events
enhances user experience with an intuitive interface, while fostering a supportive community for pet owners to connect and share experiences
ensures dog owners have stress-free and memorable experiences with their dogs, allowing them to relax and enjoy their time together
— DESIGN PROCESS —
Empathize
Define
Ideate
Prototype
Test
EMPATHIZE
Competitor Analysis
To better understand the competitive landscape, I analyzed apps and platforms that cater to location discovery. While several websites exist, there is a notable scarcity of mobile apps dedicated to helping users discover dog-friendly locations. This gap highlighted a unique opportunity to create a mobile-first solution tailored to dog owners.
A mobile app for finding dog-friendly places, activities, and services with social networking and business listing management.
Moderate user base and responsive customer service.
+
Several technical and functionality issues.
-
A mobile app offering dog-friendly location discovery and event hosting with social networking capabilities.
Unique event-hosting feature encourages community gatherings.
+
Limited to the US, small user base, and outdated (last update: Nov 2022).
-
A longstanding platform for booking and finding dog-friendly locations, services, and accommodations.
Reliable booking system, pet-friendly guarantee, and established brand.
+
Overly broad scope and mobile app overshadowed by the website.
-
User Research
I conducted five in-depth interviews with dog owners to explore their needs, preferences, and challenges in finding dog-friendly places. These conversations shed light on how users navigate the decision-making process and what they value most.
Key Insights
Unreliable Information: Participants cited the lack of accurate, up-to-date information as their biggest frustration.
Time-consuming: Finding relevant content often required sifting through overwhelming amounts of information.
Everywhere Mentality: Breweries and restaurants were frequently mentioned as popular destinations, but overall, participants expressed a desire to bring their dogs anywhere they’re allowed.
Verified Content: Reviews and photos from other visitors emerged as a crucial factor in building trust and confidence when choosing places to visit.
DEFINE
User Personas
To ensure the design solution remained user-centered, I developed two personas that encapsulate the challenges and goals of dog owners looking for dog-friendly locations. These personas—based on insights from interviews—served as touchpoints throughout the project, keeping me aligned with user needs and expectations.
Problem Definition
I crafted “Point of view” (POV) statements to frame the users’ challenges and motivations, followed by "How might we" (HMW) questions to spark creative problem-solving.
POV Statements
I’d like to explore ways to help dog parents…
optimize Horrocks Market’s website navigation to provide users with an intuitive and effortless experience when seeking specific information.
make informed decisions when choosing new events and places to visit with their dog(s) because they find it challenging to obtain reliable information before visiting.
How Might We…
help users save time when finding places and events that are dog-friendly?
make it easier for users to find the details of places and events?
provide sufficient information so that users feel they are making informed decisions?
IDEATE
Feature Set
Due to time constraints, I could not design every feature of the web experience. I utilized a value matrix to prioritize features for a Minimum Viable Product (MVP).
P1: Must Have
Advance Search and Filters
User Ratings and Reviews
Saved Lists
User Profiles
Comprehensive listings
P2: Nice to Have
Integration with Maps and Navigation
Personalized Recommendations
Notifications and Alerts
P3: Can Come Later
Social Media Integration
Resource Database
Calendar Integration
Information Architecture
The card sorting exercise confirmed my understanding of how users view the site's information structure. The sitemap below combines the card sort results with my design skills to simplify the site. I merged pages to make navigation easier and reduce clutter, keeping the focus on the brand and its products.
Sitemap
User Flows
User flows were created to outline how users will interact with the app and what steps are needed to complete key tasks.
Find a location/event and save to a list
Find the previously saved location/event and post a review
PROTOTYPE
Design System
To create a cohesive user experience, I developed a design system that streamlined wireframing and maintained visual harmony across the project. I started by defining brand values—exploration, reliable, and friendliness—guiding aesthetic choices. Inspired by these principles, I chose a monochromatic blue-green palette to balance excitement with tranquility. The Poppins font, known for its clarity and simplicity, kept the design approachable while ensuring accessibility. The app name, Doggotoo, was crafted to feel playful, memorable, and reflective of the app’s purpose.
Wireframes
I used wireframes to help me create a clear plan for design, making communication easier and providing a foundation for the end product.
Low-Fidelity Wireframes
To begin to envision what the web experience would look like, I first sketched the key screens on paper and then digitized them in Figma.
High-Fidelity Wireframes
Prioritizing and applying changes based on the user testing findings I brought lo-fi wireframes to a higher-fidelity.
Seamless Access
Sign Up, Log In, or Explore Without an Account.
Navigate Your Options
Search and Filter for Specific Places.
Bookmark & Contribute
Save Locations, Review, and Share Images.
Discover Nearby Gems
Explore Local Spots and Personalized Recommendations.
See More, Decide Better
View Location Details, User Reviews, and Photos.
TESTING
Usability Testing
Usability testing was conducted to evaluate the app's functionality, user satisfaction, and areas for improvement. Five participants were asked to complete three tasks and provide feedback.
Tasks:
Find the closest place to eat and save it to a list
Find the saved location and post a review
Update your recommendation preferences
Success Metrics:
Indicate list sort - 4/5 testers suggested adding a sort/filter option when listing options.
Update action buttons overflow- 4/5 did not realize they could scroll horizontally for more options. Making the spacing wider so that buttons have a visible overhang will help people find them more easily.
Remove note input from saved listing - 2/5 of stated the negative influence of the add a note input field. One user attempted to add a review by using this field until they read the label. And one user missed the review option because they expected a text input field based on seeing the add a note field.
Increase contrast of chips - 2/5 of testers suggested making the chips more noticeable.
Move search field filter icon - 1/5 of testers misclicked on this icon for task 1. Moving the filter icon from the search fields inactive state to results page will prevent future this from recurring.
Key Insights
ITERATE
Design Iterations
After the prioritizing the revisions, the changes were applied to produce an updated prototype.
Iteration 1 - Indicate list sort
A filter option was added to two areas to clarify how the listings are sorted.
Iteration 2 - Update action buttons overflow
Increased spacing so that buttons have a visible overhang.
Iteration 3 - Remove note input from saved listing
Increased spacing so that buttons have a visible overhang.
Iteration 4 - Increase contrast of chips
Increased contrast of category chips to improve visibility.
Iteration 5 - Move search field filter icon
Moved the filter icon from the search field’s inactive state to the active state.
REFLECTION
What did I learn?
This project helped me improve my UI and UX skills while providing insights into working in an environment with limited to no design system or structure.
What didn’t go as planned?
Due to the lack of actual clients and defined problem I was left overwhelmed by the numerous options for my project. I struggled to manage and organize the large volume of existing text, unsure of what to prioritize or how to create a cohesive narrative.
What could I have done better?
Establishing a solid foundation before starting the design. I spent too much time experimenting with the UI. I found later that sketching and creating mood boards help to focus my ideas.