Dogcity logo.png
Find and share your favourite dog-friendly places.
Mockup1.png
map bg.png

About the project

Due to the Covid lockdowns, there has been a surge in dog purchases.
It was important to think of a useful
tool to help dog owners to get information easily, and avoid frustration and misunderstandings.

During the lockdown, I was doing Tai-chi in the park with dozens of dogs playing around.

I noticed that people with dogs were meeting at the same hours and were using WhatsApp groups to organize these gatherings.

Discussing it with my fellow peers, we developed the idea to create a location app that would help dog owners to find locations and meeting points easily.

Designed for:

pair mockup.png

a UI design student project.

The goal was to define a problem related to the location and recommendations app. Going through UX processes and UI designs creation.

UX phase

UI phase

  • Design thinking process

  • User Persona

  • User flow

  • Rapid prototyping

  • Usability testing

  • Moodboard

  • Style Guide

  • Low to high fidelity wireframe

  • Grid system

  • Responsive design

  • Mockup design

Timeline

Tools used

1.5 months (Part-time)

Figma, Marvel, Usability Hub

The challenge

How can I :

01

Help dog owners to find dog-related places in their city easily.

02

Create an original and intuitive design experience for all types of dog owners.

03

Create consistent, simple & evocative UI, effective design patterns with colors, typography, and spacing.

04

Keep in mind scalability so that designs are adaptable for the long term.

The process

I structured the UX phase, through the Design Thinking process.

process.png
bg.png

Final design
 

Screens.png

Understand...

 

Understand...

  • How a location and navigation app works and how is it generating profit ?

  • What are the strengths and weaknesses of such products app?

  • What are the psychological traits behind their UI designs?

Competitor analysis

I selected navigation apps that include services and information, where people and businesses are part of completing the app’s information data.

The features of sharing, posting, commenting and creating content, allow the company to optimize the product and bring new solutions for discovering locations in cities.

Business Goals

A location and recommendation app that helps dog owners to easily access dog-friendly locations, routes and information.

Target market

Novice to experienced dog owners. (18 to 80 years old)

General Features

  • Find easily locations and activities related to dogs

  • Locate dog routes or good walking paths.

  • Share and review options.

Opportunity

A simple, playful, easy to read and to navigate app for novice to experienced dog owners.

Observe

Observe

User research through the Research Learning Spiral

I conducted an
interview with dog owners and went prospecting in dog parks.

Through multiple interviews, I could
identify frustrations about the lack of information about dogs in cities. No indication for dog allowance, route suggestions, dog toilet, dog veterinary, dog sitter... it can also be very challenging to find the matching dog communities and dog-friendly spaces when transiting or travelling.

Point of view (POV)

Create user persona profiles to get the closest to potential users' needs.

User personas

Ideate

Gathering requirements

At this stage, the concept becomes clearer. Therefore, I used the Job-to-be-done framework to design adequate feature solutions that meet user needs.

dogcity hypo.png

Minimum Viable Product

I define MVP features; this process helps me to create scenarios to respond to the business goal, so to be usable by early users who can then provide feedback for future product development.
 

As a dog owner, I want to be able to find easily locations and activities related to dogs, so I, don’t waste time searching.

I want to locate dog routes or good walking paths, and to be able to share and review them.

User flow

At this point based on user research and the personas I could create a user flow to represent the steps the user will take to complete a task.

Prototyping

Rapid prototyping involves quick sketches of wireframes. I implemented the following key features :
 

  • Login

  • Search dog related places

  • Access to map

  • Locations info's

  • Access to itinerary

Test

Usability testing is a technique used in user-centred interaction design to evaluate a product by testing it on users.

In that context, I’ve been interviewing the dog’s owner in my neighbourhood by using Marvel, a prototyping app that allows animating simple interactions in wireframes.

Objectives

  • Observe the user interaction with the prototype.

  • Check if there are any user frustrations during the interaction.

  • Check if there are any suggestions regarding design.

  • Observe the user interaction with the prototype.

  • Check if there are any user frustrations during the interaction.

  • Check if there are any suggestions regarding design.

Suggestions

“Key features are directly accessible; recognizable icon categories on the map with direct screen interaction.”

“Always have access to the bottom menu and back arrow sign in order to go to the main page.”

Gathering feedback

Gathering process feedback during a Usability test of a rapid prototype, helped me to adapt and optimize a better human-oriented design.

Suggestions

“Firstly, I would like to see the map first when searching for a park.”

Karolina,
dog owner of a weimeraner

“Always have access to the bottom menu and back arrow sign in order to go to the main page.”

Julie,
dog owner of a chiwawa

“Have the option to add an itinerary  key feature”

Christian,
dog owner of an Italian greyhound.

Mid-fidelity wireframes

Following many rapid sketches and adjustments based on the previous usability testing; I oriented my decision making to mid- wireframing on Figma. This helped me to evaluate with better precision and detail, the UI elements' placement and spacing, as well as to evaluate the problems more distinctly.

Welcome

Map

Search input

Info location

Itinerary

Visual design

After gathering all my learnings, I jumped into the visual communication phase, where I produced consistent and evocative designs, with effective style guides including : UI elements, colors, typography and spacing.
I enjoyed creating user interface elements and diving into design systems. It emphasized the importance of designing with a meaningful and long-lasting approach.

Moodboard

Playful Children Illustration Creativity Simplicity
moodboard.png

Objective

Generate a feeling of creativity and playfulness similar to a game for children.

Evocative and simple visual elements, easy for location and recommendation apps.

Finding design solutions in order to avoid visual overload.

Stick to the task of the deliverable

Provide a style guide easy to use with a transferable approach for future colleagues.

A/B Preferences testing

Preference testing is a feedback process toward understanding what users prefer and why, before the product is completed. The tests consist of a randomized experiment with two variants, A, and B.

To run that experiment I used the Usability Hub app.

Thanks to Preferences testing and feedback from 20 participants, I could define which screen design and aesthetic would work.

Feedback

“ Simple and straight to the point. The app, if I'm not wrong, focuses on locations that are dog friendly. The other option made it feel like it was a dating app for people with dogs. Great work for both though! ”

” Less cluttered to the eye and it provides a nice balance. The image of the dog is strong and the integration of location with the trail says it all in a snap. ”

Style guide

Based on the Moodboard and the Mid-fidelity wireframe, I defined a Style Guide that would have a pleasant, clear and forward look. Bright, friendly colors combined with a playful cartoonish aesthetic make the app very approachable and highly appropriate for location apps and a dog-themed app.

A warm blue as the primary colour gives a pleasant & trustful touch, supported by the secondary soft orange colour that brings an optimistic feel.

A smooth and modern Typeface, responsive and easy to read on many screens.

A colourful colour palette for the different Activity Icons to offer fun in the discovering process.

Rounded & simple shapes, referring to organic UI elements.

Colours palette

Typography

UI elements

Imagery

Language style

Dog City aims to gather useful information for dog-friendly locations; therefore the tone and the language should be encouraging and easy to understand.

bg.png

Conclusion

This project allowed me to dive into UX design and complement my previous project.

During the research and the visual phases, I delved into the different UX processes; learning the importance of a user design-centred approach. This got me to understand, structure and develop problem-solving perspectives from multiple points of view and fit this into a visual identity.

This was a challenging one since I realized how important it is to engage user testing and feedback early in the process.
User feedback provides a very impactful and realistic point of view.

“It is important to get to know the people that are going to use the app.”

To take away

I believe this app has true potential for solving a real problem.

Some future MVP iterations would be  :

 

  • Creating Business Profile: Businesses are playing a crucial role in developing this location and recommendation app.

  • Enable a dog owner communities platform, including a forum, documentation etc.

mockup 2.png

Find dog-friendly places easily, parks, veterinary, restaurants, cafes...

Enjoy our easy navigation tools and icons, discover new places and new smells for your doggy.

Schedule and organize your day smoothly with your best companion.

Woof woof!
for reading! 🐶