This is an in depth look at how I applied a thoughtful design process to create an eCommerce website for a fictional local business founded in research, testing and iterative improvements.
The client
TheBrewLab is a dog loving, family owned beer distribution company serving their community since 1990. They cater to local and wholesale businesses alike and have recently opened up a microbrewery to sell their own craft beers and branded merchandise along with their selection of domestic and international beers and supplies. Their current website is outdated and brings in no online sales and does not have a way for customers to place orders online. 
My Role
This was a solo project where I wore multiple hats of Researcher, UX/UI Designer, Product Designer, Prototyper and Project Manager. 
Time Frame
2 weeks // August 2020
Strategy
Create a brand identity for this fictitious company, design and prototype a website that's accessible to local and business customers that is also user friendly, and straightforward. Research and understand competitors, current products and users.
Survey #1 "IPAs are trash!"
To better understand the consumer I surveyed 11 beer drinkers on their current beer drinking and buying habits. 
For multiple choice answers it was easy to see the data but for the write in questions I needed to affinity map (group like responses) and pick up any trends that users were calling out.

Main Takeaways:
Customers want to be able to buy things other then beer (supplies/snacks)
Customers trust and want recommendations from friends, family and peers 
Pre-Covid customers relied on bars for discovering new type of beers
Customers called out international beer brands the most while IPAs (India Pale Ales) were called out as being everyone's least favorite (same TBH...)
Competitive/Comparative Analysis
From my surveys I determined the top 3 direct and indirect competitors. This helped me to see where other companies/businesses were offering and where they were lacking. For example, even though corner stores were called out as a main place our customers buy beer they are extremely limited in what they offer.

Survey #2 "Let's get down to business"
To better understand business user needs I surveyed 6 business customers on what they would find useful in a vendor portal.
Main features called out by business users:
Buy Beers in Cases
Wholesale Prices
Quantity Discounts
​​​​​​​Option to view previous purchase orders
PERSONAS "Know thy customer"
From the above data I was able to determine 2 types of personas TheBrewLab would cater to. 
1. The local customer "Carlos" who wants to be able to buy beer online and have it delivered in the morning. He is frustrated with the limited offerings of his local convenience store
2. The business owner "Victor' who owns a bar/restaurant in the same city as TheBrewLab and wants to buy craft beer wholesale so that he can offer “to go” options for his customers. 

Open Card Sort "The category is..."
TheBrewLab had a list of 75 products and so I asked 5 users how they would group these products.
Main takeaway was that most wanted to sort beer by type, non-beers such as ciders and hard seltzers were grouped in their own category and TheBrewLab's own craft beers and branded merchandise was grouped in a single category. These findings would play a key factor in how I would name my website categories.
Below was my first attempt in organizing the website navigation categories.
TheBREWLAB BRANDING "Who are you anyway?"
Before I ever sent my first survey I needed to decide who was this company that I was trying this digital experience for. I realized I needed to create a brand identity so that I can have clear direction on who I was designing for and why.
For 2 days I mulled over the name "Beer Emperor?"  "BeerLovers?" "WeHateIPAs??" finally I landed on "TheBrewLab" and at first I thought about giving it a science angle but because our brief mentioned that this would be a family-owned company why not take it the other way and have lab stand for labrador? Every family needs a dog!
Then it all started to come together~ I was able to clearly see this local, organic but modern, fun, pet-friendly company. 
I ran my beer inspired color palette through Adobe's accessibility tool to see if there were any color conflicts.
Now that I had nailed down TheBrewLab's brand and voice I was excited to explore mocking up the products that they would offer based on my previous product list.  
DESIGNING FOR WEB  
"Do people really need reviews??"​​​​​​​
I was finally ready to start building out TheBrewLab site. I put some pen to paper and sketched out some possible homepage layout ideas. Excited to see how they would look in Adobe XD I took to the program to build out the other components. 
I thought about product cards and realized that since TheBrewLab has not only beers but other products such as shirts and glassware I wanted to create a product card that could work across all products.
For my first iteration of a product page I forgot to consider that not all product pages will look the same so at this stage I had only the one layout for every product. 
CARLOS CONSUMER HAPPY PATH USER FLOW
This is Carlos' fastest path to place an online order.

VICTOR VENDOR - HAPPY PATH USER FLOW
This is Victor's fastest path to add items to a purchase order for delivery.
I completed a usability test with 6 Participant with 9 tasks to complete trying to mimic Carlos' consumer happy path. 
2 out 6 users failed to complete the prompts.
“It took me a minute to guess that I had to click again to see all of the products versus close the pop-ups. Not super intuitive.”
“Want the products page link to 'all products"
“I wanted there to be an "all products" option on the dropdown @ Shop. I was a little confused how to reach that page initially”
 XOXO your frustrated users

I realized that my users were being tripped up right at the beginning because the "Products" category when clicked brought down the dropdown but did not immediately take you to the to the "All Products" page when clicked. 
I updated it so that once you hover over "Products" the subcategory dropdown would appear and just one click on "Products" will take to the "All Products" page 
Popover
Popover
Home Page
Home Page
About Page
About Page
Contact Us Page
Contact Us Page
All Products
All Products
Your Cart
Your Cart
Sign In/Sign Up
Sign In/Sign Up
Shipping
Shipping
Billing
Billing
Review
Review
Account Login
Account Login
Vendor Sign In
Vendor Sign In
Vendor Portal
Vendor Portal
Purchase Order
Purchase Order
Vendor Product Page
Vendor Product Page
Completed Purchase Order
Completed Purchase Order
Order Success Page
Order Success Page
CONSTRAINTS "Oh where did the time go?"
I did end up running out of time on this project and wasn't able to do another round of usability tests for Carlos's happy path. Even though I had prototyped Victor's happy path I still need to do a round or 2 of usability testing to see if there are any ways to improve.
When I have more time I plan to prototype out other ways to check out for example if Consumer Carlos wants to go to his "My Account" page and view his previous orders to reorder a previously purchased product. I also need to build out the reviews page and how and when customers can submit a review and finally the path to signing up for the newsletter. 
PROTOTYPE "It's still pretty rough..."
You can test out my mid fidelity prototype below or by clicking this linkNot all pages will be functional but if you can follow Carlos and Victor's paths you might reach that order success page! 
THANK YOU "Good morning, good evening and goodnight!"
Have any questions, concerns, comments? Don't be afraid to drop me a line I'd love to hear from you.  

You may also like

Back to Top