User research, wireframing and prototyping
This is a conceptual project in which I designed a responsive website to make adoptions run more smoothly and try to remove common headaches people face when trying to adopt their new best friend.
see it here→
After the client, Supermassic, found my portfolio by chance, I was sent an email to join the Supermassiv team as a freelance designer. I was happy to work on their interesting project! The client wishes to make music NFTs accessible to people who know all about NFTs , those who have no experience with them (like myself), and anyone in between.
I was given the task to design a "drop page" which is where music artists would share a link to their followers to follow and purchase their music NFT. I was given a list of goals and objectives, as well as their prior style guide which they wanted to simplify. I made several screens for the drop page which included a: screen with a launch countdown, purchase page, page to view current collectors and responsive versions of these screens for tablet and mobile.
After my designs were approved, a developer worked on the coding using my designs on Figma. I coordinated with the client and developer on any changes needed during the development process and refined my designs based on any coding issues that were brought up. My second task with Supermassiv was to create their landing page. I sent over wireframes based on their requirements and worked on final designs when those were approved. I sourced and edited illustrations on Adobe Illustrator and was able to transform their previous style into a cleaner, simpler aesthetic that they requested.
I will continue to add more details about this project soon.
2020 saw a spike in pet adoptions. As more people worked from home, many of them seeked companionship from animals. I’ve designed a web flow to easily meet and adopt a pet from an animal shelter. Users set up their profile and background information ahead of time for the shelter to approve. Users are able to view extensive information about the dog or cat’s behavior, personality and health and are even shown a video prior to scheduling a visit. The goal is to match humans to their new best friends.
I conducted user research through a small sample survey to discover demographics of pet adopters and their experience in adopting an animal.
“We were able to go into the kitten room and play with the kittens before picking one. However, they didn’t have quite as many kittens as expected. There were lots more advertised on their website that had been already adopted by the time we visited.”
Potential animal adopters of a local animal shelter need a way to learn as much as possible about an animal and have a profile approved ahead of time in order to adopt a companion animal that is compatible with them.
I created a user persona based on the findings above, encompassing the demographics, frustrations, and goals of the survey respondents I believe this persona could help me focus on who to design for. Having a persona is useful to tie decisions on a real person one can empathize with instead of just creating a website.
28
Bachelors degree
Salt Lake City, UT
Lives with boyfriend
Librarian
“I can’t wait to adopt another cat. I’d love for Nigel to have company while we’re at work”
Iris loves animals, growing up she always had a pet of some breed so when she moved out she obviously got a pet of her own. She believes in adoption instead of purchasing from a breeder. She adopted her furbaby Nigel when he was a kitten from a local animal shelter. The process was not as great as she would have liked. Although she loves Nigel, it would have been great to know about his anxiety beforehand so she can prepare for it. Now she and her boyfriend Steve are ready for another cat, Nigel needs a friend after all! She hopes the process is better this time.
Friendly, Loves books, Introvert
A lot of the animals the pet adoption website showed were already adopted. Fees and process were not disclosed ahead of time. Behavior issues were not disclosed.
Adopt a second friendly cat that will get along with her current cat, Nigel. Be able to interact with the cat before adopting them. Be able to easily search size, age, and temperament of the cat.
I created a sitemap to create a full overview of usability. It helped to brainstorm which pages led to which, and how these pages would connect to complete the user goal: to adopt an animal they will love.
Through user research, creating a persona, and creating a site map, I conducted a 15 minute sketching session to quickly produce design ideas which I then translated to Adobe XD as a digital wireframe.
While creating the lo-fidelity prototype I made several design decisions based on how I felt a user would interact with the desktop or mobile website. A user would presumably start at the homepage and have a specific goal in mind, likely to either adopt an animal or help with animals. This flow focuses on adopting.
After clicking the adopt link they are brought to a page of animal listings they can filter based on type of animal, size, gender, etc. They are able to favorite listings that interest them. When clicking on a pet listing they can view information pertaining to the animal’s behavior, adoption fees, vaccinations and more. From here they can schedule a meet with the animal to see if they are a match.
I conducted unmoderated usability studies with five participants. Two men and three women between the ages of 26-40. I gave them several tasks to complete and vocalize any thoughts and frustrations they may have.
.jpg)
I added a hero image that would capture the user’s attention and emotion. The adopt and donate buttons are front and center but are also located on the menu. The home page includes a featured success story, articles with tips, and a footer with contact information, their address and hours, a newsletter signup, and social links.
I also created a sticker sheet to easily reference my design choices and themes all in one organized space.
The high fidelity prototype includes a search filter, favorite button. and leads the user through the process of scheduling a meet with the pet. The hope is that the user would have a profile prefilled and approved by the shelter so when a user sees an animal available on the website and schedules to meet with them, application delays would not be the cause the animal to be adopted by another family, which was a common frustration during user research.
User avatar clicks to profile
Search bar for users who know what they want
Categories for users who have some idea of the type of item they want or want to browse.
Popular items featured for users who have no prior preference for items
Bottom bar contains home, browse, favorites and cart buttons.
Scroll bar with menu categories fixed to the top
Filter button for more
specific needs
Item card with name, image, price, and a short description
Favorite button
Item description with
more detailed information.
Large add to cart button with price
Allergen information with illustrated icons
Toggle between pickup or delivery
Shortened item summary with option to add quantities
Tip option has set amounts with an additional option to remove tip or input a custom amount
Recent payment option is saved with an arrow to toggle options to change payment method
Order status changes based on stage of preparation
Timer with estimated
time order will be ready
A QR code makes it quick and easy for bakery staff to locate a customer’s order
Button to notify bakery of customer’s arrival
Points for rewards would encourage customers to order again in the future
Address with a button to link
to phone’s default map app
User avatar clicks to profile
Search bar for users
looking for a specific book
Easy-to-find toggle between dark and light modes
Recommended books
based on previous loans
Bottom bar contains frequently used pages such as: Home, Search, Loans, Favorites and Profile
Current loans front and center
Share button to send book link to others and a bookmark to read the book later
Book cover image with title and author
Tabs with book description and reviews
Buttons to borrow or preview book
Number of available loans
Tags with book categories and genre
Loan expiration timer with oldest loans at the top
Renew button to start process of extending the loan time
Return button to end loan early
Navigation bar with relevant pages
Hero image to set the tone of the overall website experience.
Large buttons with the top CTA buttons users are assumed to use.
Articles for users browsing the website.
Featured story to show adopters how
successful the shelter has been at matching
humans to animals.
Bottom bar contains home, browse,
favorites and cart buttons.
%402x.png)
Filter buttons with typical pet finding characteristics
Pet listings have an image and major characteristics such as age, size, breed and activity level.
%20%E2%80%93%202.png)
Personality traits, key information, breed details.
Detailed information with pet's
background and history
Adoption process and pricing
Similar matches
Creating a survey on animal adoption opinions and demographics was useful to know problems I would not have thought of on my own. As for the website itself, I have three adopted animals and animal shelters are quite amazing, it’s a place for people to find a new member of their family, and a place for animals to get a second chance at a happy and healthy home life. Were I to continue to work on this case study I would conduct more rigorous user testing and develop the user flow with more detail, including filtering animals by more specific parameters, seeing if users get stuck, and possibly create a user flow of what happens when a user has met the animal and wants to continue with the adoption.
I have a passion for design and I cannot wait for my next project. You can email me directly at mcheco.tung@gmail.com or find me on one of the sites below.
