Small But Mighty Coffee
Growing from small to mighty
Small But Mighty Coffee is a small coffee roasting operation based out of Chicago. They looking to hold a greater stake in the Chicago area market by scaling their business at a comfortable pace.
First, Small But Mighty Coffee needed to know and understand their current and prospective customers.
I was with two other UX designers on this project as we collaborated with the owner of Small But Mighty who was not only the owner but a UX Designer and software engineer himself!
What I did:
UX Researcher & UI Designer
Duration: 2.5 Weeks
Tools: Miro, Figma, Zoom
We had a few assumptions
We first made a list of some basic assumptions we had about consumers in regards to their thoughts and feelings about purchasing coffee online. These assumptions that we were to validate or invalidate sounded a bit like:
We assumed that our target demographics would be unclear since many different types of people enjoy coffee.
People would be apprehensive about buying coffee online due to them not being able to have a physical interaction with the coffee like smelling or tasting it.
Users may be looking for variety when it came to exploring coffee.
People may already be loyal to brands they currently buy from which would hinder them from trying new brands.
As we did our research, we looked at the approach of competitors' business models, target audiences, UX writing, and the storytelling of their products. Our team broke this analysis into two parts that we found important.
Understanding national brands were important because they were brands most notable to people. We looked at Starbucks Reserve, Stumptown, and Blue Bottle. Common themes we found between all of these brands were that:
They were geared towards a younger audience
Touted branding and products that are "premium"
The main messages consisted of craftsmanship, education, and sustainability
Product stories made explicit links to their sourcing and storytelling to emotionally draw in customers
Assessing the local Chicago area market was also super important because we needed to know how Small But Mighty could also break into the local community more effectively. These local, small operations were Bridgeport Coffee, Ffeine Coffee Roasters, and Printer’s Row Coffee which typically:
Rooted their branding in a “community” feel
Their messaging was personable and also discussed their handcrafted products
Similar to the larger brands, sourcing, and the people involved in that process their products continued to be a theme
Quantitive surveys were run to give us some preliminary data, which allowed us to start validating or invalidating our assumptions:
of responses were people ages 25-34
of responses were people ages 55+
were daily coffee drinkers
try new coffee every month, while even more people try new coffee brands every few months
Since age was the only important demographic, to talk to people in the age ranges of 25-34 as well as 55+. We found 3 major themes :
People from both age ranges were looking for fresh coffee with a robust taste. They specifically wanted this to be conveyed from a brand on their website.
The younger audience wanted to know the story behind the coffee to increase transparency and learn how to make coffee they love on their own.
All those interviewed found value in understanding the “craftsmanship” that went into creating a product.
The personas & prioritization
Synthesizing our data had us better understand the goals and behaviors of personas from the younger and older age ranges to start developing solutions.
Buy high-quality, great-tasting coffee products
Feel connected to a local brand
Purchase ethically sourced items
Daily coffee drinker
Seeks exclusive items
Try coffee before committing to a larger purchase
Buy high-quality, great-tasting coffee products
Consumes coffee daily
Loyal to brands
Seeks recommendations from family and friends
Sticks to her routine
But who should we prioritize?
Both personas had very different goals and considering scope and time, we wanted to make sure our decisions aligned properly with the business goals as well.
We concluded on prioritizing Jordan because she symbolized:
The largest part of the customer base
Was less rigid in her purchasing habits
Spent more money on coffee products
Sought out “elevated coffee experiences”
Unpacking the problem
Our target users want to hear about a product’s backstory and sourcing when they are shopping for coffee so they feel more connected to a brand.
Our solution should deliver an easy way to navigate the site so they can be informed about the details most important to them.
Therefore, how might we:
Show transparency about our ethical stances for socially conscious consumers so that they justify spending more than they typically would on a coffee product?
Highlight craftsmanship and different brewing methods of our products so that all users can craft a “luxury” experience?
Highlight that our products have a limited run, and are exclusive for avid coffee drinkers so that they are more enticed to purchase them?
Reworking the old & introducing the new
The current site had the correct framework, but more needed to be done to reach out and connect with customers. To better their experience, it was imperative to:
Redesign the UI & elevate UX writing
A UI redesign and elevating the UX writing would better connect to customers visually and draw them into the story behind the products that ar being offered.
Introduce two new content pages
A "Brew Guide" page would help the business facilitate education. An "Our Story" page would increase transparency to deepen the story of the products offered by Small But Mighty Coffee.
Involving our stakeholder
We held a team design studio where our stakeholder would let loose and contribute low fidelity ideas they had for Small But Mighty Coffee.
The Product Page
On the product page, our stakeholder indicated three main topics he wanted the page to convey: limited run products, flavor profiles, and the sourcing story.
We discussed his design decision of adding a remaining stock tracker that would easily convey product exclusivity.
During this process, our stakeholder suggested implementing a subscription service with this note that reads "included with subscriptions". Though due to the lack of evidence from our research, we decided not to pursue this as a solution. We didn't write this off completely. More on that later.
The Home page
This part of our design exercise also included the home page. Our stakeholder decided to break up this page into sections which you can see starting to the left and moving to the right:
Subscriptions (which we discussed above)
We used this page as a template for the "Our Story" page in particular. The home page was used as the main way of exploration versus education which we viewed in contextual inquiries we ran during the user interviews.
Large header image
More detail on topic
The what & why of our final design decisions
Considering the design studio exercise we ran with our stakeholder as well as testing both low fidelity and mid-fidelity wireframes, we presented our final design decisions that would be implemented on the site for testing.
UI redesign & UX content revisions
Home Page: UX writing changes, a call to action button change, and the introduction of a hero image allowed us to connect to customers who were highly visual and looking for a sense of exclusivity in the products they purchased.
The UX writing has changed to a brief intro of the brand, highlighting the craft and how it elevates the customer’s experience.
The hero image will make a connection with the customer that draws the customer closer to the product's sourcing and ethics in a visual manner.
Finally, the call to action button facilitates one of our primary goals to drive purchases of preorders that users feel are limited, upping their urgency to buy.
This is a continuation of the home page where we examined in our contextual inquiries that customers typically took their time to open multiple links throughout the home page to discover more about a brand.
"Immerse Yourself" is allowing the business to be more transparent. This would direct customers to the "Our Story" page.
"Taste it First" was an important olive branch to extend to our alternate persona, Pat, so we did not eliminate the opportunity to grow the customer base.
The "Brew Guide" allows customers to explore and educate themselves on the experiences they wished to have.
Product page: These changes easily let customers know about the flavor and exclusivity of the product.
As the customer enters the page, they are presented with an intro to the product via a brief recap to quickly understand the product.
A remaining stock counter was added to the hierarchy to reinforce that these products were limited run.
Data about variety, flavor, elevation, and brewing suggestions allowed a user to roll over these sections and be presented data about how this affects the product.
The Product page continues downward to draw users deeper into the story of the product they are looking to learn more about and eventually purchase.
Much like the top of the page, as a user rolls their cursor over the ‘sourcing’, ‘farmer’, and ‘cupping score' sections, they will be presented information on this specific product.
We also implemented a way to explain the process the particular product goes through to demystify the coffee roasting process and convey the sense of craftsmanship.
Brew Guide Addition
The Brew Guide continues the theme of education that aligns with business and customer goals, but we knew we could push this opportunity further.
This returns back to the idea found in our research where users saw products like whole bean coffee as part of an "experience".
Not only are we selling a product, but we are also selling a relaxing Saturday morning with a great-tasting cup of coffee. Providing that education to craft their own experience was crucial to teaching and empowering our customers.
"Our Story" Addition
We finally wrap up our solutions with the ‘Our Story’ page.
The Handcrafted Small Batches section presents the reason why people would want to buy from Small But Mighty Coffee as opposed to their competitors. More context is then given about general processing and sourcing practices.
In all, this page is the branding message and delivers the education and investment in something more than just coffee for the customers.
Impacting and growing Small But Mighty Coffee
All of these solutions came with intentional impacts that we believe we could bring to Small But Mighty Coffee. Each had its own unique opportunity for growth.
Via affiliate links, coffee equipment could be sold to continue to grow sales on the brew guide page. During our usability tests, customers were specifically looking to purchase this equipment from this page.
Video & Photo
Video tutorials were also sought after for educational purposes. This would also increase SEO footprint and could eventually grow to a revenue stream on a platform like Youtube.
We believe this could go hand in hand with more photography on the page that tells a visual story with the brand and increase connection to the user.
Once Small But Mighty could scale at a comfortable rate in regards to sales and retention, they could move towards the aforementioned subscription model.
The exciting part about this project is waiting for the data to come in! Our stakeholder was very excited about the work we completed and implemented our strategies right away. We are currently running A/B testing. From there, our team will begin to strategize and iterate on our designs!
Engaging our stakeholder was one of the most valuable things we learned during this process. Not only were we able to have valuable input from them but we were able to build a rapport with him as well. It allowed us to easily talk about not being able to move to the subscription model right away and back that up with data. Running the design studio was also just a great way to get to know him and have some fun during a process that can be very serious for stakeholders!