Brix
Wine Shop
E-Commerce Design

The Project
I reimagined the website of a local store as a concept project. I chose Brix Wine Shop, a local hand-selected (curated) wine store. My goal was to design an e-commerce option for an existing website with no current way of shopping online. I designed a digital prototype illustrating how a customer would be able to shop online.
The Problem
"A wine shopper needs a way to buy wine online in an informed manner because the current website lacks the same level of verification/knowledge-share as obtained in-store."
Proposed Solution
"I believe that by providing quick-view detailed wine descriptions and reviews for online shoppers, I will enable a more confident purchase."
Tools
Axure RP
Time
2 Weeks
Role
This was an individual task so I wore many hats. I researched, sketched, created navigation, digitized wireframes and a digital prototype.
Overview
Process
User Research
I used a screener survey to narrow my target user, and performed several interviews to discover the pain points associated with shopping online, and with purchasing wine. Once I had this information I took a chance to execute a card sort of the 100+ products. I concluded my research with a thorough heuristic evaluation.
Analysis
When the interviews were complete I gathered the consistent comments among the 5 interviewees and focused on the main pain-points. I then vetted the competitive analysis to understand the competition and what works or doesn’t work for online wine shopping.
Design
Once my goal was clear I began sketching some variations of potential site layouts. My goal was to stick to the theme and feel of the current site while keeping the shopping experience smooth, seamless and quick.
Digitizing
My paper sketches gave me a clear path to begin creating a digital wireframe. The wireframe would have many iterations but in the end I was able to create a functional e-commerce flow.
Testing
I knew that the original digital prototype would need some work, usability testing proved that it needed a lot of work. I went through 6 usability tests, iterating along the way, before settling on the deliverable version.
Delivery
It was now time to deliver my design. I presented my process and demonstrated my clickable prototype to the stakeholders and fellow designers.
Research & Synthesis
Beginning with an online screener I was able narrow the scope of my target user. A contextual inquiry of customers at the wine shop, and an in-person interview of the store owner provided useful information about the target user. With this knowledge I was able to write a list of questions to ask in an interview setting.
​
To begin the interview phase of my research I had to design questions in a way to understand the target user’s pain-points when shopping online, and when purchasing wine. I learned that the target user liked to ask questions and gain guidance from knowledgeable staff. The interviews provided me with an understanding that shopping online should be simple, intuitive and reversible.
​
To fully understand the site I was designing an e-commerce feature for, as well as how other online wine shopping sites behaved, I performed a heuristic evaluation. Knowing how other sites behaved and how the current site was designed informed my thought and design process.
​
I chose 3 competitive sites to analyze. Two of the sites were local direct competition and the third was a national site. By knowing the competition and what they had to offer and how they provided it allowed me to devise a best course of action while designing and developing the e-commerce feature I would be creating for the stakeholder.
​
A card sort helped me to understand how I should organize the 100+ wines that the store carried. I performed 2 open card sorts to understand how a target user would go about trying to find wine.
With 2 successful open card sorts completed I took the information gathered and performed 2 additional closed card sorts to confirm that the thought process for the hierarchy and information architecture were correct. Both of the participants for the closed card sort were able to swiftly and easily organize the wines into the predetermined categories, providing the confirmation I needed.
I could now build navigation and menus according to organization discovered in the card sorts.
DESIGN
I began my design with a sitemap. I utilized the card sorting results to create the proper layout. The sitemap determined the navigation for the website and how the the 100+ wine options would be categorized.
​
Once the sitemap was sketched I penciled out a user flow to help me understand the path the user would take. It needed to feel effortless and it needed to make sense. To have a clear reference, I digitized the user flow. I found myself comparing the wireframe and the path I was creating to the user flow regularly to ensure continuity.
​
Understanding the navigation and user flow of the design I decided to paper sketch a few concepts. It took many iterations but I finally settled on a design to use as a paper prototype. I performed several usability tests on the paper prototype, making adjustments along the way until the design felt solid enough to become a wireframe.
​
DIGITIZING
With my sketches in front of me I began to digitize them into wireframes. Axure made quick progress of my work and finding the best click-link animations made the design shine. This entire process remained heavily iterated. The homepage and shop page were the only screens I created that didn't go through multiple iterations since they were a direct mockup of the current Brix website.
​
One of the most important screens in my wireframe was the product listing page. This page would be the central location for where/how users would search/browse and shop for wine. I needed to include enough helpful tools while maintaining a sense of simplicity so as to not overwhelm the user. Several iterations would occur on this page and I believe many more could still happen.
​
One of the most important screens in my wireframe was the product listing page. This page would be the central location for where/how users would search/browse and shop for wine. I needed to include enough helpful tools while maintaining a sense of simplicity so as to not overwhelm the user. Several iterations would occur on this page and I believe many more could still happen.
TESTING
I found that testing and getting feedback was helpful in ensuring that the design met the users needs. One of the many insights that I gained from the usability test was that a click-box navigation made no sense. Reimagining a new mega menu for the navigation kept my design spirit alive. Figuring out the layout and placement of the list options within the menu took a lot of thought. I wouldn’t mind going back in and changing the size of the menu, where it populates from and where it links to.​
​
The browsing page was an important piece of the design and its full functionality was crucial to a seamless and confident experience. During the interviews it was clear that shopper preferred some guidance when searching for wines, so providing them with recommendations was pertinent. However, through usability testing it was noticed that where I had placed the button was not being noticed or utilized. Therefore I moved the button to the left panel along with the filters in an attempt to separate it and make it more noticeable.
​
I knew that a piece of the shopping experience would be shipping. Every good e-commerce has shipping options so the customer may choose the best method for them. During the research phase, the shipping options were found in several locations, so I first placed it within the shopping cart. During usability tests it was noted to be confusing in this location and recommended to be placed on the information page instead. During the iteration process and for the final deliverable i did leave the shipping on the information page. In the next iteration I'd like to rethink and possible relocate the shipping once again.
DELIVERY
Brix E-Commerce Walkthrough
I presented my process & design, and demonstrated my clickable prototype to stakeholders and fellow designers. The prototype was a low-fidelity wireframe, of simple gray boxes, minimal wording and clickable links. I kept the homepage and shop page true to the brand and layout of the current website and did my best to continue that theme throughout the e-commerce portion of the wireframe.
​
This project taught me a lot throughout the entire process. I learned that you must use design methods that are recognizable to users, and that users can conflict on where they expect to find certain sections along the way. I had to remind myself who the target user was, and what they would expect to help the design stay clean. Other lessons I learned were that hierarchy matters, animation matters and that no design is ever finished.
​
In the next version I would like to add click-ability and proper navigation to the star ratings on the browsing page, address the recommendation button and its current state as well as add a direct-to-cart option from the browsing page. Version 2 has so much potential!