top of page

Biondivino

ECOMMERCE RE-DESIGN

OVERVIEW

I re-designed an e-commerce site for Biondivino, a local shop specializing in Italian natural wine.

 

In my design, I focused on developing intuitive navigation and an accessible product browsing experience, as well as creating a map interface for customers to learn about and shop inventory

Note: this is a spec project, with no affiliation with Biondivino.

MY ROLE

Lead and solo UX Researcher, UI/UX Designer

DURATION

Two week sprint

PLATFORM

Desktop browser site redesign, future responsive mobile

TOOLS

Figma, Optimal Sort, Trello

Biondivino Mockup 2.png

Understanding our Customers

OBJECTIVES

First, I defined the research objectives. I wanted to better understand:

  1. The user journey for wine-buyers, their values, habits, likes, dislikes, and pain points.

  2. What guides customers when they select a bottle of wine they have never tried before.

METHODS

I interviewed 5 people who drink and buy wine, with varying degrees of wine knowledge. I used an affinity map to identify trends and similarities between interviewee's experiences. I will present a snapshot of my insights below, split into two categories per research objective 1. User Journey 2. Selecting New Wine

I used the above research objectives to direct my interview guide questions.

INTERVIEW INSIGHTS USER JOURNEY

5 of 5 have three factors that impact their selection: price, weather and occasion.

4 of 5 know exactly what they want because they've had it before.

5 of 5 shop at big box and local storeswhere knowledgeable staff recs guide them.

INTERVIEW INSIGHTS TRYING NEW PRODUCTS

3 of 5 like trying new things, and of that, 2 will try new wine when they know what to expect.

5 of 5 know what flavor profiles they like and what they don't.

5 of 5 felt wine labels don't give useful information.

Targeted Research

COMPETITIVE ANALYSIS

In my competitive analysis, I focused on two areas of improvement I identified in usability testing - product filtering and product pages, aimed at identifying competitors' design solutions to the problems I was facing. 

sf.vervewine.com_collections_red-wine(hi res).png

VERVE PRODUCT FILTERING

  • Additive filtering (OR rather than AND)

  • Price filtering

  • Style filter, flavor profile snapshot

sf.vervewine.com_collections_rose-wine_products_souleil-vdf-rose-vin-de-bonte-2022(hi res)

VERVE PRODUCT PAGE

  • ​Includes winemaking description

  • Important information call out

TREE TEST

Based on my C + C analysis, and usability testing I came up with a proposed architecture. Because interviewees expressed that the secondary nav was overwhelming, I focused on breaking up secondary nav under "Wine + More", and creating additional primary nav categories (Shop Other, and Featured) to pick up the slack. Below is a snapshot of my findings.

86%

searched for featured seasonal selection under “Wine”

40%

tried to find wine care packages under “Wine”

57%

first clicked under “Wine” for magnum bottles

TREE TEST INSIGHTS

My main takeaway was if a user is searching for wine, they will intuitively look under "Wine", even if they are searching for a specialty bottle.

 

To keep the "Wine" secondary nav manageable, I let filters do the legwork to keep the secondary nav clean and manageable. 

Wine.png

Define the Scope

USER PERSONA

Next I wanted to return to my interview data synthesis, and aggregate a user persona to design for. I created Ruby to help center users I would be designing for. 

2160px-Red_and_white_wine_12-2015.jpg

Ruby (left)

"I like trying new things, as long as they aren't too sweet!"

BEHAVIORS

  • Likes trying new things from her local wine store

    • Staff recs + featured bottles guide her

  • Not an expert but knows what she likes + doesn't

NEEDS

  • Needs to easily see price + flavor notes

  • Wants to learn more about growing regions

FRUSTRATION

  • Product labels, websites + descriptions are inaccessible

After painting a clearer picture of our users, I wanted to narrow in on the problem by writing a problem statement, and after, start to constrain the solution space, using "How might we" questions as a frame.

PROBLEM STATEMENT

Ruby wants a quick way to see flavor profile, growing region, and grape information so that she can more easily explore, filter and buy new bottles of wine.

HOW MIGHT WE...

How might we present product information on growing region, flavor profile and grape varietal so that it is useful for curious novices and experts alike?

How might we help users search for and filter products so they can more easily make a selection on an unfamiliar bottle of wine?

The Pre-existing Site

USABILITY TESTING METHODS

After getting to know our customers a little better, I wanted to better understand what was working and what wasn't with the preexisting solution. I wrote out a usability testing interview guide, and conducted moderated usability tests with 4 participants. 

biondivino.com_(high resolution) (2).png
biondivino.com_.png
biondivino.com_(high resolution) (2).png
  • 4 of 4 liked the regional information and recommendations, but it was difficult to find. 

  • 4 of 4 participants expressed frustration navigating the site, and that the home page scrolled endlessly

USABILITY TESTING HOME PAGE

USABILITY TESTING PRODUCT FILTERING

biondivino.com_collections_wine_natural+classical+mineral-driven+earth-spice+fruit-forward
biondivino.com_collections_wine_natural+classical+mineral-driven+earth-spice+fruit-forward
  • 4 of 4 wanted a filter by price, not just sort by option, and 3 of 4 couldn't find sort by price option entirely

  • 4 of 4 felt the product filtering was poor

    • exclusive filtering (returning 0 results) 

    • overwhelming and inaccessible

biondivino.com_(high resolution) (5).png

4 of 4 felt the organization was poor throughout, noting:

  • repetition

  • one-item categories

  • overwhelming secondary nav 

USABILITY TESTING PRODUCT PAGE

biondivino.com_collections_wine_products_aia-delle-monache-giusto-un-litro-rosso-nv.png
  • 3 of 4 felt product descriptions were too long, it was difficult to find information on the flavor profile, growing region, and grape.

USABILITY TESTING INSIGHTS

I identified two major areas of improvement in my usability testing results:

  1. Product filtering 

  2. Product pages

Design and Test

PROCESS OVERVIEW + METHODS

With my problem statement, how might we's, user persona and C+C analysis in mind, I sketched and created a mid-fi prototype on figma. I conducted unmoderated usability testing with 6 users on Maze. I'll present a snapshot of my findings below.  

Find the selection of white wines from Sicily that are under $30.

USABILITY TESTING PRODUCT FILTERING

app.maze.co_projects_118208920_mazes_118213509_results(hi res).png
app.maze.co_projects_118208920_mazes_118213509_results(hi res) (3).png

WHAT I FOUND

  • 4 of 6 clicked on Biondivino logo before "Wine" dropdown 

WHAT I DID

  • Centered Biondivino logo to make clear it is distinct from nav bar

  • Improved color and type hierarchy 

WHAT I FOUND

  • 6 of 6 tried to click elsehwere on the screen to minimize the pop-up dropdown filter menus

WHAT I DID

  • Moved filters to a lefthand bar, so they don't occlude search results

  • Added faceted nav to help with accesibility and general confusion

Add the cheapest option to the cart and check out.

USABILITY TESTING CHECKOUT

WHAT I FOUND

  • 6 of 6 sucessfully completed

  • 2 misclicks in the entire flow

  • Only direct path taken

WHAT I DID

  • Didn't change anything to do with placement

  • Applied hi-fi refined style guide

app.maze.co_projects_118208920_mazes_118213509_results(hi res) (4).png

USABILITY TESTING INSIGHTS

I took my usability testing insights and implemented the changes outlined above. I clarified the type hierarchy, and centered the Biondivino logo, making the primary nav clear. I moved the product filters to a lefthand bar, so they wouldn't obscure search results. The checkout flow had no issues, so I made no changes other than applying my refined style guide. 

I also took into consideration interview insights about growing region and including a learning space. I built out a prototype flow for a mouse-over map interface, where users can learn more about growing regions, and grape varietals, and then shop corresponding inventory. 

Explore by Region, Abruzzo.png

Moving forward, I would focus on validating design decisions made in my second iteration by:

  1. Conducting moderated usability testing on my hi-fi prototype to ensure the changes I made are intuitive.

  2. Conducting a second round of tree testing on my sitemap.

  3. Interviewing more knowledgeable wine buyers, to ensure the re-design is navigable not just for novices.

  4. Accessibility checks beyond contrast checking.

Moving Forward

Moving forward, I would focus on validating design decisions made in my second iteration by:

  1. Conducting moderated usability testing on my hi-fi prototype to ensure the changes I made are intuitive.

  2. Conducting a second round of tree testing on my sitemap.

  3. Interviewing more knowledgeable wine buyers, to ensure the re-design is navigable not just for novices.

  4. Accessibility checks beyond contrast checking.

bottom of page