E-Commerce: Helping communities support local businesses

Cynthia Santos
12 min readMar 14, 2021

For our second 4- day UX Design sprint with Ironhack, we were tasked to design an e-commerce website that would improve a local small business’s online presence in order to be competitive in their market and thus increase sales. My team, which included Matt Dutton and Coco Griffin, chose Divino Wine & Spirits, located in Denver, Colorado. We followed the double diamond design thinking process in order to determine our Minimum Viable Product, which I will break out down for you today.

Design Council’s Double Diamond Design Process. The first diamond is dedicated to understanding and defining the problem, whereas the 2nd diamond is dedicated to solutions.

DISCOVER

Rendering from Divino’s Instagram

The Client: Divino Wine & Spirits, is an 18-year-old store located in Denver Colorado, that offers handpicked selections of wine, liquor & beer with a sommelier-trained staff.

As with many local small businesses, while they had a website, it was not built for e-commerce. As Covid has limited all aspects of our life, e-commerce is vital in keeping our local communities above water.

Secondary Research

Source: Nielsen Retail Measurement Services powered by Rakuten Intelligence Online sales of Alcohol skyrocketed up 234%

The silver lining for Divino’s is that per Nielsen Research, during the first seven weeks of Covid, online sales of Alcohol skyrocketed up 234%. It was no surprise then that Alcohol was the fastest growing e-commerce department during this time. Although this might make you think that by just creating an e-commerce website the problem would be solved, we still needed to create a strong online presence that would not only set them apart but indeed increase overall sales. This allowed us to understand the market better and establish that there is a fast-growing market for online alcohol sales.

The common thread amongst reviews was Knowledgable staff

We now wanted to get to know the client better however as we are still in quarantine (month 10), we got to know Divino through their customers. Through all the reviews we found online, we determined that Divino was highly rated with the common thread being “knowledgable and highly trained staff”. This backed Divino’s self-claim of having sommelier-trained staff, which we knew would need to translate into their online presence.

Business Analysis

As the main objective is to ultimately increase Divino’s sales through e-commerce, we needed to conduct a business analysis of not only where Divino stands but also the competition. By benchmarking, or comparing business processes and performance metrics, we would gain insight into possible opportunities in the marketplace as well as understanding what already works.

Competitive Feature Comparison chart. Circled are the areas of opportunities for Divino in the marketplace.

The first Business Analysis tool we used was the Competitive Feature Comparison chart, where we gathered a list of direct (Molly’s Spirits, Total Wine) and indirect (Target, Costco) competitors and the features they currently offer. For me, the trickiest part of this tool is determining what features to look for and compare. However as our Instructor always reminds us, everything is a living document, so we went back to add to it a few times throughout our design process.

The main takeaways here were:

  • Most of the competition already offered an e-commerce website and/or app
  • Most had filters and visuals of the products
  • User Mental Mode: The rows with “Yes” across the board are expected by users

Areas of Opportunities:

  • Only half had recommendations (that were generic)
  • Less than half offer the option to create a Favorites list
  • Less than half offered some sort of Education and/or virtual tastings

What stood out to us was the lack of catered recommendations and knowledgeable staff among both indirect and direct competition as we knew from our secondary research, Divino’s highly trained staff is an important part of their success. This ultimately allowed us to compare and see what features work, what's expected, and what we can improve upon or even create.

Market Positioning Map. Divino technically sits in uncontested market space however has not been used to its full potential.

We now needed to visually determine where Divino sits within the market as well as where we would essentially want Divino to position itself. We used a tool called, Market Positioning Map, which allows you to visually see where there might be uncontested market space or Blue Oceans as coined by authors, Chan Kim & Renée Mauborgne.

To achieve this we needed to hone in on specific qualities that become the axes. As we established through the Feature Comparison chart that there is a lack of trained staff, we wanted to delve into customer service to visually see where our blue oceans might be.

What stood out from this tool was that Divino has all the potential to disrupt the market as technically they were already in blue ocean territory, thanks to their top-notch staff. However they were not using this to their advantage as again, they did not have an e-commerce site nor was there a presence of their highly trained and regarded staff on their current website.

As with most things these days, we conducted our interviews via Facetime and zoom.

User Research — Qualitative Data

As we approach the end of the Discover stage, we needed to establish who our targeted user was and gain insight into their habits, needs, and pain points. After all design thinking process is human-centered design. To accomplish this, we conducted a total of 7 interviews.

The main takeaways from these interviews were:

  • 90% drink alcohol at least 2 x week
  • 70% buy alcohol at least 1 x week
  • Most rely on recommendations (either from friends, staff, or online)
  • 2 main user groups: Buying to drink at home and buying for social purposes

One of my interviewees mentioned that it was “stressful to pick something to take to a gathering” as you feel the need to “impress the host”. While Others said they rather splurge when buying for themself than when taking to a social gathering. However, they both relied on a third party to make a selection. One mentioned that it took them a long time to make a selection when they couldn’t rely on staff as they then needed to do their own research online and/or ask a friend and wait for a reply.

DEFINE

Now that we had a good grasp on the Client, where it sits in its market, and where we need to go, we were ready to define the problem by dissecting data gathered to determine patterns and areas of opportunities.

Affinity Diagram

The first artifact we used was the Affinity Diagram. We started by using the post-its feature on Miro to write down the most important data collected from our Qualitative efforts. We then started to place alike categories together. For instance, how often they purchased alcohol, how often they drank, and how they made their selection. We were then able to label the patterns into groups and lastly color-coordinated to visually enhance the patterns.

Affinity Diagram — 14 Categories

Main Themes:

  • Tends to buy/consume alcohol to release stress
  • In-store shopping preference (as they tend to need recommendations)
  • Buying for immediate use (not in bulk)

Value Proposition Canvas — Customer Segment

Value Proposition Canvas — Customer Segment

This week, we added to our toolbox and learned about the Value Proposition Canvas. This tool, developed by Dr. Alexander Osterwalder, is to help ensure that a product or service is positioned around what the customer values and actually needs. The canvas consists of two sides, the product & services side and the Customer profile side, in order to ensure that there is a fit between the product and market. To start, you begin with the customer segment, pictured. This allows us to learn about the customer and their thought process by determining what the user is trying to accomplish (a job to be done) and the gains and pains (functional, emotional, and social) associated with the “job to be done”.

‘Jobs to be done’ as defined by Strategyn “proposes that in order to understand customer needs in a way that makes innovation predictable, companies should stop focusing on the product or the customer and instead focus on the underlying process or “job” the customer is trying to get done.”

Some might confuse a JTBD with an activity or task. An example that helped me understand the difference is below:

Task: Store and retrieve music or listen to music
JTBD: Listen to music in order to stay motivated during a workout
JTBD: Listen to music in order to stay motivated while studying

For example, a person seeking to listen to music to stay motivated while working out might ‘hire’ a completely different product to get the job done than someone wanting to listen to music in order to study. By looking at specific JTBD, you will be able to better address each pain and gain to translate to a better product or service.

Main takeaways from the Value Proposition Canvas — Customer Side were:

  • There are many ‘jobs to be done’ when purchasing alcohol
  • There are many emotions behind purchasing alcohol

User Journey Map

Journey Map — 3 pain points

So we set our Value Proposition Canvas to the side as we needed some more data in order to complete the products and services side.

We were ready to define some opportunities by breaking down the alcohol purchasing process into steps in a day; pre-purchase, selecting the store, deciding on the product, purchasing the product, after purchase. We took the data gathered from our interviews and decided on a specific user: purchasing alcohol to consume at home on their own.

We uncovered 3 main pain points; feeling overwhelmed at having to do research when looking for a store, making an uninformed decision due to lack of information or assistance from staff, and long lines or difficult check out process.

This lead to a few brainstormed opportunities:

  • Having an informative section of staff picks
  • Sufficient details of the product
  • personalized customer service
  • expedited checkout
  • rewards program

From here we took the 3 Pain Points and created our problem statements that we turned into “How might we..,” statements in order to start our brainstorming session for what eventually will be our MVP!

DEVELOP

Ideate

During our time-boxed brainstorming session to find solutions to our HMW statements, we came up with 33 ideas.

MoSCoW Method

We now needed to filter through these ideas and determine which features we would include in our MVP. We used the MoSCoW method to evaluate the must-haves, versus should have, could have, and won't have. We noticed we might have too many ‘must-haves to include in our MVP, as it is supposed to be a Minimum Viable Product after all.

Value Proposition Canvas — Products & Services

Value Proposition Canvas — Products & Services Segment

Remember the Value Proposition Canvas? Me neither (j/k). We were now ready to fill out the products and services side to ensure that the features we considered through data as must-haves were in fact adding value either as a Gain creator (offer the user something new) or as Pain relievers (removes a current frustration). Which would ultimately ensure a strong product-market fit.

Job to be done

When a user wants to relieve stress and unwind, the user wants to use a website that includes personalized and highly rated recommendations with an expedited checkout process, so that they can begin to relax and prepare for their well-deserved cocktail.

Divino is hired to alleviate a user feeling overwhelmed by having to deep dive into the internet to search for highly-rated generic recommendations; as well as to eliminate the annoyance of a lengthy checkout process when purchasing alcohol.

Minimum Viable Product

Our MVP will be an easy-to-navigate webpage that will allow the user to make informed purchasing decisions based on a personalized staff picks feature with an expedited checkout process. While also providing valuable information and customer service.

Main Feature: Specialized picks from the sommelier and expertly trained Divino Staff.

2nd Feature: Easy and quick checkout process where you can pick delivery or pickup, time, and confirm purchase all in the same section without having to click through different pages.

3rd Feature: Account set up with a section to fill in your drinking preferences. The user’s information such as billing and shipping will also be stored.

Flow Outline

Flow Outline — Top post-it represents what the user sees while the bottom post-it represents what the user does.

Now that we had our MVP, we needed to design the website. In order to create an easy-to-navigate and user-centered design, you need to anticipate the needs of your users. To do this, you need to focus on a user type and determine their happy path, meaning the way to accomplish their particular task in the least amount of clicks and time needed without frustrations. This is a process you would repeat with the many different user types determined.

We started with a flow outline, which basically allows you to breakdown each page by what the user sees and what the user does. This was, to me, essential in being able to then create a User flow chart as it does exactly what it describes, creates an outline.

User Flow Chart

User Flow Happy path — Key

The user we had in mind for this particular happy path was a repeat customer that had an account set up with their preferences filled out and billing/shipping information stored. (Yes, this is literally the easiest path but can I remind you this is a 4-day sprint so please don’t hold it against us. ) The user wants to simply purchase from the recommendations section and call it a day. We definitely had to come back and add a few actions, decisions, and pages.

Usability testing with Maze.co

From this user flow, we created our lo-fi prototype on paper and performed a usability test through Maze, a rapid testing platform. Maze allows you to get quick insights as it shows you how many clicks it took a user to perform the task requested.

The main results were, based on 7 user tests:

•Overall 88% success rate

•12.5% Mis-click Rate

One user mentioned that she was accustomed to clicking on the picture to lead to another path and that is why she did not initially click the view button instead. This allows us to quickly and easily ensure the picture linked to the same path as it can be assumed it is a typical mental model.

We then made some more adjustments and created our Mid-fi prototype:

https://www.figma.com/proto/1gWetG9bzarn7HuSm2nbwl/Whiskey-Business?node-id=77%3A1085&scaling=min-zoom

With more time, the next step would be to test our mid-fi and use the below success and failure metrics.

Final thoughts

This brings us to the end of the 4-day sprint! THANK YOU for making it this far, I know that was a lot but I hope the read was informative!

Getting ready for the 4th week ahead and I can appreciate that I have a clearer understanding of the process and artifacts used in week 1 and again for this week’s challenge.

From this challenge, I learned just how important and valuable user research is in all its forms. Everything seemed to shift a little when I didn’t have access to as much collected data. It uncovered a bigger appreciation for research that's for sure.

The Jobs to be done theory blew my mind and just thrust me into this whole new way of thinking. This will forever change my approach in both my professional and personal life. I know it might seem a bit dramatic but it was just so fascinating to me. I especially loved to hear the podcast by Harvard Business School Professor, Clayton Christensen. You can listen here, highly recommend it.

Anyways, thank you again for reading, hope you join me for the next exciting challenge!

--

--