Overview

Day trips and vacations are increasing as restrictions due to the Coronavirus have lessened. Pet owners, on the other hand, may be less inclined to leave their furry loved ones behind.

As people seek more experiences away from home, the opportunity to provide a service will be in demand in the coming years.

Goals

• Connect vetted, insured pet lovers with pet owners

• Ensure quality and trust between care takers and owners

Approach

Define The Problem

Trust and cost consistently arose as issues during initial user research. Determining how to remedy both will be key to a successful product.

Competition Analysis

The competition is steep. At least two domineering apps control most of the marketplace. BONE-A-FIDOS' strategy is to capitalize on their shortcomings: Vetted, trustworthy and insured pet care providers.

User Persona

User Flow

This is an immensely important step in the process. It's easy to brush over this part, but do not. Time spent here will be minuscule compared to time spent iterating on areas of the product that could have been foreseen during this stage.

Wireframing

Much of the layout and many UI elements from the wireframe stage made it along to the final design. Having allotted time for this process and testing it with as many potential users was a huge benefit.

Iterations

Two issues were consistent during round 1 of design testing. Initially, a dog's paw was used as the icon to toggle the menu. It was not clear that interacting with the icon would toggle the main menu. 

The initial header font was also something several users mentioned that did not align with the service provided. The feedback prompted the substitution of "Playfair Display" for "TT Fors".

Styleguide / Components

Final Design

Prototype

View on Figma

Lessons

• Nearly every research participant had trust issues in regards to using pet care services through an app

• Though the trust issue was likely not solved at this stage in the BONE-A-FIDO app, the clean interface, colors and typography hopefully help

• Testing and iterating are paramount at all phases of the process to ensuring quality and save time in later stages

• Do not gloss over the wireframes. Flesh out as many layouts as possible

• Keeping a design journal from the start will help during the presentation phase and be a good artifact to refer back to on future projects

Figma Plugins 🙏

• FigmaTokens

• PropStar

• Iconify

• Easometric

Thanks

• ionIcons

• Twitter Emoji

• Google - Noto Emoji

• Bone icon (Pauline Baartmans)

• Smart Animate Prototyping (Rusmir Arnautovic)

• iOS Keyboards (Denis Rojčyk)

• Random dog images (Camylla Battani, gotdaflow)

:: Special Thanks ::

• Dribbble Product Design Course

• Valerie Downs

View Landing Page