Amigos iOS App: UX/UI Design Case Study

By Adam Morenberg

Amigos UX-UI Design Case Study Featured Image-New2

Introduction

Amigos is an iOS app that helps worried pet owners organize, prepare, and communicate with friends and neighbors who care for their pets when they travel. Amigos allows pet owners to stop worrying about their  pets by providing them with innovative notifications about their sitters’ pet care activities, like duration of visits and dog walks, visit photos, and pre-trip reminders. 

Amigos was my final project at Ironhack’s UX/UI design course, and I worked on it solo, completing all of the user research, strategy, UX design, UI design, and user testing myself.

iOS App UI Design Example_Amigo App Alert

Pain Points

Pet owners experience four major pain points when their friends and neighbors care for their pets:

  • They worry about the quality of care pets receive from pet sitters. 
  • It's challenging to find someone willing and available to help.
  • Writing instructions is time consuming, and pet owners often forget to include crucial details in the rush to leave.
  • Asking for such a "large" favor--even from friends and family--can feel like "imposing" or "asking too much."

User Research

Secondary Research

When reviewing secondary research I learned that nearly 50% of US pet owners have avoided taking a trip because they worried about the care their pets would receive if they traveled.

Survey Research (n=215)

In my own surveys for this project, almost 25% of pet owners had postponed, canceled, or shortened travel plans because they were worried about the care their pets would receive.

 

And over 20% reported that they had stopped using a pet sitter in the past due to poor care. 

Screen Shot 2018-08-13 at 10.16.51 PM
Click image to enlarge
Screen Shot 2018-08-13 at 10.25.22 PM
Click image to enlarge

How I Designed My Survey to Uncover the Pain Points of Using Pet Sitters

In my survey, I asked pet owners to tell me their biggest pain point around pet sitting.   

I coded the responses and used wordle.net to create a word cloud showing frequency of mentions

“What is your biggest challenge or difficulty when using non-professional pet sitters to care for your pet(s)?”

Word Cloud of Biggest Pain Point
Size of word corresponds to frequency of mention.

Selected survey quotes:

 

“Worrying if they’ll treat them nicely.”

“They don’t spend quality time with my pets”

“Praying that they actually did what they were supposed to do.”

“Forgetting to feed them.”

“That my pets get enough human time.”

 

 

“You’ve got to leave very detailed instructions.”

“Making sure that they know how to properly give medicine to our cats.”

“Explaining what to do to take care of them.”

“I don’t like to feel that I am imposing on friends.”

“Asking for a favor is quite challenging for me.”

Qualitative Interviews (n=6)

To better understand the what it’s like to be a pet owner asking friends and neighbors to pet sit, I also conducted 6 qualitative interviews with pet owners.

Preparing to leave for a trip can feel very rushed, and they can forget to communicate crucial details:

One time I forgot to leave the key!”

“I always end up forgetting something important, like having enough food. But I’m usually in such a rush before leaving.”

“I try to leave some cash for them in case I forget anything and they need to buy food or whatever.”

 

Data Analysis

Organizing the survey and interview data into “chunks” helped me make sense of the data.

Problem Definition, Hypothesis, and UX Strategy

Problem and Hypothesis

Click image to enlarge
Click image to enlarge

After making sense of the user research, I distilled the insights into a problem statement for kickstarting design.

I also wrote a design hypothesis to formalize my assumptions about users needs and assess project success–a hallmark of the Lean UX methodology.

 

UX Strategy

I used Jeff Gothelf’s Lean UX canvas to brainstorm solution ideas and craft a UX strategy to alleviate pet owners’ pain points with the pet sitting experience.

Prioritizatizing Features and Defining the MVP

I used the MOSCOW method to prioritize features of the MVP.

Must-haves

To alleviate pet owners’ worries about the quality of pet care, the MVP needed to provide notifications,  messaging, profiles (for pet owners and pets), emergency contact information, and instructions.

Backlog

Due to time and resource constraints, I was forced to define which features were non-essential to the MVP:

  • tipping/payment
  • video instructions
  • video messages

I believe these features would add value to the user experience, but I believe they will have a lower ROI will be lower.

Positioning

There are already many solutions for finding pet sitters on the market, including Rover.com, Wag.com, Care.com, so I wanted to differentiate Amigos by focusing on the non-professional pet sitting experience and making that better.

MOSCOW FEATURE PRIORITIZATION

UX Design

User Persona: Catch-22 Catherine

Using what I learned from my user research, I created a user persona called Catch-22 Catherine to clarify pet owners’ main needs, goals and pain points. 

I named her Catch-22 Catherine because she needs peace of mind that her pets are being cared for, but she doesn’t fully trust her pet sitters, and what’s worse–she feels guilty for asking her friends, family, and neighbors for watching her pets when she’s away.

User Journey Map

I created a user journey map for Catch-22 Catherine that helped me see the different actions she takes and emotions she feels across the journey. 

Before the trip, she writes instructions (forgetting crucial details) and briefly meets with her pet sitter, explaining what to do. She feels rushed for time and guilty asking for the favor.

During the trip, she worries her pets are suffering and wants updates, but is afraid of overhelming the pet sitter.

After the trip, she realizes the pet sitter didn’t follow her instructions completely, and she feels frustrated before realizing that she forgot to include crucial instructions.

User Flows and Site Map

I used post-it notes to organize content into a site map and essential user tasks into user flow diagrams. 

Post-it notes allowed me to quickly experiment with different ways of organizing the content and “happy path” without getting bogged down in pixel-level detail in an app like Sketch.

 

Using post-it notes for information architecture

Concept Sketching and Ideation

Rapid Prototyping
Click image to enlarge

I created concept sketches of key screens and began assembling a paper prototype to test my hypothesis that enhanced communication with pet sitters would alleviate pet owners’ worries. 

Low to Mid-Fidelity Prototyping and Usability Testing

Now that I had a solid idea about the content and tasks Amigos needed to include to alleviate Catch-22 Cathy’s pain points, I was able to begin rapid prototyping and usability testing.

Design and Prototyping Tools

I used paper, pencil, and scissors for the low-fidelity prototype and Sketch for the mid-fidelity version. 

I spent one day creating and testing each prototype, and used Marvel to make them clickable and interactive.

UserBob Testing Platform

I chose to use the remote unmoderated testing platform UserBob for testing prototypes due to time constraints, and because UserBob recruits from the Mechanical Turk panel, whose age, level of tech-savviness, and income level overlaps with target users of Amigos.

Benefits of Remote Unmoderated Tests

Another benefit of UserBob is that the tests are recorded on video. Being able to go back to the data to check a quote or review a test in detail multiple times was very useful, and I was able to learn things on second viewings I didn’t pick up on the first.

Usability Test Results

Low and Mid-Fidelity Prototype Usability Test Results

KEY TASK: ADDING A USER PROFILE

Insights from Testing

In the low-fidelity test 40% weren’t able to add a user profile on their first or second tries, so I added more space between fields in the mid-fidelity screen to make each field more noticeable.

 60% Completion Rate

71% Completion Rate

KEY TASK: READING MESSAGES

Insights from Testing

Problem: No obvious way to refresh messages

In the low-fidelity test, 40% of users struggled to refresh messages because I hadn’t added an affordance for that purpose:

“I pull down to refresh, no?”

“I’m confused about how to get it to update. If you had a little button that would be nice.”

I added a small button to the top of the mid-fidelity screen to create an obvious way to refresh messages.

Early hypothesis validation

40% of low-fidelity users validated the product hypothesis unprompted:

“Overall, I think it could work pretty well, being able to see what your pet’s doing.”

“It looks like it would be useful for people with pets.”

 

80% Completion Rate

86% Completion Rate

UI Design

Visual Analysis of Competitors

I conducted a visual analysis of competitors in the App Store to find opportunities to differentiate Amigos.
  • They rely heavily on child-like green and blue hues.
  • Their brand identities are dog-centric,

This leaves whitespace opportunities for Amigos to own pet sitting for any kind of pet.

And Amigos would be the only pet sitting app to improve the relationships between pet owners, their pets, and pet sitters.

Mood Board Design

I wanted Amigos’ visual design to communicate the personality traits of Catch-22 Cathy’s ideal pet sitter–friendy, caring, easy-going, and responsible–the kind of person who would inspire her trust and confidence.

To distinguish the brand identity, I avoided dog and cat-centric metaphors used by competitors and focused on the importance of friendship in Cathy’s journey. 

Once I figured out that Amigos is about facilitating friendship and communication among humans and pets, designing the logo was easy.

The origami bird, which I found on the Noun Project, subtly communicates the app’s focus on animals, friendship, and communication. Friends exchange origami as tokens of affection, and homing pigeons were used as vehicles of communication. 

 

Click image to enlarge

Mood Board Desirability Testing

Due to time constraints, I also used the UserBob platform for desirability testing of the mood board (and later with the style tile). 

I chose not to use the Microsoft Desirability Testing Method involving pre-determined words printed on cards because the testing platform doesn’t accommodate the protocol, but with UserBob, I could display the mood board to testers, then collect and analyze their open-ended responses. 

I showed the mood board to 20 UserBob testers and asked:

  • What comes to mind when you look at this moodboard? Why does that come to mind?
  •  If this moodboard was a person, how would you describe its personality? Why?

Desirability testing the Mood Board Design with test users validated these early UI design choices”

  • “I would describe this person as caring and an animal lover.”
  • “Amigos, something to do with pet families.”
  • “Warm and loving. Trustworthy. There’s no drama in it.  Nothing that stands out that would be cause for concern.”

Video: Mood Board Desirability Testing 

Style Tile

After testing validated the mood board, I designed a style tile of UI elements and desirability tested it.

Moving to style tiles after mood boards allows designers to find and fix UI design problems early, hopefully avoiding time-consuming revisions to the UI.

To enhance readability and data entry, I used large, high-contrast text and form fields and large swathes of white space to make the content easily scannable..

Style Tile Desirability Testing

Users responded positively to the Style Tile, describing the color palette as “bright” and “energetic”.

When asked to describe its “personality”, users described the kind of person who could help Catch-22 Cathy relax and enjoy her trip away from home certain her pets are being well-cared for:

  • “A pet lover”
  • “Someone who was being responsible”
  • “A pet lover”
  • “Someone who was being responsible for her pet”
  • “A person who was happy and well-organized”

Video: Style Tile Desirability Testing

Mid to High-Fidelity Prototyping and Usability Testing

Now that user testing had validated the style tile UI elements, I updated the Mid-Fidelity wireframes with the UI in Sketch, created a high-fidelity prototype in Marvel, and re-tested using UserBob later that day.

KEY TASK: ADDING A TRIP

Insights from Testing

29% of Mid-Fidelity testers were unable to complete the entire process. 

One tester noted that she expected the process to end when she tapped the “Save” button:

“That’s weird, I thought it said “save” on the earlier screen, but I’m still adding a trip.”

In the High-Fidelity prototype, I changed “Save” to “Continue.”

One said he expected the trip dates to appear on screen as he selected start and end dates:

“I would expect it to display the start date and end date I selected.”

I updated the High-Fidelity prototype to display selected dates as users input them.

Another Mid-Fidelity tester noted that the calendar visually overwhelmed the screen:

“The calendar is familiar, but the month looks a bit crowded.”

I shrunk the calendar to add white space and enhance legibility in the High-Fidelity calendar.

 

71% Completion Rate

100% Completion Rate

KEY TASK: ADDING A PET PROFILE

Insights from Testing

29% of Mid-Fidelity testers weren’t able to add a pet because they didn’t notice the small “add” link under “My pets”–they clicked “My Pets” instead:

 

 “I know I’m supposed to add a pet, but it won’t let me do it”

I redesigned the High-Fidelity main profiles screen to increase noticeability of each element: I added gray bars to separate content areas, moved action links to the right, and transformed plain “Add” links into small secondary buttons with green borders.

 

71% Completion Rate

100% Completion Rate

Video: Is This an App You Would Use in Real Life?

Next Steps

Design Sprints:

  • Care Guide Section (Instructions for Pet Sitters)
  • Video Messages
  • Push Notifications
  • Tipping Feature

Research Sprints:

  • Foundational Learnings About Pet Sitter User Group - Their Experiences, Workflow, Goals, Needs, Pain Points, etc.
  • Pet Owner Information Needs - Opportunities for Additional Alerts

Technical and Business Requirements Gathering:

  • Monetization Opportunities
  • Cashless Payment Platform Technical Requirements
  • Apple App Store Requirments

Long-Term Strategy Reseach:

  • Feasability of Offering Amigos to Professional Pet Sitting Companies as a B2B SaaS (Software as a Service) Using Subscription Model

Explore the Prototypes

Low-Fidelity

Mid-Fidelity

High-Fidelity

Video: My UX Case Study Presentation

Here is a YouTube video of me presenting the Amigos case study at the Ironhack Hackshow on Friday August 10, 2018.

UX Case Study Presentation Deck

ere is the UX/UI case study deck I presented in the video above.

I’m a UX designer and user experience researcher in Miami-Fort Lauderdale, Florida.