Project Overview
The problem
Available pet food delivery websites have cluttered design, and and confusing order status.
The goal
Design a pet food delivery website by providing clear navigation and offering a clear order status.
The product
Lin’s pet food is a shop that sells pet food. The shop needs a tool that help people buy pet food online and delivered to their home. Lin’s pet’s primary target users include working adults who have pets
My role
UX designer leading the Lin's pet food website design
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design
Project duration
March 2021 to May 2021
Understanding the user
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users treat online shopping as a fun and relaxing activity when they need a break from school or work. However, many shopping websites are overwhelming and confusing to navigate, which frustrated many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of relaxation.
User pain points
Experience
Online shopping websites don’t provide an engaging browsing experience
Navigation
Shopping website designs are often busy, which results in confusing navigation
Interaction
Small buttons on shopping websites make item selection difficult, which sometimes leads users to make mistakes
Persona & problem statement
Anna is a graphic designer
who needs to buy pet food online and let them be delivered to her home because she does not have to go shopping.
who needs to buy pet food online and let them be delivered to her home because she does not have to go shopping.
User journey map
I created a user journey map of Anna’s experience using the site to help identify possible pain points and improvement opportunities.
Paper wireframes
Wireframes
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations below focus on optimizing the browsing experience for users.
Digital wireframes
After ideating and drafting some paper wireframes,I created the initial designs for the Lin’s pet food websites, These designs focus on delivering personalized guidance to users to help manage their order.
Digital wireframe screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
https://xd.adobe.com/view/dbf6d302-7893-4062-8150-3175543a5503-8ea5/
Usability study findings
To start testing the designs, I created a low-fidelity prototype which you can view here. This prototype was used in an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study:
1. Cart
Once at the checkout screen, users didn’t have a way to edit the quantity of items in the cart
2. Checkout
Users weren’t able to easily copy the shipping address information into the billing info field
3. Account
During the checkout process, there wasn’t a clear way for users to log in to their account to pre-fill previous billing and shipping info
Refining the design
Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was adding the option to edit the quantity of items in a user’s cart using a simple “+” or “-” option. This allowed users more freedom to edit their cart without going through a complicated process to add or remove items.
Mock up
for mobile web
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.
https://xd.adobe.com/view/05331c19-170d-48ed-b2a5-590f66faad6b-5060//
High-fidelity Prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.
https://xd.adobe.com/view/05331c19-170d-48ed-b2a5-590f66faad6b-5060//
Accessibility considerations
1.Headings
I used headings with different sized text for clear visual hierarchy
2. Landmarks
I used landmarks to help users navigate the site, including users who rely on assistive technologies
3. Screen Readers
I used headings with different sized text for clear visual hierarchy
Going forward
Takeaways
Impact
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next steps
1. Testing
Conduct follow-up usability testing on the new website
2. Ideation
Identify any additional areas of need and ideate on new features
