Improving the E-Commerce Experience of Local Businesses.

image found on


Entering our 3rd week of the Ironhack UIUX bootcamp, our goal this week was to tackle the e-commerce world. In order to do that, we were once again given a partner, and from there, told to choose a local business and implement design thinking & the double diamond in order to create the most ideal e-commerce experience for store customers. With that being said, Beltran and I decided to choose a local business in Buffalo NY called Colonial Wine & Spirits. We chose this because not only did I have access to the business itself, but also as a past employee, with 3 years of knowledge of the overall aspects of the store, but it seemed to be the most logical choice due to the 5 day time constraint we were under. So, I took advantage of my connections, to access the stakeholders as well as many regular customers themselves, to gain perspectives and a clear understanding what exactly was holding them back from utilising the the store website to purchase their liquor orders, and what the stakeholder’s overall view and thoughts of the current virtual experience being offered. Once we were able to empathise with the customers and understand their biggest concerns, we can eventually offer the stakeholder a clear, & concise design that will not only hit all customer pain points, but also bring the most value to the business itself.


“Design a desktop website for a local business or professional. In this project we’re focusing efforts on organizing the information in a clear way, to be most effective for both the customer and provider. Also, we want to tackle Interaction design patterns to make the exchange as streamlined as possible.”

As I had stated previously, I have personal experience working at Colonial Wine & Spirits, so I went into this project with some insight regarding the e-commerce experience the store offered. Though the in-store experience is a successful and ideal situation, covid-19 was a huge reality check for many businesses, and forced majority to either create an e-commerce option, or update the existing virtual experience they offered, and the latter is where CWS landed. Looking more like a Med-fi prototype, rather than an MVP, the overall site was able to do the bare minimum of what it was expected. While technically, yes, customers were able to make online purchases, the site itself was missing some crucial and necessary features. Not to mention, too confusing and as a direct result, unusable to anyone unfamiliar or with a lack of experience using the internet. With Beltran and I jumping head first into this project, and the advantages we held with my connection to the store itself, we would take all the research we found during the discover phase while implementing double diamond process, to guide us forward with giving customers there most desired experience, while also communication and meeting the expectations of the stakeholders.


imagine property of statista

Some of the most informative information regarding the overall liquor market came from the above chart. Being as thorough as it was helped us confirm the skyrocketing liquor sales throughout 2020 once lockdowns worldwide became our new normal. This statistic shows a trend in beer, wine, and liquor store’s monthly retail sales in the United States from 01/ 2017 - 01/ 2021. Though, many businesses we forced to close when the pandemic was in full effect, and we were all forced inside for months at a time, in the US, liquor stores were deemed “essential businesses” and were not affected by the debilitating restrictions hitting all other types of businesses throughout the country. While being able to confirm from personal experience that the busiest time of year for the liquor store was the holiday season between Thanksgiving-NYE, the graph shows that the usual “down season” of the month of May in 2020 was on par with past years top selling months. With people stuck inside and given limited options to pass the time, more adults began drinking more often and in general.


Due to the time constraints Beltran and I faced with only 5 days to implement the double diamond design process, we began by first creating our surveys for our quantitative data and interview questions for our qualitative data. Once we got our survey out, and had at least a brief idea of what we were to ask of not only the customers of the store, but as well as the stakeholder, since it is them who at the end of the day decide whether or not to implement the features suggested by the UX designer, then we were able to start the next step. Depending on specific circumstances, whether you have immediate access to a stakeholder to interview, or taking your secondary research and organising it with a lean ux canvas, the overall goal is gaining an insight into the business problem you are about to face, customer pain points & a consistent and reliable way to go about organising that information, in order to gain the most authentic perspective possible.

Image found on UXcollective


Lean UX Canvas

Firstly, the point of a Lean UX Canvas is something that can be useful in more than one phase of our design thinking process. What is does well for us in these early stages is help indicate how we can dis­cover more at an early stage, re­tain it and get a com­plete un­der­stand­ing of the sit­u­a­tion be­fore we be­gin to solve the prob­lem. You can quickly identify and fix potentially weak areas of your product and solve your business problems, creating an excellent, much improved and user centered product. According to the goal of a lean ux canvas is “to give us(UXD) the big picture of WHAT we are building, WHY we are building it, and for WHO we are building it for.” Creator of th map, Jeff Gothelf said it best, “The Lean UX Canvas helps teams frame their work as a business problem to solve (rather than a solution to implement)

As shown above in Beltran and I’s lean UX canvas, were given some insight into the potential problems that we saw ourselves during secondary research, like the lack of product descriptions, or missing purchasing features. The potential business outcomes if we were to address those issues, like more customers utilising online ordering and less phone orders. The type of customers the store is accustom to, like high-roller who waits for the best of the best, customers on a budget and customers buying bulk quantity, whether it be for an event or restocking their personal stash. And lastly the potential outcomes and benefits for the user, like digital gift cards allowing for more savings, or a more informed purchase with expert recommendations

Competitive Feature Comparison

Above is the Competitive Feature Comparison Beltran and I created. After creating a list of direct competitors like, Elma Wine & Spirits, Southtowns Wine & Spirits Reeds Liquor Store and Premier Liquors, we created a chart to compare some key and crucial aspects of the liquor store experience. We researched each competitors website, and took into account popular features, discounts and deals, social media presence, purchasing options, as well as the overall website itself. What this does for Beltran and I, is it gives us an idea of potential opportunities as well as at the very list, the most minimal expectations of the customers without implementing our user research data.

Market Positioning Chart

The next step in our business analysis is the market positioning map. The advantages of implementing this to our discover process is helping Beltran and I spot gaps in the market, analysing its competitors as well as encouraging more overall market research. By implementing the blue ocean stategy within our market positioning chart we are able to identify the “blue ocean” which exists when there is potential for higher profits as within a gap in the market. For Beltran and I we determined our blue ocean fell within a minimal aesthetic design with numerous incentive and purchasing offerings, in order to meet the variety of customers thats come with the pandemic.

Heuristic Evaluation

As explained by the website “A heuristic evaluation is the process of a number of expert evaluators reviewing an interface design against a set of usability principles in order to uncover and fix usability issues, preventing further issues once the interface is released. A heuristics evaluation is also useful for assessing the overall usability of the website. In the above photo are the 10 heuristics that each design should be put up against in order to determine whether or not it meets usability standards.

When putting the CWS website up against a heuristics evaluation, it’s pretty clear by the issues above and the principles they did not meet, that the overall site isn’t in the best of conditions, and that by the looks of it an overall site revamp is probably the best case scenario. For the sake of this particular project, we would focus on the 3 top pain points determined throughout our discovery process and user research and from there create the most successful design.

The reason obtaining quantitative and qualitative data is so crucial is because it gives us an idea of who are users are, with a broad intake of basic opinions through surveys which is our quantitative data. Then we gain a detailed description of that experience through interviews which is part of maintaining our qualitative data. Below are Beltran and I’s key takeaways from our surveys and interviews.


Affinity Map

Once we reach this affinity map, we now are out of the discover phase and in the define phase. The reason Beltran and I utilise affinity maps is in order to organise and prioritise the data we just obtained in order to get an understand and empathy for our customers. Using keyword, emotions, goals, expectations and the overall positive and negatives taken throughout the market research, secondary research, qualitative & quantitative data research.

Value Proposition Canvas

Next Beltran and I used a Value Proposition Canvas. What this does for us is a help ensure that a product or service is positioned around what the customer values and needs. Reiterating past assumptions as well as guide us towards the and MVP with the necessary research and data to back it up.

As shown in our own personal Value proposition canvas, we were able to identify the pains, gains within the data obtained so far, as well as what the job expected of the customer in order to reach the overall gains.

— As It Scenario
The As-is Scenario Maps are used to help make sense and understand the the key phases necessary in order for the customer to reach its overall goal. In this case, the As-Is phases consist of acknowledging a alcohol purchase is necessary, checking all local store sites for the best deal, deciding on what to buy, making the purchase and lastly obtaining your purchase. Once we determined our phases, we then went through all our research to determine what our users were Doing/Thinking/Feeling as well as some key quotes

— User Journey Map

As we learned during our mapping techniques, the point of Journey mapping is by combining the elements of storytelling and visualisation. Essentially what we have done is taken our As-Is scenario and created an to scan visualisation of the process. This makes it easier for our stakeholder and them the ability to scan and see quickly and easily where the biggest negatives are within the virtual process of the customer.


Throughout the entire process so far, step by step throughout the discover & define phases we utilise these practices, in order to lead us to our 3 problem statements. AKA the 3 major pain points our customers have when using the Colonial Wine & Spirits website. What Beltran and I concluded are the following statements below.

How Might We Statements

From our Problem statements, we created our How Might We statements in order to solve the key pain points previously identified



Now that we have our 3 major pain points, our problem statements as well as our how might we statements we can officially have a clear idea of what our customers want from us. Beltran and I came up with roughly 35 ideas in order to hit customers biggest issues and concerns regarding the website CWS offers.


MoSCoW Method

Now that Beltran and I have brainstormed, we take our potential ideas and implement them into the MoSCoW method. What this does for us as designers is organise our ideas into 4 distanct sections of MUST HAVE/SHOULD HAVE/COULD HAVE & WONT HAVE. What this does is identify which crucial features we’ve brainstormed are needed in order to make the CWS meet our customers needs and expectations. So what we discovered was the following features as must haves for our MVP. Starting with Age Verification in order to access the site, a more consistent and reliable login/sign up system, filter option, better access to the expert recommendations, proper inventory updates, proper discount applied options, digital gift card payment options and lastly consistent monthly surveys in order to keep up with customer opinion.

Value Proposition Canvas


What the jobs to be done process helps us understand is the more jobs a feature is able to do, the more value it brings to the stakeholder as well as the customer in the long run.


Minimum Viable Product. Beltran and I concluded the following statements below are the features that bring the CWS to its MVP. The clear and logical product layout tackles the issues novice internet user would find quite confusing. Capitalising on the popularity of “Spiel the wine” partnership, which directly tackles the customers desire for consistent and informative recommendations. The feature of purchase history targets the issues customers have when forgetting the name or brand of past purchases wines. Lastly the digital gift card feature was created due to the frustration customers experienced when they wanted to cash out using a gift card but were unable due to the lack of any payment utilising store gift card. Now customers are able to capitalise on saving money while making purchases on the CWS website.


Though difficult to see on the image here, after a few visability tests, and implementing a heat map, Beltran and I were able to determine the biggest issues within our lo-fi design. We realised that the description button (+) in the display of the product was being mistaken as an add to cart feature instead of a button to lead to the description of the product itself. Also throughout our usability tests, we also realised we forgot to add a back button within our cart in our purchase history! This example is the perfect reason as to why we as designers use usability testing in out lo-fi states, in order to avoid getting farther into the design process without any input from the customers and eventually realising the many bumps that could have been caught in lo-fi designs and now force the designer back instead of forward.


Below, is the med-fi Beltran and were to create, with all the features we created with inspired by each of our pain points. Descriptive labels on each bottle, A better showcasing of the “Spiel the Wine” collaboration as part of the users wanting easier and better access to the expert recommendations all done in a clean & organised minimalistic design, and finally as well as a digital gift card. The digital gift card specifically fixes the lack of purchase methods for gift cards online. With this design, Beltran and I feel we hit our customers pain points as best as we could, with the minimal time we were given.


Learnings & Key Takeaways

When we got around to finally creating our lo & med-fis, Beltran and could’ve done a better job focuses more on our lo-fi. Instead we focused slightly more on what is considered a med-fi, though it was more unintentional. Also, throughout this particular project we learned how to better communicate with stakeholders, and learning how to balance the wants of the stakeholder, while focusing on the needs of the customers. Overall the most important thing was to remember that bringing value to the stakeholder, is more inportant than hitting every desire of the stakeholder.




By the ticket, take the ride.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Pure writer - connecting the past and future with word Pure Writer is a fast and comfortable text…

Keep fighting: The power of the protest graphic

010/100. REDESIGN

Ironhack’s Prework: Challenge 3: Usability Evaluation and Site Redesign

ANISSA AIDA : Desginer Of The Month

Site Redesign Part 1: Urban Flowers

Typography: Domineering from the era of ancient Rome and Gutenberg

Flotiq public roadmap

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kate Lexner

Kate Lexner

By the ticket, take the ride.

How To Promote Ethics-Driven Development Processes

SDKs and APIs

Automated Library KerasTuner for Hyperparameter Tuning of ML and DL Models

New security features come to Instagram this week