Bottles
E-Commerce
(Concept Website)
Project Overview
Design a working e-commerce and navigation system for a local business website. I chose Bottles Fine Wine which has a great local presence in their brick & mortar store, but no e-commerce store options and confusing website navigation.
Timeline
Tools
2 weeks
Axure
Platform
Google Chrome website
Deliverables
Overview of Research, Design Process, Site Map, User Flows, Sketches, Iterations, Usability Testing Results, Interactive Prototype, Consent Form, Screener, Card Sorting, Heuristic Evaluation, Competitive/Comparative Analysis
DISCOVER
Problem Statement
Frequent wine purchasers need a way to browse and order online because they want to quickly pick up their purchase at the store.
Solution Statement
We believe that by creating a personalized online ordering system we will make the purchasing process quick & convenient. We will know this to be true when shoppers order online and add favorite products for future purchases.
Research
I visited and photographed at the store to gain a better understanding of what types of items they carry and how they currently categorize their items in-store. I noticed they tend to separate their wines according to Region which does make sense in a store setting, but I was curious to see how others would categorize the various wines and liquor.
Interviews
5 interviews
2 in-person & 3 over the phone
These interviews were with people who shop at wine & liquor stores at least once a month. They provided some great insights with most having certain items they purchased frequently and wanted transactions to be quick. They were interested in “grabbing their usual item and going” either to their house or to a social event.
“I’m in and out of the liquor store quickly”
“I usually have an idea of what I want”
DEFINE
Affinity Mapping
Using an Affinity Map, I saw indications of users wanting to be independent. Most were interested in getting their usual items and leaving the store quickly to get back to their houses or social events.
Research Insights
Frequent liquor store shoppers have their “usuals” that they tend to purchase regularly. They like to learn about new items and similar beverages. Expressed interest in educational classes and tastings to learn more about new products. Interested in the idea of ordering and purchasing online and having the convenience of quickly grabbing their paid for products at the store.
Card Sorting
Used Optimal Workshop to create Card Sorts with 100 items in order to gain a better understanding of how users would sort various wine and liquor items. I performed 3 open card sorts which gave me initial observations and clear indications about sorting. I then performed 2 more hybrid card sorts in order to solidify my findings in the open card sorts.
Wines tended to be categorized by “white” or “red”, but there was some confusion on items like Sake, so I created a separate “Specialty Items” category for these items. Ciders tended to be considered closely related to Beer in the card sort, so I created a label of “Beer & Ciders” since that was how many categorized the items.
The great sake debate...where to categorize it?
Competitive Analysis
Some offered quite a bit of option, but no in-store pick up, which seemed more of interest to those I interviewed. Client (Bottles) and other sites highlighted their Delivery service, but not many of those interviewed were interested in that feature.
DESIGN
Sketches
Site Map
& Page Layout
Design Process
Usability Test
Usability Test Findings:
On the Billing page, "Expiration" and "CCV' was missing for checking out with a Credit Card. There was a "Notes" section that was confusing for those doing the Usability Test. Confusion when they fell off the "Happy Path." Some frustration with not being able to sort according to Variety.
"Why can't I sort out my pinot noirs?"
"What are notes supposed to mean in the checkout?"
Iterations
Adding Favorites
Added a heart button to add items to Favorites and a Hidden panel in order to add some information about the selection and visual dimensions to the page for interest.
Billing Information Iteration
“Expiration” and “CCV” was missing and “Notes” was confusing for users.
Confirmation Page Additions
Added box around Rewards information for clarification and added "Back to Home Page" to create navigation out of the page.
DELIVER
Final Wireframes
Home Page
California Red Wine
Landing Page
Selecting Wine to Shopping Cart
Check Out Screens
"Oooo... I like the idea of picking up in-store!"
Next Steps
The ability to sort by Price, Type, and Brand.
A fully functional Rewards Program.
More in-depth information about the products and classes.
Thinking of a “virtual bartender” that would provide advice about drinks, recipes & recommendations.
Reflection
Pros: People commented that the design is clean and easy to navigate.
Cons: Some confusion when they fell off the “happy path”, project time constraints prevented fleshing out all the different paths. Need to have a section for “Rose”, champagnes, and other items that were not included in the original card sort.
Overall I learned a lot during this project. I gained knowledge in Axure, Information Architecture, and the checkout process.