how might we
Allow people to support local business during a pandemic?
Give customers peace of mind by minimizing their in-store shopping?
e-commerce:
pets n’ stuff site redesign
problem
Customers need to be able to purchase online from the local pet shop so that they can get high quality items and save themselves from unnecessary trips and exposure to the public. There is no current online purchasing option.
challenge
To build an intuitive checkout process and redesign site navigation as necessary within two weeks and present ideas to stakeholders.
Redesign the landing page, include product information pages, and build a user-friendly checkout process.
proposed solution
Let’s dive into the process…
competitive & Comparative analysis
Comparing against other e-commerce sites informed what Pets N' Stuff could incorporate from others in the e-commerce space.
The site was missing the following key features:
search bar
product pages
product descriptions
ability to purchase any products
a lead to popular products
product reviews
Current state of the website: cluttered and busy interface.
interviews
Key insights from interviews revealed the following trends:
Online purchasing options is important
Concern about their health having to shop in-store, however both pet and pet owner enjoy the experience of in-store shopping for socialization and customer service
Customers want to pay reasonable prices
Convenience is important in terms of location
People love their pets like family members
One key thing to note is that the interviews were completed during the height of the Covid-19 pandemic. This may inform why interviewees felt strongly about having an alternative purchasing option online.
user flow: purchasing dog food
This was a good time to synthesize the user flow, as an online-purchasing option seems to be a good solution for the questions posed above.
Pictured is a user flow of shopping the website and purchasing a pet product. This helped provide me with a logical thought process and what screens to focus on creating.
hand sketches
landing page
Pet Food & Supplies Overlay/dropdown
pet food & supplies page
dog food page
product page
product description page - product added
checkout form
Order confirmed
About us page
Contact us
See the clickable prototype I used for testing here.
Usability testing: results
With the first rendition, I ran a round of usability tests with 5 users. I tasked each of them with shopping for Blue Buffalo dog food and to complete the entire checkout process.
5 of 5 - Confusion regarding the cart icon
Expected a pop-up at the cart after adding the item
Expected a confirmation like “Added to cart.”
Expected to be able to click on the cart to go to a checkout screen
4 of 5 users said they would have liked to be able to delete or change quantities
Expected ability to do this while viewing items in the cart.
Expected ability to be able to make these changes on the checkout page.
3 of 5 users clicked on Dog Food in popular items expecting to find what they needed
Learnings:
Pay more attention to text size and where the eye is drawn. Hierarchy does matter and should be incorporated no matter what kind of site or app it is.
Utilizing common e-commerce practices is what is most familiar to people and therefore arguably, more usable.
Next steps:
Edit cart overlay to “pop” more.
Add quantity and delete functions to shopping cart.
Add banner to homepage to feature deals/special promotions, to draw customer’s eye.
More research in the way of comparative analysis- this time in a more organized fashion, to actively seek out common practices and incorporate them into the prototype.