DogGo Case Study

Design Process for Social App

Owning a dog is awesome, but how could a digital intervention make it even better?

Role
UX/UI Designer and Researcher

Project Duration
10 weeks

Tools
Figma – InVision – Miro

Starting with research and finishing with a high fidelity interactive prototype, this case study outlines my 9 steps of UX design behind the creation of a mobile app for dog owners.

Rather not scroll? Check out this video presentation of the full case study instead: DogGo Presentation- Loom

Step 1:
Secondary Research

I gathered information from online resources directed at dog owners in order to understand what current issues exist. Themes from forums, articles as well as free statistical data shone a spotlight on canine health issues. Is this where a digital intervention could help?

90%

of owners don’t know about correct nutrition for their dog.

37%

of owners were unaware that some common traits indicate underlying canine health conditions.

841

known genetic disorders can affect dogs.

Step 2:
User Interviews

I followed up my secondary research with scripted telephone interviews. Interviewing 8 British dog owners revealed deeper insight and the most candid, up to date information from my predefined target audience. My results showed that although owners were aware of canine health issues, a more pressing concern centered on socializing.

Two small dogs on leashes meeting and sniffing on street

“I thought that owning a dog would help me to meet more people but since the pandemic that hasn’t been the case”
— Interviewee A

“My rescue dog isn’t always the easiest to get on with, we have to plan introductions carefully”
— Interviewee D

Step 3:
Justifying Design Decisions

To structure the objectives of the design project, I used my research findings to build up the following 4 resources. Using these resources as a blueprint meant that the user would be the driving force behind all design decisions- every choice would be made as a direct response to their needs. These documents also aided me in justifying design decisions when presenting this project to senior designers.

Personas

Bringing the users to life through detailing their behaviours, motivations, needs and pain points.

Mapping

Exploring a day in the life of a user to identify specific instances where a design intervention could be of service.

User Stories

Voicing the wants and needs of users in a way that can be translated into design tasks.

Task Flows

Creating a digital step by step process that depicts the user’s journey through a task.

Step 4:
Sketches and Wireframes

The previous activities allowed me to pinpoint what the experience should be. The following digital experience matched the highest number of user stories and acted as a foundation for others:

A map and pin based application with which users can view and share dog walking location information.

I transformed this concept into basic sketches and then interactive wireframes. This enabled early user testing, giving the opportunity for rapid iterations before the design became more complex.

A notepad lying on a table by a laptop showing pen and paper sketches of mobile screens. — Task flow sketches

Young cheerful woman sitting on a bench at home using her mobile and laptop. Her pug is next to her on the colourful blanket.

Step 5:
User Testing

2 rounds of scripted testing were conducted with 10 participants. Quantitative data was collected on the usability of particular features through set tasks relating to viewing and adding pins to the map. Qualitative data was also gathered via dialogue with participants led by open ended questions regarding the overall experience of using the app.

Step 6:
Iterations

Test data was analysed and results were translated into tasks ordered by impact and effort thus producing a priority matrix. This visualisation of design tasks helped in ordering my workflow and explaining how I was managing my time.

The result was a mid fidelity interactive prototype ready for a brand injection, a small part of which is shown below.

Step 7:
Style Guide

A colour palette showing how the colours would look to people with various vision deficiencies.

When choosing a colour palette, accessibility requirements were accounted for. I referred to WCAG and ran my palette through a CVD simulator.

Moodboard showing images of dogs and happy people socialising. Lots of light green and pink.

Fun, easy-going scenes with a range of vibrant springtime colours shaped the moodboard which in turn helped direct the overall UI.

8 high fidelity mobile prototype screens

The next MVP in the design process was a high fidelity interactive prototype.

From atoms to organisms, all UI components were entered into an annotated library. I practiced adopting naming conventions that would be suitable for a dev handover.