UX CASE STUDY:

speakeasy connect

client background

Speakeasy Co. is a technology company and e-commerce platform for the wine and spirits industry that ships alcohol products directly to consumers. The platform enables brands to sell directly to consumers from their own respective websites without disrupting the three-tier system, providing brands the opportunity to own the user experience, along with data and analytics, from beginning to end.

From prnewswire.com,

“Speakeasy Co. (Speakeasy), the leading e-commerce platform for alcohol brands, has received funding for its third seed round, with $6.8 million raised. The fundraise was led by InvestBev, a leading investment firm in the industry, with an impressive portfolio including clients such as Siempre Tequila and Fyllo.”

“Further investment by Wilco Faessen of WhistlePig, Guillaume Cuvelier of SVEDKA Vodka and Davos Brands, Paul Hletko of FEW Spirits, and Spirits Investment Partners of Heaven's Door, Stolen Spirits, and Playboy Spirits.”

my role

As a contracted User Experience Designer, I had the privilege of wireframing their innovative, new system for retailers, beginning from user flow to developer handoff. In doing so, I was introduced to the business model and the Speakeasy team as a whole.

phase one:

Briefing + gathering

This project began with a briefing from the Co-Founder and Chief Financial Officer. A rough user flow created by Speakeasy served as the starting point for this project which I used to begin the wireframe.

Understanding the client’s unique business model was key to success. Speakeasy solves a specific problem faced by alcohol producers by offering them a way to reach more customers outside of their immediate geographic region. However, given the complex, regulatory structure of the beer, wine and spirits industry, the requirements of their platform were manifold. In most states, alcohol sales must adhere to a three tier system which ensures product safety and tax collection, while also preventing monopolies within certain markets.

The three tier system begins with the producer of the alcoholic product, which must partner with a local distribution company. The distributor then sells the product to a third tier, such as a bar or liquor store, who then sells the item to consumers. In structuring Speakeasy’s platform, I not only needed to produce a clear order of operations for the user, but also work with the CFO to ensure all sales were conducted in accordance with the three tier system. Beginning with Speakeasy’s existing general user flow, I starting by gathering basic project information I’d need for the design.

Overall Project Considerations:

  • What are the key objectives of the project?

  • What format(s) need to considered (mobile, desktop, etc.)?

  • What is the budget and timeline? Does it include user testing and iterative design?

Wireframe Requirements:

  • What information does the user need to provide to register with the service?

  • What legal information does the retailer need to begin selling product with Speakeasy Connect? Additionally, what vocabulary is legally necessary to fulfill alcohol regulation compliance?

  • What legal information does the client need to provide the retailer?

  • Will the wireframe be low fidelity or high fidelity?

phase TWO:

Diagram, List + organize

Before creating a wireframe sketch or mockup, it was crucial to take inventory of product needs, ideas and potential roadblocks. This was done with brainstorming and also speaking with retail buyers I knew in the alcohol industry.

After ironing out details with the Speakeasy team, I started with an affinity diagram to visualize user needs and potential pain points. My previous experience in craft beer and spirits was especially useful in this portion of the project, because I also had access to retail buyers, their purchase orders and thought processes when buying and selling their products. The affinity diagram below shows some of the ideas, issues and notes I discovered in my initial research.

I also started a Google Doc of requirements based on the prior briefing and refinement of the affinity diagram. I began with higher-level categories and functions, and then moved to the right hand side of the chart, drilling down specific user tasks, options and information required within each category and questions I still had. This would later serve as the groundwork for the final product navigation.

Of course, in taking inventory of the requirements, this phase of the project gave rise to ideas of new features that could be added in the future. I listed those ideas in a separate column, because at this point in the design phase, the client was most concerned with launching a minimum viable product in the coming months.

Phase three:

Navigation Design

The first step in wireframing was to determine the navigation layout based on the previous data gathering and affinity diagram.

The previously identified high-level categories served as a basis for the navigation of the wireframe.

Within the navigation, I ranked each category by level of importance. Importance was determined by what features the user would need to access most often. Based on the information available, it was determined that the most pressing issues to a retailer were sales, orders and distributor purchases.

From there, the navigation panel was organized, and I considered the next items in the hierarchy of features and data.

phase 4:

wireframe design

The wireframe is based on a 12-column grid, and includes some of the previous ideas from the affinity diagram and requirement spreadsheet. Given the project timeline, some features were put on hold in favor of launching the product sooner rather than later.

Some wireframe portions containing proprietary information have been omitted.

The wireframe design began in order of what the user would see first: the login screen. From there, I followed the users' journey, creating a signup page, dashboard and so forth.

This was a process of working my way down the navigation panel with intermittent check-ins with the development team, a legal representative, founder and VP of Operations. With each meeting, we’d make adjustments based on our legal consult and determining what data are available and what data should be available to users.

Conclusion:

product launch + beyond

Speakeasy Connect for retailers launched in late 2022. The process was an exercise in “quick and dirty” design, but proved fruitful, as the company has recently secured additional funding and warehouse properties and can say they are one of the first platforms of their kind. Speakeasy continues to establish new clients and partnerships and will expand their business in 2023 and beyond.

The future of the platform is open to new features and additional user data that can be provided to improve and increase marketing to new retailers as well as consumers.