1 of 70

Sheltering Pets in the Midst of Disaster

Playbook

Dream Team | MICA | December 2020

2 of 70

Table of Contents

​

1 Executive Summary

2 Business Case

3 The Team

4 Planning Process & Timeline

5 Mission Statement

6 Research & Findings

7 Our Users

8 Our Brand

9 Design�10 Usability Questions

11 Thoughts & Next Steps

12 Appendix

​

3

4

5

7

10

13

20

33 �38

62

66

69

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 2

3 of 70

Executive Summary

​

Our challenge was to design an application to coordinate community-led efforts to respond to natural disasters. After a brainstorming session with our team, we narrowed in on a goal to focus on victims of disaster situations who own animals, such as household pets and need to evacuate in a streamlined fashion.

​

We discovered during our desk research, sometimes these individuals will refuse evacuation orders because they don’t want to leave their animals behind, which places their lives at risk both during and after disaster situations. This led to our hypothesis that humans who can easily find places they can go with their animals, are more likely to heed evacuation orders.

​

​

Over the course of six weeks we developed the CommuniPet app which connects pet owners with neighborhood volunteer safe havens before and after a natural disaster strikes. The CommuniPet team designed the app to have a streamlined flow of interactions with interactive maps, home donation listings, local alert integrations (i.e. disaster alerts, weather information, etc.) integrations with social media, and a resources hub. On the following pages we dive into the overall flow and process for our MVP, which is the interaction and flow between the evacuee (Ava) and the safe haven donor (Kyle).

​

​

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 3

4 of 70

BUSINESS CASE

People with pets in areas prone to natural disasters sometimes refuse evacuation orders because they don’t want to leave their buddies behind, jeopardizing their safety.

​

Problem Statement

How might we create an application that better helps pet owners make arrangements and receive donations more efficiently, in order to evacuate danger zones in a timely manner?

​

Some animal organizations recommend preparing ahead of time for your pet, in addition to yourself.

What does an individual do if they do not have the ability to do so? What resources are available to solve quickly?

Initial Exploration

Methodologies Explored�

  • Desk Research
  • Competitive Analysis
  • Informative Interviews

​

  • User Personas
  • User Journey

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 4

5 of 70

The Team

6 of 70

Cindy Brummer

Lead Designer - Ava

Interaction Design

Visual Design

Information Architect

UX Research

​

​

​

​

​

​

Candace Anderson

Visual Design

Brand Design

Information Architect

UX Research

​

​

​

​

​

​

MEET THE TEAM

Kelsey Rhodes

Lead Designer - Kyle

Interaction Design

Visual Design

Information Architect

UX Research

​

​

​

​

​

​

Kristin Sinclair

Project Manager

Visual Design

Information Architect

UX Research

​

​

​

​

​

​

Spent on: �Meetings, research, testing, design, iterating, and redesign.

​

​

~48 hrs�A WEEK

Spanning�6 WEEKS

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 6

7 of 70

Project Plan

8 of 70

PROJECT PLAN

​

Planning Process & Logistics

​

In analysing the brief we developed a project plan to organize our

overall process that addressed the client needs and key areas of focus surrounding the problem statement we were solving for. We started our planning process by meeting to brainstorm different ideas and ways we could tackle the problem. Once we had a clear direction, from there we mapped out the the overall timeline with key milestone meetings, deliverables per week, and making a trello board for the team assigning key members to tasks to complete each week.

​

​

Discovery

Week 1

Research

Design Pt. 1

Design Pt. 2

Prototyping

Final Presentation

Week 2

Week 3

Week 4

Week 5

Week 6

We created a 6 phase process over 6 weeks aligned to milestone deliverables that needed to be completed during each phase. This allowed us to keep an eye on the plan as we moved forward adjusting where necessary adding more time to some tasks when needed, and being open for flexibility if we had to pivot to address a change during the process.

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 8

9 of 70

PROJECT PLAN

Detailed Timeline

​

For each of the key phases there were categories we wanted to keep track of

to make sure we were keeping inline with both the brief and the project plan we put together. Most phases were complete within a weeks time, with the exception of our Research as well as adjustments made during the second design phase and the prototyping phase. This was because we wanted to be thorough in our findings and take client feedback into consideration during the prototyping process.

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 9

10 of 70

Mission �Statement

11 of 70

It Takes A Village �To Raise A Pet.

​

​

​

​

​

​

​

CommuniPet’s mission is to bridge the gap of communication between people who desire to serve their community, and those who need to evacuate their homes due to weather related disasters with their pets.

12 of 70

We do this by maintaining a platform for community members to donate space in their homes and for community members that are in evacuee zones to be matched with one another on a secure database.

At CommuniPet we want our users to feel like they are participating in something bigger than themselves for the greater good and that they can rely on their village to get them through uncertainty because after all, it takes a village to raise a pet.

​

13 of 70

Research

Desk Research, Competitive Analysis, �and User Interviews

14 of 70

RESEARCH

​

Desk Research

​

PETS Act

The Pets Evacuation and Transportation Standards (PETS) Act was enacted after Hurricane Katrina and requires states seeking FEMA assistance to accomodate pets and service animals in their evacuation plans.

Little to No Help

Sheltering options for pet owners are limited or nonexistent.

Public Health Concerns

Crowded conditions in evacuation centers make it more likely certain germs will spread between animals and people, and it can be difficult to provide proper sanitation (such as disposal of urine and feces).

Safety Risks

It is estimated that up

to 80% of people who prematurely re-enter an evacuation site do so

to rescue a pet.

Findings

​

Overview

We scoured the internet to find information on evacuation efforts during past natural disasters.

​

We looked at articles and resources published by the Center for Disease Control, National Institutes of Health, and various non-profit organizations.

Understand the risks involved with sheltering humans and pets.

Learn about existing evacuation procedures and best practices for people and pets.

Primary Objectives

Primary Objectives

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 14

15 of 70

RESEARCH

​

Competitive Analysis

FEMA app�While it's easy to use and has strengths, this app is lacking two core pieces of functionality some people want—the ability to share alerts through social media and the ability to work offline.

RedRover�Red Rover has a broad service offering, and disaster sheltering is only one of many offerings. It's unclear from the website how people in need of emergency shelter would find this through the organization.

AirBnB Open Homes�This is the strongest competitor to our idea—hosts can sign up on the platform.

BringFido.com�This site has some features that make it useful for advance planning, but it's not focused on immediate needs in an emergency situation.

Uncover strengths and weaknesses that can be leveraged in our solution

​

Discover competitors and understand their products/services and target audience.

​

Overview

We explored multiple products—based on discoveries in our desk research and informative interviews—to uncover their strengths and areas for improvement.

​

Four products proved to be the strongest competitors.

Primary Objectives

Findings

Most emergency apps focus on people, and not their pets. Apps that do focus on pets do not serve owners in an emergency situation.

​

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 15

16 of 70

RESEARCH

​

Informative Interviews

​

Learn about the steps they take at different stages of an evacuation.

Participant 1

Age 20

Dog Owner

San Diego, CA

Participant 2

Age 29

Dog Owner

Baltimore, MD

​

Participant 3

Age 28

Cat Owner

San Diego, CA

​

Participant 4

Age 29

Dog Owner

Washington, DC

​

Participant 5

Age 29

Dog Owner

San Francisco, CA

Participant 6

Age 32

Dog Owner

Denver, CO

Participant 7

Age 30

Cat Owner

San Diego, CA

Overview

We interviewed 7 pet owners about their experience with disasters and preparedness.

Primary Objectives

Understand thoughts and emotions experienced by these pet owners.

Speak to pet owners who have evacuated from or live in areas affected by natural disasters.

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 16

17 of 70

Synthesis of Research

​

RESEARCH

​

Affinity Mapping

We used Mural to collect insights from both our desk research and informative interviews.

​

As a team, we reviewed the information and grouped similar insights together to uncover key themes.

​

Six themes emerged:

  1. Demographics for a potential key audience
  2. Types of disasters experienced
  3. Feelings of those affected by disasters
  4. Competitive applications to explore
  5. Challenges experienced with navigating a disaster
  6. Considerations when planning for/during disasters

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 17

18 of 70

Key Themes in Findings

​

RESEARCH

​

2. Types of Disasters. Participants live/lived in areas directly affected by wildfires, earthquakes, tornadoes, and hurricanes.

3. Feelings. When discussing pet evacuation plans in the event of a natural disaster, participants noted they felt uncertain, indecisive, and doubt about their lack of arrangements, anxiety and worry about what they would actually do when the time came; and a deep sense of love and attachment to their pets, so much so they would sacrifice their own safety to remain with them.

5. Challenges. Pet friendly shelters are difficult to find in emergency situations participants were not aware of existing organizations. This leads pet owners to break policies and sneak their pets into hotels and other safe havens. An influx of pets makes it difficult to control sanitation and forces euthanization at animal shelters.

4. Existing Products. Participants mentioned using the following products when searching for information about local weather-related emergencies and finding safe places to stay: NextDoor, AirBnB, Google search, Facebook groups, and Boulder County, CO Disaster Website.

6. Planning. Four sub-themes emerged in our research that brought to light several pain points and areas of interest when prepping for disasters, including logistics, community response, pet preparation, and supplies.

1. Demographics. Participants were at least 20 years old and were avid users of mobile devices and applications.

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 18

19 of 70

RESEARCH

Community Response: Victims of natural disasters can create a buddy system and rely on neighbors to look after pets, put calls out to family and friends for assistance with shelter, and organizations arrange pop up shelters to house pets and stray animals.

Logistics: Five phases of emergency management are planning, preparedness, mitigation, response, and recovery. Our research shows that some pet owners have evacuation kits on standby while others haven’t thought about what they’d do in the event of an emergency. These respondents are highly likely to evacuate first (with their pets) and figure out their plan of action in the moment.

Pet Health: Proactive steps can be taken to ensure pets are prepared for evacuation including updated collars and tags, microchipping, vaccinations, and establishing relationships with veterinarians. Respondents noted concerns for minimizing anxiety and stress levels in their pets.

Supplies: Respondents with an emergency kit for themselves included supplies for their pets as well. Relevant additions to these kits include: crates, proof of vaccinations, pet seat belts, blankets, food, water, bowls, etc.

Key Themes in Planning

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 19

20 of 70

Our Users

Personas

21 of 70

Ava Rockspring

Evacuee Pet Owner

Age: 28

Location: San Diego, CA

About:

Ava lives alone with her cat Ben and dog Jerry in a 2 bedroom condo on the outskirts of the city. As a pet mom she wants to stay up to date on resources for caring for her animals in an emergency. Ava is more attached to her animals then her animals are to her, and she often takes her dog for weekly hikes and snuggles with her cat on weekends.

Goals & Needs

  • Wants to create an emergency plan
  • Wants to receive up-to-date information of natural disasters in her area.
  • Would like tips on how to keep her pets calm
  • Wants to be able to quickly make a decision on where to relocate her pets to a place that accepts them.

Hesitation & Pain Points

  • Worried about finding a place to go that will take both of her pets
  • Both pets do not not do well outside of the home.
  • No plan in case of emergency

We’re like, � attached at � the hip

​

“

”

​

USER PERSONA

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 21

22 of 70

Kyle Waldron

Volunteer Host

Age: 37

Location: Chula Vista, CA

About:

Kyle lives in a single family home with his wife and his dog Sammie, who was adopted from the local shelter they have fostered with before. As a pet parent he empathizes with other pet owners who �are stuck with no place to go.

Goals & Needs

  • Wants to offer his home to pet families in need of a temporary place to stay.
  • Wants to contribute to community
  • Wants to know how he can contribute items to people in need.
  • Wants an easy way to reach out directly to families he can help

Hesitation & Pain Points

  • Worried about if he has enough space for everyone.
  • Does not want people to drop off pets and leave.
  • Worried if his home will be hit during the disaster and what will he do if he has to move everyone.

I've seen more than my share of hard times and natural disasters. Here's a good way to offer a hand to the next person.

“

”

​

USER PERSONA

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 22

23 of 70

Our Users

​

User Journeys

24 of 70

JOURNEY MAP

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 24

25 of 70

JOURNEY MAP

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 25

26 of 70

Our Users

User Scenarios

27 of 70

Ava Scenario

Pet Owner

Ava, a pet mom to a dog and cat, is sitting on her couch at her home in San Diego, CA when her phone goes off with a citywide alert that she is in the path of a wildfire. �

1

2

3

4

6

She grabs and organizes the things she needs to evacuate—including items for her dog and cat—when she suddenly realizes she doesn’t know where she can go with them. She begins to panic because she doesn’t want to leave her pets behind.

Fortunately, Ava found out from her vet about Communipet, an app that connects refugee pet families to temporary shelters. She picks up her phone and opens the app.

Ava settles into the temporary shelter she found with Communipet. She realizes that Communipet is an invaluable resource and decides to turn on all of its features, including wildfire notifications.

​

Ava jumps in her car with her dog and cat, and heads to her newly reserved housing, feeling less stressed about evacuating.

​

The app shows her a map of nearby places that are in the safe zone out of the path of the wildfire, and each place is open to people who are evacuating with their pets. Ava finds a place and scans the owner’s profile. She decides it’s a good fit for her. She taps on the location, and reserves it. The app confirms her reservation and provides the directions to the address.

​

5

USER SCENARIO

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 27

28 of 70

Kyle Scenario

Volunteer Host

Kyle, a dog lover who lives in Southern California, sees there’s a current wildfire happening in San Diego. Having experienced wildfires in the past, he remembers how panicked he was trying to evacuate with his dog.

1

2

3

4

5

6

He scans Facebook and sees community groups talking about pet families who are evacuating and need temporary housing. He realizes he has plenty �of space to host an evacuee pet family and wants �to help.

Kyle clicks on a post from one of the community groups that elaborates on the difficulty of evacuating with pets during a wildfire. It takes him to thread on reddit where the community is talking about the benefits of Communipet -- an app that connects refugee pet families to temporary shelters.

The pet family arrives and Kyle welcomes them into his home with pet amenities already set up and a safe place to sleep for his new furry friends. Kyle’s heart is full of gratitude and he posts about it on reddit about how great it was to help a family in need and that others should sign up for Communipet as well.

Kyle sets up his profile so that he can be available asap. Within a few days, he gets his first alert that a pet family has booked his home and is on their way giving him an ETA of their arrival.

Excited for the possible opportunity to help, he downloads Communipet, and signs up to be a volunteer host to donate space in his home, for a pet family in need.

​

USER SCENARIO

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 28

29 of 70

Our Users

User Wireflows

30 of 70

Feature Prioritization

​

Key Assumptions

After reviewing the user scenarios we mapped out all possible features, categorized what made sense to work on, and what was more of a save for later item.

​

This led us to list out different assumptions & technical specifications ahead of time so we could focus on the key screens that matched the scenarios to create the task flows.

Ava and Kyle would both be pre-screened during the sign up process in order for communication to happen more efficiently during a disaster. It is assumed in these flows that both Ava and Kyle go through this process and are verified, and they are a match for each other. Other assumptions are highlighted throughout the flows.

​

USER WIREFLOWS

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 30

31 of 70

Ava Wireflow

​

USER WIREFLOWS

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 31

32 of 70

Kyle Wireflow

USER WIREFLOWS

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 32

33 of 70

Our Brand

34 of 70

BRANDING

Voice and tone

​

CommuniPet is a community driven sense of togetherness. We want our users to feel like they are participating in something bigger than themselves for the greater good and also we want our users to feel that that can rely on their " village" to get them through uncertainty.

�Key words:�Trust�Compassion�Hope�Safety�Togetherness�Calm�Gracious�Informational�Educational���

​

We create a sense of trust and safety by helping alleviate anxiety and create a sense of calm for those in need.

CommuniPet is a place for those who want to express compassion by donating space in their home as a safe haven for pets and families in need.

By creating a space for informational resources within the app, CommuniPet acts as a hub for education and planning when evacuating.���

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 34

35 of 70

Design Lab III | Module 2 | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair

BRANDING

​

36 of 70

BRANDING

​

Brand Illustrations

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 36

37 of 70

BRANDING

​

Brand Lifestyle Photography

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 37

38 of 70

Design

Annotated Wireframes

39 of 70

Ava Rockspring

User Type 1: Evacuee Pet Owner

​

​

40 of 70

Ava Flow: Ava uses the map view and filters to find a safe haven after receiving mandatory evacuation orders.

Annotations

1. Main screen for evacuee - iPhone.

2. Map is tappable.

3. This clicks through to the Map screen.

4. Local emergency alert - fed from API. Expanded state.

5. Inactive section - not clickable.

6. Blue icon means this is the active screen.

7. Clickable, but not active.

8. Map screen shows all available safe havens on map within 100 miles.

9. On tap, filters pushes up to show available filters.

10. Purple is safe zone overlay. Only pins within the safe zone are shown.

​

​

​

​

2

3

4

​

5

8

9

10

USER 1 HIGH FIDELITY WIREFRAMES

1

2

3

4

5

6

7

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 40

41 of 70

Ava Flow: Ava’s filtering matches her to Kyle’s safe haven and she creates a reservation.

Annotations

1. When user taps on a pin to see more details, it centers on the screen and grows in size.

2. Other pins not tapped on turn to outline only.

3. When user tapes on a pin, information about the safe haven slides up over map.Display shows some information.User can tap on the right to go to a screen with more information.

4. User can also tap button to reserve now. Reserve now button pops up alert box to make sure they want to book (in case tap was made by mistake).

5. Details screen about safe haven and host.

6. Shows location of safe haven via map pin.

7. Additional details about safe haven

8. Reserve button opens alert over modal to make sure reservation was intended -- in case it was tapped in error.

9. Alert to confirm action intended.

​

​

USER 1 HIGH FIDELITY WIREFRAMES

9

6

5

7

8

2

1

3

4

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 41

42 of 70

Ava Flow: Ava receives confirmation and her reservation appears under Active Safe Havens on her dashboard.

Annotations

1. Once booking is made, user sees confirmation.

2. User can tap to the screen about the active safe haven.

3. Map shows approximate route.

4. User can tap to open directions in Google Maps app.

5. Active safe haven screen. User can access from booking confirmation or from dashboard if they close the app. This screen remains accessible until the stay is over.

6. Expanded view of some details from the safe haven. User can tap to go to full screen.

​

USER 1 HIGH FIDELITY WIREFRAMES

6

5

1

2

3

4

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 42

43 of 70

Ava Flow: In the resources tab, Ava can complete checklists to prepare for her evacuation and arrival to Kyle’s safe haven.

Annotations

1. Area for quick notifications and alerts for Ava, she can close them out, or swipe through them.

2. Tapping on Resources brings you to this screen.

3. Tapping on radio buttons fills with a check mark.

4. Tap on the 3 dot kabob icon to have a menu pop up about the lists created. Native Apple UI layout.

5. Tapping on the add item allows you to type out a new item for the list.

USER 1 HIGH FIDELITY WIREFRAMES

1

2

5

3

4

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 43

44 of 70

Ava Flow: Once Ava arrives at Kyle’s safe haven, she can share her safety status on social media.

Annotations

1. Once she arrives she can tap to share she is safe on her favorite social channel.

2. Integrates with native sharing app allowing her to compose her message without leaving the app.

3. Ava Taps Facebook to share.

4. Message window pops up for her to write and share

USER 1 HIGH FIDELITY WIREFRAMES

1

2

4

3

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 44

45 of 70

Kyle Waldron

User Type 2: Volunteer Host

​

​

46 of 70

Kyle Flow: Kyle donates a room in his home as a safe haven for evacuees on Communipet, and shares it on social media.

Annotations

​

1. Global navigation for the host view.

2. Share button opens the social share overlay.

3. Tap on Twitter to share safe haven and write a post.

4. An auto-generated Twitter post appears. The native iOS share feature is integrated into Communipet.

USER 2 HIGH FIDELITY WIREFRAMES

1

2

4

3

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 46

47 of 70

Kyle Flow: While viewing snapshots of his safe havens, reservations, and resources on his dashboard, Kyle receives a notification that Ava reserved one of his safe havens.

USER 2 HIGH FIDELITY WIREFRAMES

Annotations

​

1. Alternative dashboard style differentiates Host view from Evacuee.

2. Expand sub-menu items to see quick bites of each.

3. Active tab is indicated by brighter color.

4. Active emergency alerts in the community can be shared to social media, and affected areas can be viewed on a map.

5. Expanded sub-menus show highlights.

6. Reservation notifications appear in real-time.

1

2

3

4

5

6

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 47

48 of 70

Kyle Flow: Kyle views Ava’s reservation and it appears in his dashboard. In the unlikely event Kyle needs to cancel Ava’s reservation, he must first review Communipet’s cancellation policy.

Annotations

​

1. Reservations detail evacuee arrival, reserved safe haven, and accompanying guests/pets.

2. Host can contact evacuee from reservation or cancel in rare situations.

3. Tapping cancel reservation generates notification to view cancellation policy.

4. Expanded view of upcoming reservations sub-menu is updated to include new reservation.

USER 2 HIGH FIDELITY WIREFRAMES

1

2

3

4

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 48

49 of 70

Design

Iterations

50 of 70

WIREFRAMES

Ava Design Iterations

​

Version 1 Version 2 Version 3

​

​

Dashboard

​

We iterated on the main screen for the evacuee user (AVA) to handle two issues:

Ensure that the main action of the dashboard is clear to users

Provide additional helpful information to users who need to find help right away.

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 50

51 of 70

WIREFRAMES

​

Ava Design Iterations

​

Safe Haven Reservation

​

The detail screen for the safe haven went through several iterations to improve the information the user would see before making a reservation.

  1. Added details to the screen to show additional information about what to expect.
  2. Added time frame for availability.

​

Version 1 Version 2 Version 3

​

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 51

52 of 70

WIREFRAMES

​

Kyle Design Iterations

Add photos

�For the second user’s app, we made several design iterations, including to how the user added details for his listing. This included adding images.

  1. Added additional screens to include adding images.
  2. Fine-tuned adding images from the camera roll to show the user how the app changed once images were added.

​

Version 1 Version 2 Version 3

​

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 52

53 of 70

WIREFLOWS

Kyle Design Iterations

Listing Dates

​

Another area that went through several significant design iterations was how long the listing would be available for an evacuee. On the host’s side, time frame screens were added to the flow after the first iteration.

  1. Tweaks to calendar to have it reveal once user has chosen to add a timeframe.
  2. Adjust interactions to provide a more fluid experience.

​

Version 1 Version 2 Version 3

​

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 53

54 of 70

Design

Prototype

55 of 70

PROTOTYPE

Prototype

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 55

56 of 70

PROTOTYPE

​

Prototype - Map Flow - Ava

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 56

57 of 70

PROTOTYPE

​

Prototype - Checklist Flow - Ava

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 57

58 of 70

PROTOTYPE

​

Prototype - Share Flow - Ava

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 58

59 of 70

PROTOTYPE

​

Prototype - Add Listing - Kyle

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 59

60 of 70

PROTOTYPE

​

Prototype - Set Dates - Kyle

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 60

61 of 70

PROTOTYPE

​

Prototype - Share and View Listing - Kyle

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 61

62 of 70

Usability

Questions

63 of 70

USER 1 - USER TEST QUESTIONS

Task 1:

You live in San Diego and have just learned a wildfire is headed toward your home. You already have signed up with CommuniPet, and you know you can find a safe place to evacuate with your two pets. How would you find and reserve a safe haven using CommuniPet?

Task 2:

You are a CommuniPet user and are preparing to evacuate in case of a wildfire. You know the app has resources to help you organize. How would you create a checklist and add items?

​

​

Task 3:

You have just arrived at your safe haven and want to let your family know you are safe. How would you share?

​

​

​

Research Goal:�Determine how useable the feature sets are for the evacuee to find a safe haven.

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 63

64 of 70

USER 2 - USER TEST QUESTIONS

Task 1:

You live in the North Park neighborhood of San Diego, CA and just learned that there is a wildfire in the Beavercreek area. You have a Lemon Grove rental home already listed on Communipet, and would like to open a room in your personal home to evacuees in need. You open the app and the first screen is your dashboard. How would you create a new safe haven listing?

Task 2:

You just completed the steps to create a new safe haven listing. How would you share your safe haven to Twitter?

​

​

​

Task 3:

If you wanted to make a change to your cozy room safe haven, how would you edit the listing?

Task 4:

You would like to make your rental property at Lemon Grove available to evacuees. How would you change its availability?

​

​

​

​

​

​

Research Goal:�Determine how useable the feature sets are for a host to donate space for an evacuee.

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 64

65 of 70

USER 2 - USER TEST QUESTIONS

Task 5:

You receive a notification that Ava has reserved your cozy room with a balcony. How would you view her reservation details?

Task 6:

After reviewing Ava’s listing, how would you return back to the dashboard?

​

​

​

​

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 65

66 of 70

Thoughts

& Next Steps

67 of 70

Lessons Learned

Lessons Learned

​

  1. Sometimes you need more screens than you think you need.
  2. It’s important to align tasks between two user types.
  3. Having key roles on a team and the willingness to jump in and help everywhere made the team stronger.
  4. It’s important to simplify the storytelling in user flows.
  5. Not all prototyping tools are created equal - Figma was good for us for collaboration. In fact, all members of our team learned and participated in wireframing and prototyping.

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 67

68 of 70

Next Steps

Next Steps

​

  1. User testing of prototype.
  2. Iterate prototype based on user testing feedback.
  3. Develop a roadmap for development and handoff.
  4. Design screens for Android platform.
  5. Revisit features out in parking for time, including language translation and monetary donations.

​

​

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 68

69 of 70

Appendix

70 of 70

Appendix

Links

​

​

​

Planning

Research

Definition

Design

Prototype

Design Lab III | Module 6 | Playbook | Dream Team: C. Anderson, C. Brummer, K. Rhodes, K. Sinclair 70