Make ordering pet supplies easy, quick, and safe in the age of the 2020 global coronavirus pandemic.
Introduction
Tools
Team
Solo-project
COVID has changed the way loyal clients interact with their local shops. Pets N’ Stuff is no exception and lacked an easy way to order supplies online. Clients needed a way to limit their exposure in public spaces while maintaining their easy and fun shopping experiences with Pets N' Stuff. The project goal was to add an easy and efficient e-commerce section to the existing website.
Constraints
-
Short timeline
-
Use existing brand guidelines
-
Create a responsive website
-
Concept project
-
No budget to utilize
Platform
-
Responsive web browser
Timeline
-
Two weeks
Research Plan
Heuristic evaluation • Competitive analysis • Interview 4 pet owners • Card sort • User journey map
Synthesis
Clients find it easiest to pop into the store, grab what they need, and maybe pick up a toy or treat on their way to the register. When dog owners brought their pup with them, they loved that their dog got spoiled by the staff and had fun on their dog adventure.
​
In general, users expect:
-
the purchase to be quick and straight forward
-
the store to have their pet's food when they need it
​
When shopping online, users expect:
-
easy to understand search results with just the right number of items related to the search
-
a quick checkout process
-
Reviews to be nonexistent or of little use on local shops sites
​
Why they support their shop:
-
friendly and helpful local shops
-
prefer to not have to ask for help
-
desire quality products with good sourcing
Users buy the same product every few months
Are within walking distance of their store
Find website through google maps
Pets get sick with abrupt change in diet
are loyal to brand or store because of savings opportunities
Have experienced their pet's food not being on the shelf
Users find it easiest to quickly grab items in store
Use the search function to find items online
Impulse buy a treat or toy for their fur-children
Tina Jones & Scooby
"Going to the store feels like a little dog adventure."
Adoring fur-parent
GOAL to buy her pet supplies easily and efficiently, and maybe spoil Scooby a little bit
PAIN POINT when Pets N' Stuff is out of Scooby's food
"I don't know what I would do if Pets N' Stuff was out of Scooby's food."
_jp.jpg)
Problem Statement
Tina needs to efficiently purchase her specific dog food when she needs it but is frustrated when her items are not on the shelf at her local pet shop.
Wireframes & Prototypes
My goal while building this e-commerce website was to simulate the in-store ease of purchasing needed items at each step. I wanted to give the user something they didn't even realize they needed.
​
Design Features:
-
The home page would have adorable photos to appeal to pet owners.
-
There is a large search bar to make it easy to find any item one might need.
-
The original user flow required users to sign in to their account which would bring them to their favorites page.
-
There is a "buy now" feature to quickly purchase a single item.
-
There is a line of suggested items at the bottom of the favorites page and on each product page for the times when Tina wants to spoil Scooby.
Wire Flow
Test Plan
-
Goal: to follow the wire flow pictured above​
-
Moderated remote testing over zoom with InVision Prototype
-
Testing Script:
-
​Explain Mid-fidelity prototype with minimal hotspots
-
Ask the user to explain their thoughts & expectations
-
Scenario & Task: "You are a returning customer with a store account. You are at work and want to stop by the pet store on your way home to get one of your regularly purchased items. You want to order it to have ready for pick up later today."
-
Synthesis
-
Users went to the navigation bar or search before thinking to click on the sign-in button.
-
The sign-in was slightly confusing without labels.
-
Easy as they moved forward through the remaining process.
Iterations
-
​Automatically signed into the user's account
-
See favorites and frequent purchases on the home page.
-
Added "buy now" option to home page
-
​Added headers for a clearer understanding of the sign-in page
-
Corrected the labels on the cart and account icon
-
Added the chatbox for support
-
Altered the pickup time to a drop-down to make it more clear and simple
-
​Changed the payment options to a radio button for the three separate options (PayPal, A credit card on file, or A new credit card)
Next Steps
-
Test for Gary - the secondary persona
-
Add subscription option
-
Design employee side of the interactions
Reflection
I learned...
-
to check over design with an editing eye before running any tests
-
to keep the prototype very simple and ask the tester to explain their process
-
using symbols and typography style guides make life much easier when designing in Sketch
-
that I can utilize larger sizes of text, objects, or buttons to guide the user's eye to the easiest path
I didn't expect...
-
users to avoid the sign in, even if they have an existing account
-
prototyping in Sketch to be much easier than only using InVision. Although overlay options in prototypes are easier with InVision directly
-
that sometimes the best UX is designing to make life easier more so than solving an overt pain point
It was challenging to...
stay focused on only Tina's persona and problem statement. I created a secondary persona named Gary, designed his user flow, and built wireframes for his solution. My time would have been more efficient focusing on one solution at a time.
The best part was...
-
talking to users about their pets, animals make everything better
-
creating digital wireframes in Sketch
-
knowing I created a product that would help the clients as much as the business
"Great job of speaking to stakeholders and thinking about future iterations of the site. Your product is well informed by your research and your user persona."
~Stephanie
"Love the concept of giving people something they didn't even know they needed. Great energy during your presentation! Very engaging."
~Jared
"You're a master visual storyteller - keep up the great work! "
~Jen