DogGo
The social app for dog owners
Rather not scroll?
Check out my video presentation of this case study instead:
Project Overview
DogGo is a map-based social platform for dog owners looking to take more control of their interactions with other dogs and owners.
Whether the aim is to find compatible pups to organise regular walks with or seek out places where the chance of coming across other dogs is reduced, DogGo is your best friend.
Role:
UX/UI Designer – UX Researcher
Timeline:
10 weeks
Tools:
Figma – InVision – Miro
Design Process
I used the Double Diamond design process to direct and structure this project.
Using this framework for my UX projects, I am able to systematically move between blue-sky design thinking and specific user problem solving throughout any product development journey.
Discover
To begin this project I explored the broad problem space of how dog owners manage their pet’s healthcare needs at home.
How well were owners able to initially identify health issues and what kind of problems were the greatest concern?
Secondary Research
90%
of owners don’t know about correct nutrition for their dog
37%
of owners were unaware that some common traits are indicative of underlying health conditions in their dog
841
known genetic disorders can affect dogs
Target User Interviews
Scripted telephone interviews
Currently own a dog
Living in Great Britain
Key Insights
#1
Socialising creates pain points
Some owners seek out social interactions with other dogs and owners. Others want to avoid it. These are needs that are often not being met.
#2
Health isn’t such a concern
Owners expressed confidence in their current pet care knowledge and activities.
#3
Exercising is a priority
Giving sufficient exercise in fun and varied locations was important to interviewees. However finding such locations was often described as difficult.
At this point I readdressed the original problem space. Findings from the interviews demonstrated that dog owners had more prominent pain points and motivations around the theme of socialising, more so than around medical issues. So I asked:
How might we
help owners gain control over their social interactions within the dog community so that they, and their dogs, feel safer and more fulfilled?
Define
Identifying the User
To bring my research to life and keep my target users in mind at every stage of this project I created user personas. I needed two because it was clear through my interview findings that there are some very distinct differences between dog owners.
So let’s meet the owners! Sociable owner Beth and non-sociable owner Sam:
A Day in the Life of Beth
I began looking more deeply into the experiences of the sociable dog owner, Beth. How does she interact with the problem space and where might there be opportunities to assist?
Opportunities Identified
User Stories to Epics
I authored 28 user stories with the following format:
As a [user type] I want to [action] so that [user benefit]
This structure allowed me to consider all of my user types, what action my product could assist with and the specific outcome that should result from it.
Stories were then grouped into epics by the type of function that could be associated with them. It became clear that this point that one epic stood out. It suited a broad range of user stories and could act as a solid foundation upon which other epics could later be developed.
Primary Epic:
View and Share Dog Walking Information
Develop
Task Flow
Developing the epic into a task flow allowed the opportunity to consider all system functions and user interaction points.
The main task allows the user interact with the product, avoiding non-essential steps if desired.
The sub-task introduces the opportunity to contribute to the content of the product.
This is essential for enabling the product to grow and become more useful to a greater number of users.
Sketches and Wireframes
To begin visualising how the product would be presented to users I transformed the task flow into basic sketches and then wireframes.
At this stage, design principles and usability standards were more heavily focused on.
Usability Heuristic: Minimalist Design
Form filling can be tedious or appear overwhelming. I made this form as simple and visually clean as possible to enable users to rapidly get through this initial task.
Hick’s Law: Divide Complex Tasks
I broke down the ‘add a pin’ process into different screens so that each only required the user to commit to a simple task. This makes the overall process more manageable and potentially faster.
Gestalt Principle: Figure Ground
I presented key information in the form of pop-up modals overlaying the relevant screen. This helped guide the user through a clearly navigable and informative journey.
Deliver
Usability Testing
Method
Before progressing to more intricate design tasks, I paused at this point to conduct user testing.
The aim was to get real feedback from target users with regard to the core functionality and usability of the product.
Results
The test script requested that users carry out 4 set tasks.
This allowed for quantitative data collection based on the success rate of each task, as well as qualitative data from the comments along the way.
This table shows the results from the first round of testing, after which I returned to the prototype to action the necessary changes.
Third Iteration
The primary focus points for design improvement centred on the ‘view a pin’ and ‘add a pin’ actions. Some test participants found these task to be unclear. To resolve this, here are a few of the changes made:
Onboarding Pop-Up Modal
To better guide users through the app, the onboarding messages introduce the purpose of the pins on the map and how they can be interacted with.
New Layout, Copy and Screen
The view pin screen now has more descriptive copy which is given breathing room via added whitespace. It is now a stand alone screen rather than a pop-up and utilises the familiar vertical scroll.
Improved Interaction
There is now a more familiar, real-world interaction between clicking a pin or ‘add pin’ button and the resultant screen change. This gives the user feedback on what the are doing within the app.
Brand Identity
Logo Creation
Wordmark
Logo Icon
To represent the social focus of the app, I chose a chat bubble as the overarching feature of the icon. Within this comes the action of using a map and the purpose of walking the dog, therefore I created a combination icon for these elements.
Setting the Tone
Moodboard
To hone in on the identity of DogGo, I compiled a moodboard.
I selected images that depicted fun, easy-going scenes with a range of vibrant springtime colours. I thought of suburban parks, blossoming trees and closeness between people and animals.
Colour Palette
Emotive colours that were compatible with one another were drawn from the moodboard. Before proceeding with them, I checked for any accessibility issues and tested out their different pairings when used in combination with different coloured text.
The Colour Vision Deficiency Simulator was a really useful tool that alerted me to some important design considerations.
The magenta accent colour may not have the same impact for all users so should not be used as a sole indicator of information hierarchy.
I referred to the Google Maps API in order to test out the effectiveness of my colours in combination with it’s own.
UI Library
As I began to build a high fidelity prototype, I collected all icons, assets and styles that will be used in the app and listed out their constraints and variables in a UI library. I did this to enable consistent design across screens and devices as well as when new features are brought in. As I built the library, I kept my developer’s needs in mind and ensured that I offered accurate and detailed annotations for all elements ranging from atoms to organisms.
App Interface
Utilising my UI library, I injected colour and style into my wireframes in order to develop a high fidelity prototype. Please click below to interact with the full prototype.
Responsive Design
Alternative Platform
Tablet Design
To increase the accessibility of the product, I considered other platforms that may enhance the experience for some users. Considering the map dragging interaction, a touchscreen device was preferable. In addition to this, users may benefit from a more expansive map view. Therefore, designing for tablet devices was most logical.
Designing for tablet also gave the opportunity to develop other important features within the app. The chat feature, for example, will work particularly well on tablet devices that have a keyboard.
Responsive Marketing Website
To reach the target audience, I began considering ways to market the app. I looked to other brands such as ‘Strava’ and ‘Tractive’ to see how they marketed their product across devices online.
With this inspiration in mind, I curated a responsive website for desktop and mobile, starting with wireframing and content flow diagrams between desktop and mobile.
My final designs summarised the app’s key features and made the most of platform-appropriate interactions.
The standard burger menu is used instead of a full nagivation bar on mobile.
A sticky navigation bar is used on desktop. On mobile, navigation is hidden when scrolling down to maximise on space.
The endless horizontal swipe feature on mobile devices allows for a familiar interaction with manageable content.
Reflections and Next Steps
Successes and Challenges
The greatest success from this design project has been the fact that it has resulted in a real solution to a problem that effects the lives of real people (and dogs!)
As a dog owner myself, I had some ideas in mind of what type of solution I felt would be most fitting. My research did not entirely back this up and as such it was necessary for me to move beyond my bias and follow the lead of my users.
Next Steps
A product is never truly finished, nor is user testing ever made redundant. I would like to connect with target users again in order to gain feedback for the high fidelity prototype.
I would also like to introduce a ratings system to encourage authenticity among users. With this would come the opportunity to offer tiered accounts so that official organisations can be distinguished from normal users.
kittux.com 