A small bowl and a large appetite
A case study on e-commerce and small businesses
Client
Pet's Corner Pet Shop - Case Study
Duration
14 Days
Tools & Method
-
Competitive & comparative Analysis
-
Archetypes
-
User flows for current design
-
Wire framing with Figma
-
Prototyping & usability testing with Figma
-
UI & visual design
Team
Alejandro Aguilar - UX Researcher & Strategist
The Store
Pet’s corner is a community minded; family owned pet store located in Richmond & Sunset district of San Francisco. They sell healthy pet food, toys and a wide selection of natural products at fair prices.
Business & Project Objective
Pet’s corner wants to continue to draw people to their family friendly store. However the owners want to broaden their customer base by adding e-commerce to their existing site.
Requirements
-
Maintain their existing brand of natural inexpensive and family-friendly with a small shop feel
-
Have a clear way of locating specific products
-
Support a single page for each product
-
Have an efficient means of purchasing one or more products
-
Steer customers towards popular products
-
Allow customers to contact the business (including to request a product not otherwise stocked)
See the journey below or
The Research - Comparative and competitive analysis
Before I could even have started thinking about designing a solution, I needed a better idea of what the conventions were for e-commerce sites. In addition, also what the conventions of pet supplies stores are so that I can better blend what users will expect when navigating the website while not compromising their brand.
Key Takeaways
The main things that I found were that most contained the following:
-
Offered domestic shipping
-
Order history
-
Browse by pet
-
Reviews by customers
Interesting Elements
In addition, some of these sites had some interesting details and I wanted to highlight a few that I thought would work well with what I was working toward.
Targeting our shoppers needs - Our Personas
Michael the entrepreneur | A shopper that wants to be able to quickly purchase items at competitive prices and access a diverse selection
Eliza the HR manager | A shopper that deeply care about the quality of food her pets eat and as much information as possible on these products.
Mary the writer | A shopper that’s a new dog owner and would like to be able to learn and gather information on how to take care of their new pet.
Mapping out the foundation - System Map
Something witty here
With these shoppers in mind, I needed a bigger outlook on how the system should respond to what the users needed and to ensure there weren't gaps in the process.
Navigation organization - Card sorting
Next I implemented card sorting with 9 users. It helped give me valuable insight on how to organize the information they saw as most important to them and begin creating an information structure for the website. This will be very helpful when building out the navigation bar.
Key Insights:
-
People liked the ability to shop by pets
-
Quick access to health care items
-
Separate out Food, Supplies and Healthcare
Working with the current website
Before I started redesigning the site to include an e-commerce portion, I wanted to see what could be kept from the current design to keep the cost of making the site low as well as to keep that small business feel.
The current site does the following well:
-
Emphasizes community, family, and friendly values
-
Contains helpful articles
-
Hosts photos of pets that come through the store
These are things I do not want to lose when designing a new site as I believe these are valuable in keeping their branding intact.
Ideation - First wire frames
Low-fidelity wire frames helped me organize the site and test out the navigation.
New Homepage
Homepage with extended navigation bar
Navigation Overview
-
Justifying the shop menu to the left, makes it easier for users line of sight to continue following the menus options
-
5 initial options to choose from so that users like Eliza or Mary do not get lost trying to find something
-
A secondary and third drop down menu that expands as the user hovers over the tab.
Usability Testing
I tested this iteration of the site with 4 users and gathered the following insights:
-
To make the process of reordering more intuitive.
-
To make the contact information for the website easier to find
-
Locating the address for the stores wasn’t as intuitive as in the original site
-
To much white space in certain areas of the site
The Solution
Taking the insights I received from our usability testing as well as from all the research I had done prior, the following is what I had created as a final design.
The solution hit the following business goals & requirements:​
​
- Navigation Bar
- Simplified navigation bar with the original sites information placed under tips & advice
- The navigation bar also creates a clear way of locating specific products​
​
- Product Pages
-
Each item has its only single page which can be seen in the annotation photos below.
-
Enable the ability to write and read reviews for each product.
-
Our persona Eliza who would want to have as much information on a product as possible including other customers thoughts and views on it.
-
-
Popular products as well as new products are clearly displayed on the home page.
-
-
Contact
-
Contact information can be found on the footer of each page as well as on the about us page.
-
It helps keep the small business feel that they can be contacted with any questions and are just a walk or quick drive away ​
-
-
-
Brand
-
Maintain the existing brand of natural inexpensive and family friendly small shop feel by having the slideshow of information rotate through the family and photo photos the business takes of their customers and their pets while conveying information.
-
Homepage if it were in high fidelity
