End-to-End Mobile Application
Doggotoo
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
Iterate
DISCOVERY
Competitor Analysis
To gain insights into the competition, I conducted an analysis of similar apps and their features. The key finding is that while there are numerous websites, there is a scarcity of available mobile apps that focus on local discovery.
User Research
I conducted five interviews with dog owners to explore the factors they consider and the challenges they encounter when choosing dog-friendly locations. The goal is to better understand their preferences and behaviors regarding places to take their dogs.
What insights did I gain from this that shaped the direction of my project?
Unreliable Information: Interviewees stated that the absence of clear and accurate information as the primary pain point.
Time-consuming: Interviewees expressed frustration at having to sift through a large amount of content and the time it takes to find relevant information.
Everywhere: Bringing dogs to breweries and restaurants was the main activity participants talked about, but overall if they can bring their dogs, they will.
Verified: All participants stressed the importance of reviews and photos from other visitors when deciding where to visit.
DEFINE
User Personas
I created two personas to represent the challenges faced by my users. These personas allowed me to empathize with end users and remain attuned to their wants and needs throughout the project.
Problem Definition
I used point of view statements (POV’s) and how might we questions (HMW’s) to come up with ideas that I then translated to features. This process helped me hone in on the user’s challenges and motivations.
POV Statement
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 ensure a consistent look and feel throughout the project, I needed a design system. This not only streamlined wireframing but also created a uniform, user-friendly experience.
Branding
I began the branding process by brainstorming and defining the brand values, which served as a guide for aesthetic decisions.
Exploration
Reliable
Ease-of-use
Color Palette and Typography
Considering the branding values, I opted for a monochromatic blue-green design that evokes both adventure and tranquility.
I chose the Poppins font for its accessibility and simplicity, ensuring it remains casual and friendly without overwhelming the user.
Name and Logo
The app name, Doggotoo, was chosen to reflect its purpose while maintaining a light, fun, and simple tone.
Components
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.
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:
What did I learn from my high-fidelity usability test?
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.
ITERATE
Design Iterations
After the prioritizing the revisions, the changes were applied to produce an updated prototype.
Iteration 1
A filter option was added to two areas to clarify how the listings are sorted.
Iteration 2
Increased spacing so that buttons have a visible overhang.
Iteration 3
Increased spacing so that buttons have a visible overhang.
Iteration 4
Increased contrast of category chips to improve visibility.
Iteration 5
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.