MatchDog Mobile Website

Designed and prototyped a mobile website for a nonprofit dog rescue center-and-shelter network to help match users to the best dog for them as a project for Interaction Design I at San Jose State University.

MatchDog project final screen hero image

Link to full clickable Axure prototype (mobile)

Keywords: UX design, interaction design, journey mapping, user stories, personas, iteration, prototyping, Axure

Team: 3 designers: mobile (me), 2 other students for web and B2E

When: Feb. - Mar. 2019

Background

MatchDog is a fictional nonprofit network of dog rescue centers and shelters. They aim to place rescue dogs with the best homes and owners they can go to, seeking to match dogs to the most suitable owners, based on the owner's lifestyle, habits, interest, and personal preferences. MatchDog also strives to satisfy the owners with their matched dog, handling the potential owners' experience from searching for a dog to adopt through to adoption. Those whose lifestyles are not suited to real dogs can get a robot dog through a large donation to MatchDog, sponsored by the RoboDog company.

Problems and Opportunities

The following user and business needs and goals were extracted from the design brief for this project.

User Goals:

To find the perfect dog for them that suits their lifestyle and preferences
To learn how the dog adoption process works
To learn about caring for a dog
To learn about dog health
To schedule an appointment to discuss adoption and adopt a dog

Business Goals:

To make happy, successful matches between dogs and owners
To promote "Today's Mutt" to help get the featured dog adopted
To help users learn about MatchDog's adoption process
To provide useful information to first-time dog owners so that they can best care for their dog (e.g. spaying and neutering, dog health, etc.)
To get happy dog owners to spread the word about MatchDog
To get people to donate (since it's a nonprofit), either directly or by purchasing a robot dog
To facilitate the dog adoption process from letting potential dog owners meet the dogs through to taking them home

Design Process

Given the nature of the Interaction Design I course and its focus on interaction design, I did not conduct user research and instead worked under the assumption that the information we were given in the design brief would be normally collected through the necessary research step that precedes design. My team and I developed the following four personas who will be interacting with MatchDog.

Personas

Jeff, the recent college graduate and first-time dog owner: Jeff wants to adopt a dog because he is lonely and seeks companionship. Since it is his first time living on his own, he also thinks that a dog will help him feel safer, alerting him to intruders. Having a dog will also help him to have a healthier lifestyle, as taking a dog for walks should force him to exercise regularly and spend more time outdoors.

Rowan, the recently single bachelor who wants to meet people: Having gotten out of a relationship recently, Rowan wants to adopt a dog in the hopes of finding a new partner. He has seen many people walking their dogs in the dog park nearby and plans to get a dog in order to mingle with fellow dog owners. He has also heard that having a dog makes one appear more attractive.

Samantha, the mom who wants to teach her kids to be responsible: Samantha is a mother of two who wants to teach her teenage kids to be more responsible, since she fears they're becoming spoiled. She wants to adopt a dog that she plans to have her two kids be in charge of, in the hopes that being responsible for another living creature's well-being will teach her kids the skill they need to be more responsible for themselves and their upcoming adulthood responsibilities. By learning to care for a dog, train a dog, take the dog to the vet, and walk the dog regularly, she thinks that her kids will develop a routine and more empathy for her position as a mother and wokring parent.

Ella, the dog owner who can't keep her dog: Ella is a current dog owner whose fiancé is seriously allergic to dogs. Since they've decided to get married and will be living together for the rest of their lives and she chose her human partner over her dog, Ella needs to find her dog a new home and a better-suited owner. She wonders how this can be done in the least harmful way.

Journey Map

I then created a journey map--based off of the first-time dog owner persona, Jeff--to capture the user's possible feelings and thoughts at each step of their journey to and through dog adoption, run in parallel with their use of MatchDog's services, website (desktop), and mobile site. Brand touch points cover possible channels through which the user hears about MatchDog.

This journey map visualizes the user's experience through the process, from first thinking about getting a dog through to becoming a happy dog owner after having used MatchDog.

Journey mapping Jeff's experience leading up to adoption and throughout the process helped ensure that I would have a sense for what to include in the design to make sure that Jeff's worries and fears are eased.

Conceptual Model

My team and I developed a conceptual model to organize all of the actions, objects, and attributes that make up the MatchDog website. The conceptual model aided in the consistency of my later design. The conceptual model is the idealized view that you as the designer hope that the user will internalize as they use your design.

Object-Action Matrix

My team and I broke down the MatchDog site into the following objects and actions, with as dense of a resulting matrix as possible:

These object-action pairs can be looked at as actions that are somehow linked to the objects; for example, a dog can be donated to MatchDog (as is the case with persona 4, Ella), and a dog owner is the one donating, hence the X's in both cells. A dog owner can also donate money to MatchDog, or time in the form of volunteering.

Object-Attribute Table

We then expanded each of the four objects (dog, owner, organization--a.k.a. MatchDog, and money) into their corresponding attributes to build the conceptual grammar for the design. Attributes are qualities that you can search, sort, or filter on objects. An extensive object-attribute table helps to prevent inconsistencies in the design resulting from objects and attributes that get treated interchangeably, thus leading to confusion for the user.

Dogs have attributes such as personality; for example, a potential dog owner may want a happy dog and not a calm one.

Prioritization Matrix

Following the four main personas we created, I prioritized object-action pairs by the relative quantity of users that would be performing that action and the frequency, with those object-action pairs used by many users frequently taking highest priority. Object-action pairs related to financial impact toward MatchDog are also included.

This priority matrix shows that object-action pairs such as adopting a dog and meeting a dog are most commonly used, while donating a dog is much more rarely performed and by fewer people. Many people will donate small amounts of money compared to fewer large donations.

Sketches

I sketched out possible designs for the MatchDog mobile website, following the framework laid out by the detailed conceptual model and grammar above.

The sketches show several different menu structures, with the hamburger menu being an action-based menu, while the secondary menu under the profile photo is attribute-based.

Experience Flow

I then built out an experience flow diagram to think about how one of the main experiences of MatchDog--viewing matched dogs and choosing a dog--is experienced by the user.

This experience flow depicts the user's journey through the MatchDog mobile website from getting matches by taking the MatchDog quiz or viewing all dogs.

The experience flow helped me consider all of the steps the user goes through and the decisions that the user needs to make at any point along the way.

Grid Design

To ensure that a proper grid is followed in the page layout, I put together the following grid designs based on my sketches, before making the final design. Good grid design means making sure that each region in the grid has a purpose, following proper information hierarchy and placing global actions at the top, with local actions close to the objects they affect, as well as being consistent with the grid and conceptual grammar across all multiple screens.

The mobile site grids are one column due to restriction of the screen width, so they are relatively simple.

Designing and Prototyping

The conceptual model and grammar were essential in keeping track of all of the various components of the MatchDog site and services. I iterated on the initial design based on feedback received in a design critique from the professor. Some of the final screens of the Axure prototype and explanations are shown below.

Matchdog mobile website final screen and explanation #1

Mathcdog mobile website final screen and explanation #2

Mathcdog mobile website project final screen and explanation #3

Mathcdog mobile website project final screen and explanation #4