Case Study:
Big Bite Pet Supply Store
Website
Project Overview
The Problem
People do not want to carry heavy bags of pet food in NYC where not everyone has access to a vehicle.
Goals
Goal is to create an easy and convenient app for people to use to order and have pet food and supplies delivered right to their door.
The Product
Big Bite Pet Supply Store is a local pet supply shop in Brooklyn, NY. Big Bite brings to the neighborhood the essential supplies needed to care for a pet and provides services such as grooming and boarding of pet.
My Role
UX designer leading the app and responsive website design fro conception to delivery
Responsibilities
Conducting interviews, paper and digital wire framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Project Duration
August 2021 to September 2021
Understanding the user
I conducted interviews and then created empathy maps to help clarify the needs of customers that I am designing for. One of the main groups of people had the same problem, many of interviewees do not have a vehicle, so delivery of heavy pet food and supplies in a convenient website is vital. Collecting the data from all of the interviewees confirmed a need for an website for Big Bite Pet Supplies.
Personas & problem statements
Shawn is a busy CEO who needs to be able to buy dog food online because of lack of vehicle and delivery options.
User Journey Map
After reviewing the journey map it showed how important it is to have a website that offers delivery of pet supplies to its local customers.
Starting the design
Sitemap
Users wanted an easy to navigate website, so I used that data to create a sitemap. My goal was to make strategic Information architecture decisions that would improve overall website navigation. I chose was designed to make things simple and easy.
Paper Wireframes
Many of our users use their phone more often than desktops to purchase their pet food, so I have created a version that can be viewed on their mobile devices.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Usability study findings
To prepare for testing, I created a low-fidelity prototype. I used this prototype to conduct an unmoderated usability study with 4 participants. Here are the main findings uncovered by the usability study:
User wants an easy to use website
2. User wants delivery as an option
3. User wants accessibility functions
Refining the design
Mockups
Based on my insights from the usability studies, I added the changes like adding icons and a cleaner display. To make the checkout flow better for our users we add detail checkout screens for a better buying experience
Accessibility considerations
Added icons for those who are visually impaired, such as large text, text-read function and alt text to images for screen readers
2. Large icons to help navigate through the website easier and faster
3. Used images to help all users easily order what they want regardless of language barriers
High-fidelity prototype
My hi-fi prototype followed the same user flow as my lo- fi prototype, and include the design changes recommended on our user study map
Link to prototype:
Going forward
Takeaways
Impact:
The website will help busy users order pet food and supplies and have it delivered right to their door.
What I learned:
What I learn while working on the design of the website that the first iterations of your design is never the final product and only gets better with repack from real life users.
Next steps
I will conduct another usability study round to help reaffirm the design route I have taken for the website
2. I will add more accessibility functions and icons to my design