HAPPY TAILS

RESPONSIVE WEB DESIGN

Client: Happy Tails, a fictional livestreaming platform for animal shelters

Role: UX/UI Designer

Framework: DesignLab's UX Academy

Tools Used: Figma, Illustrator

Background

Happy Tails, a fictional organization created as part of DesignLab's UX Academy, is an interactive livestreaming platform of animal shelters in New York. I kept the original assignment, which was to create a website for a non-profit umbrella organization of animal shelters where people can discover and learn more about nearby shelters, but added a twist. I had recently learned that on Twitch, a popular livestreaming video platform, viewers can purchase "cheer bits" to give to gamers/livestreamers. Bits are a type of virtual currency that viewers can spend on their favorite gamers' pages. Twitch pays the (major) gamers one cent per bit they receive, which can add up to a lot of money. So I figured that if people enjoy watching other people play video games (and are willing to pay them for it), they most likely would enjoy watching livestreams of puppies. While most people love animals, many are not able to adopt or foster but would still like to support animals in need. And who doesn't love watching puppies play! 

While this site could have been done with all the animals in a shelter, I chose to focus solely on dogs for this project.

Challenge

Happy Tails was in need of a responsive website to raise awareness and support for the shelters and dogs. They were also in need of new branding. 

Solution

I created a livestreaming platform where viewers are able to watch dogs play, learn about nearby shelters, and even start the adoption/fostering process. They are also able to give virtual treats that convert into cash donations to help the dogs in the shelter. 

Research

Competitive Analysis

I researched information on animal shelters and the adoption/fostering process. I conducted competitive analysis on other livestreaming sites to determine their patterns, strengths, and weaknesses. This enabled me to put together a list of key features for the Happy Tails site.

Interviews

I interviewed three women living in Israel. Even though Happy Tails ended up focusing on New York shelters, these interviews helped me better understand the general dog adoption and fostering process.

Two of the interviews were done over the phone; one woman had recently adopted a dog and the other would love nothing more than to adopt but is not allowed to have animals in her current apartment.

For the third, I visited a dog adoption fair in Jerusalem and interviewed a woman who had two dogs of her own and was also fostering two additional dogs. She was very active with a non-profit animal organization and it was extremely helpful to hear that perspective.

If I could do the interviews again, I would have spent more time at the dog adoption fair and would have interviewed more people. I would have made sure to interview some men, as well as dog owners in New York. It also would have been helpful to talk to Twitch users to learn more about that experience.

A dog fell asleep on my foot while I interviewed at the adoption fair.

Define

Persona

Next, I developed a user persona inspired by all three people that I interviewed. Margaret adores animals and is constantly trying to find permanent homes for shelter dogs. 

Ideate

Site Map

After collecting and synthesizing all the data from the research stage, I created a very detailed site map laying out every page of the Happy Tails site.

Task Flow

I created a task flow for a user to buy a treat for a dog. The task flow made it clear which pages I would need to create for the user to accomplish this task.

Design

Sketches

Before jumping into wireframing on Figma, I sketched out and iterated on a few of the key pages. I find it extremely helpful to sketch and present my ideas to others and receive constructive feedback at an early stage of the design.

These are a few of the homepage options that I sketched.

Low Fidelity Wireframes

After I felt that I had a good foundation from my sketches, I created low fidelity wireframes in Figma. I decided to use Figma for this project (instead of Sketch) because I wanted to take the opportunity to learn a new tool. I found Figma to be very user-friendly and I really enjoyed using it. 

I created all pages/overlays necessary for the task flow, including homepage, livestream page, selected shelter page, and selected dog page.

Homepage

Livestream Page

Shelter Livestream Page

Selected Dog Page

Style Guide

It was then time to design a logo for Happy Tails and create a style tile that would be a basis for my high fidelity prototype. I searched for inspiration on Pinterest and created a mood board as a reference. I wanted a logo that had an illustration next to the company name so that it could also be used as a standalone icon, such as in the footer.

Prototype and Test

High Fidelity Prototype

Homepage

Livestream Page

Shelter Livestream Page

Selected Dog Page

Here are examples of the checkout/confirmation and treat donation overlays.

In addition to the desktop site, I created a tablet and mobile version of the homepage.

Tablet

iPhone 8

Usability Testing

Overview

As I prepared for testing, I created a test plan outlining goals, tasks involved, and a script. Using Figma, I tested my prototype on three users. 

Test Goals

• Test if the site is clear and useful.
• Test how the user moves through the established task flow.
• Test the ease of use in navigating the site.
• Note any areas of hesitation, confusion, or difficulties experienced by the user. 

Key Findings and Iteration

The task that I gave to the testers was to purchase and give a treat to a dog so it was a bit disappointing that two out of three testers thought that they were finished after buying the treat (before giving it to a dog). After testing, I went back and added extra text to make sure that each action was clear.

Final Thoughts

Happy Tails turned out very different than I had original planned and I loved being able to take an assignment and running with it. While this project was more realistic than Zeit (the fictional time travel tourism site), I'm still looking forward to working on a real product!