Paw&Pack

Paw&Pack is an iOS mobile app that helps dog owners plan vacations with pets more efficiently.

The high-fidelity prototype, developed at General Assembly London, followed the full Design Thinking cycle: research, design and 3 rounds of usability tests and product iterations.

ROLE: Product and UX Designer

UX Research · Branding · Visual Design · Concept Sketches · Wireframe · Usability Tests · UI · Prototyping · UX Microcopy

THE PROBLEM

Dog owners have a hard time traveling with their pets. This is mostly due to lack of tools and information to help them plan their trips more efficiently and find pet-friendly places where they can enjoy activities with pets.

RESEARCH GOAL AND METHODOLOGY
My initial assumption was that dog owners would benefit from a platform that provides all the relevant information to travel with pets at a given destination, and that would also facilitate the engagement with local pet communities and improve the quality of the activities and things to do with their four legged friends.
I therefore conducted a Generative Research to understand dog owners’ habits related to travel and activities with their pets and investigate the challenges faced.
AFFINITY MAPPING
Results were clustered in an affinity map based on: a) dog owners' daily habits and engagement with local pet communities b) travel planning pain points. Respondents confirmed most of the assumptions around travel planning challenges and pain points, while showing less interest in engaging with other pet owners at home.
Affinity Mapping
KEY TAKEWAYS AND PAIN POINTS UNCOVERED
  • Restaurants and Hotels lack of accurate information about their pet policies and when they do, the information is often inaccurate or incorrect.
  • Such inaccuracies force dog owners to call venues directly to verify the information provided, which is an unnecessarily time-consuming task, especially when there are many options available.
  • Airline pet policies and vaccinations required to enter a country are by far the most difficult information to find.
  • Dog owners feel that having all the information in one place would be a much more convenient and efficient way to organise their pet holidays.
PERSONA
With the help of the above data and insights, I developed a user persona to define the targeted end user of the app.
LEA, THE GLOBETROTTER PET-OWNER
Persona

Lea is an active and highly practical woman, she lives in Berlin with her Westy dog Charlie. They enjoy outdoors as much as the city hustle. Charlie follows her everywhere she goes, even though sometimes Lea finds herself limited in the activities with the dog. She travels frequently with Charlie, but she often struggle to find pet-friendly accommodations, restaurants and places to go with her pet. She believes planning a travel with pet can be a burdensome process.

DEMOGRAPHICS
  • 35 years old
  • Freelancer Designer
  • Lives in Berlin, Germany
  • Single, no children, one dog
BEHAVIORS
  • She brings Charlie along everywhere she goes.
  • She typically Google the information she's looking for.
  • She's always checking and trusting online reviews.
  • She's believes tips from locals are extremely valuable when travelling abroad.
FRUSTRATIONS
  • She feels planning pet friendly travels is a time-consuming task.
  • Online, she often find contrasting information on foreign pet-policies.
  • She feels guilty and unhappy when sha has to leave Charlie alone at home.
THE IDEATION PHASE

The goal was to create a solution that would make travelling with pets an enjoyable experience by providing dog owners with timely and accurate information to help them plan their pet holidays more efficiently.

FEATURES PRIORITIZATION - MoSCoW METHOD
I listed a series of features that would compose the core of the MVP and subsequent app. The goal was to have in place the basic search/save functionalities that would make the navigation smooth and clear.

I made use of the MoSCoW methodology, where each feature is assigned to a different implementation phase based on its level of priority and easiness of development.

Moving forward, this would also help in managing users' and developers' requirements.

MUST
Effort Level: Pebble


Create an account
Profile
Add to favourite
Filters
Search feature
Share feature
Search by destination
Find pet-friendly Restaurant
Find pet-friendly Hotel
Find pet-friendly Transportation
Maps
SHOULD
Effort Level: Pebble

Write a review
Key info page
Maps: Find dog areas
COULD
Effort Level: Rock/Boulder

Search by breed
In-app booking
Find a dog-sitter
USER FLOW AND WIREFRAMES

The research shows that finding pet-friendly restaurants is one of the biggest pain points for users. This is largely due to the fact that restaurant websites, Google Maps and other reservation services typically lack details on their pet policies, or the information is often incorrect and inconsistent across platforms.

So I started by designing a user flow for dog owners looking to find a pet-friendly restaurant that fits their criteria and their dog's characteristics.

Once tested and validated, the same user flow could then be replicated for other app categories that have a similar research and booking process (e.g. hotels).
WIREFRAME
DESIGNING AND TESTING

The aim at this stage was to understand users’ behaviour throughout the flow and when interacting with the functionalities offered.

The user flows were tested in a low-fidelity prototype designed in Figma with clickable components integrated.
In order to test navigation flow, I haven't included search filters at this stage. This way the navigation tests wouldn't be compromised. The main objective was to test the intuitiveness of the navigations based on:

Lo-Fi Prototype Gif
Download Case Study
View in Figma
STYLE GUIDE

In designing the High Fidelity prototype I wanted the images and the color to play a key role in the end user experience, which I wanted it to be fun, simple and clear. The design choice I made were all directed towards this main objectives.
I therefore choose to keep the black background and make use of bright light contrasting color. I also used a font with multiple weights to maintain a simple style whilst maintaining visual hierarchy through screens.

Style Guide
USABILITY TESTS AND ITERATIONS
Using a mix of moderated and unmoderated methods, I run usability tests that would validate the navigation and visual design.
MODERATED TEST (CONTEXTUAL INQUIRIES)
PROTOTYPE TESTED: Low Fidelity

The moderated test, which consisted of closed and open-ended questions, was particularly useful to better understand where users were getting lost and why, and how I could improve the navigation to make it more efficient and enjoyable for users.
UNMODERATED TEST (MAZE)
PROTOTYPE TESTED: High Fidelity

Once completed the moderated test, I iterated the design and started to build the High Fidelity one applying style guide, UI elements, images and refined UX microcopy. I ran a second usability test, which was extremely practical and effective in gathering valuable quantitative data, heat maps and path preferences.
Users were asked to perform 3  tasks and to value on a 5 points likert-scale the level of satisfaction in completing the task:
TASK 1
Create an account in Paw&Pack.




SUCCESS RATE: 100%
ERROR COUNT: 1
TIME: 00:33
SATISFACTION LEVEL: 5
TASK 2
You are visiting Barcelona with your German Shepard. Find a Restaurant that accept you with the dog.


SUCCESS RATE: 100%
ERROR COUNT: 2
TIME: 01:23
SATISFACTION LEVEL: 4
TASK 3
You want to save Restaurants that match your criteria. Show me how you do it.


SUCCESS RATE: 100%
ERROR COUNTS: 0
TIME: 00:06
SATISFACTION LEVEL: 4.5
Below are listed the results of the above usability test and the improvements achieved through iterations:
From 25% to 100% success rate at sign up

2 out of 5 new users attempted to log in for the first time by entering new credentials, resulting in a high sign up failure rate.
I modified the login page by making the login button more relevant with a secondary accent color. In the second usability test, the login process achieved a 100% success rate.

37% increase in maps' interactions

Instead of clicking the map button, users prefer an interactive map that instantly shows the location of the restaurant.
I kept the map button on the restaurants listing page and added an interactive map in each restaurant subpage instead.
The third usability test, saw a +37% clicks on interactive maps.

Cognitive load reduction

In the low-fidelity prototype Restaurant's images were presented in an image grid. When I integrated interactive maps on Restaurant pages, I noticed users tend to get lost due to an overload of visual elements. I therefore turned the restaurant images into a swipeable photo gallery so to reduce content clutter on the page.

Filters optimization

40% of users consider filters to be a critical feature when searching for a pet-friendly restaurant and suggested improving the visibility of the filters icon. One user also suggested the addition of an 'order by' feature.
I integrated the 'Order by' feature which allows search results to be sorted by price, rating, and distance. I also made both features more relevant within the content hierarchy by placing them at the top of the search bar, yet more intuitive by adding explanatory text to the icons. 80% of users applied filters in subsequent usability tests.

Download Case Study
View in Figma
Download pdf
Download Case Study