top of page



(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.


2 weeks



Google Chrome website


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


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.


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.

Screen Shot 2019-01-20 at 10.27.07
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”



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.

Screen Shot 2019-01-20 at 10.02.52
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
Screen Shot 2019-01-17 at 12.39.31

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.

Screen Shot 2019-01-17 at 12.39.52
Screen Shot 2019-01-17 at 12.40.59

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.

Screen Shot 2019-01-20 at 9.01.39 PM.png


Screen Shot 2019-01-20 at 9.01.19 PM.png

Site Map

& Page Layout

Design Process
Screen Shot 2019-01-20 at 9.01.26 PM.png
Usability Test
Screen Shot 2019-01-20 at 9.01.06 PM.png

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?"


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.

Screen Shot 2019-01-20 at 12.43.41
Screen Shot 2019-01-20 at 12.44.01
Screen Shot 2019-01-20 at 12.44.07

Billing Information​ Iteration

“Expiration” and “CCV” was missing and “Notes” was confusing for users.

Screen Shot 2019-01-21 at 12.53.06
Screen Shot 2019-01-21 at 12.53.32

Confirmation Page Additions

Added box around Rewards information for clarification and added "Back to Home Page" to create navigation out of the page.​

Screen Shot 2019-01-21 at 12.54.02
Screen Shot 2019-01-21 at 12.53.47


Final Wireframes

Home Page

Screen Shot 2019-01-20 at 12.38.43

California Red Wine

Landing Page

Screen Shot 2019-01-20 at 12.39.07

Selecting Wine to Shopping Cart

Screen Shot 2019-01-20 at 12.39.20
Screen Shot 2019-01-20 at 12.39.41

Check Out Screens

Screen Shot 2019-01-20 at 12.40.24

"Oooo... I like the idea of picking up in-store!"

Screen Shot 2019-01-20 at 12.40.10
Mid-Fidelity Prototype
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.


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.

bottom of page