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
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.
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.
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.
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.
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.
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.
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.
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.
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.
Applying the UI kit and images to the wireframes, I designed high fidelity mockups for every page and overlay in Figma and created a prototype. The pages below show the task flow's main pages, including homepage, general livestream page, specific shelter page, and selected dog page (Jet!).
Applying the UI kit and images to the wireframes, I designed high fidelity mockups for every page and overlay in Figma and created a prototype. Below are the task flow's main pages, including homepage, general livestream page, specific shelter page, and selected dog page (Jet!).
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.
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.
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.
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!
Tel: 058-621-0255 (Israel) / 646-299-8373 (NY)
Tel: 058-621-0255 (Israel) / 646-299-8373 (NY)