Skills: Market Research, User Persona, User Scenarios, Screenflow, Prototyping, Mobile vs. Desktop Development.
Tools: Adobe Illustrator, Sketch.
Made as an academic project, I worked on an disaster relief system for pets. The idea was to tackle web development versus mobile development and see how design choices would influence each platform. Influenced by Hurricane Harvey and the California Wildfires, we realized that responsive web and mobile design would help alleviate the struggle that pet owners face in emergencies and natural disasters.
Research | Introduction
We were targeting a large industry. According to the American Pet Products Association 2017-2018 survey, 68% of all U.S. households include a pet and $70 billion are spent on pets. We also found that in times of disaster, shelters get overloaded. For example a shelter, after Hurricane Harvey, was housing twice as many pets. In shelters that can’t fund that many pets or are not no-kill shelters, combined with poor documentation, many pets are euthanized or moved across state lines minimizing the chance to reunite with their owners.
Research | User Scenarios
With this research, we brainstormed several scenarios. These scenarios really served to help us specify what different types of situations we would need to accommodate for, and what issues we would be able to address and try to assist with. We concluded that important areas of focus were: transport, shelter, and funding.
Here are some highlights:
Displaced Pet: Greg found a stray cat in the park right after a local disaster. The cat is too friendly to be feral so he keeps it overnight. He brings it to the vet and the vet tell him the cat is chipped. Greg calls the owner and finds that the owner is a state away and thought they had lost the cat forever and would love it back. However, there’s two problems, the owner is currently low on funds since the disaster and Greg is a poor student and they both can not afford to fly the cat back to the owner. Greg and the owner team up to crowdsource some money for the cat’s flight home, while he continues to foster the cat in the meantime.
Going Back to Disaster Situation: Lisa is a student at a California university. While in class, she was suddenly alerted that the fire is getting dangerously close to her apartment. Lisa hurries home to pick up her dog and knows she can’t bare to drop him off in an animal shelter but also knows that finding a pet friendly shelter is impossible. She crowdsources funds to find herself a shelter.
Research | User Profiles
We created three personas, with distinct profiles, goals, motivations, beliefs, and frustrations. These helped us to envision what kind of people would be using our web, what they would need to do, and how they would utilize features.
Ideation | Low Fidelity
We conceived the screen flow for the final design. There was an emphasis on types of user: the pet owner, the pet helper, and the pet donor. Based on the user type, we curated what they could see and operate on the application. Then we added the design patterns to the appropriate screen and labeled the screens with the most importance.
After revisiting the screenflow, we realized that there were only two user types: the owner and the helper and we modified our screenflow appropriately. We based our low-fidelity wireframes on existing UI’s like Go-Fund-Me.
After a round of iteration based on low fidelity wireframes, it was clear that the hyper focus on user types might be inhibiting our design. We modified our design to accommodate to both user types, without the narrow focus of three users and to segregate the help by types of help: shelter and transportation.
Solution | High Fidelity
In our high-fidelity wireframes, we designed for both the desktop and mobile platforms. There is an obvious difference for those who are going to use the mobile platform compared to the desktop platform. Mobile users are a lot more likely to be on the move, so they are users that are going to be looking for assistance for their pet. Desktop platforms are for the users that can offer help. With those ideas in mind, we designed for two different platforms that accommodate for two different types of users.
Solution | Take – Away
This was a project that went through intensive research early on and completely transformed towards the end to better fit our user’s needs. Our web development was mostly geared towards users that we designated as “helpers”, or users that were more likely to be sitting down browsing. Our mobile development was geared towards the “owners”, as they would be on the go looking for help. In the end the environment in which the user would be using, whether it was the web or the app, was a decisive factor in our design choices.