Tenfold Coffee Website Redesign
Background:
Tenfold is a specialty coffee shop in Houston, Texas. They have a website, but it hasn’t been updated since their opening in 2020.
-
Tenfold's website is currently more of a landing page for customers, and doesn’t communicate any of the notable values and practices they have around how they source, roast, and serve their coffee. They would like to increase their user engagement, their online coffee bag sales, establish more of an online presence, and educate their customers on their business practices. They also don't have an online wholesale portal for wholesale clients, and want increase efficiency of invoices being tracked and paid online.
-
My objectives for the redesigning Tenfold’s retail website were to increase online coffee sales, increase monthly coffee bag subscriptions, and communicate many of Tenfold’s initiatives and philosophies around how they source, roast, and serve coffee in their cafe.
My objective around designing a new wholesale website was to research what needs, desires, goals, and frustrations wholesale clients have around ordering coffee, create a user journey and sitemap with those needs in mind, and hand off those designs to the visual designer to implement.
-
I was hired to do all UX research and UX design for the redesigned retail website and new wholesale website. This included organizing user and marketplace research, site-mapping, prototyping, information architecture, and implementing the designs within Shopify.
I worked closely with the business owner and visual designer whose responsibilities were UI and visual elements and text copy for both websites.
-
The biggest challenges during this project were working within Shopify’s parameters, limited research budget, no developer to create customized designs within the Shopify theme, creating a sustainable service design for Tenfold’s new subscription service, and reaching the large variety of users across the coffee knowledge spectrum easily.
-
This case study will be following the redesign of the Tenfold retail website and, as it is an ongoing project, will be updated accordingly.
Researching the Marketplace:
I first wanted to research more about the online specialty coffee marketplace. My experience in the coffee industry gave me knowledge of where to begin researching and who some great competitors were when analyzing online platforms.
I researched 10+ coffee roasting websites (Heart, Corvus, Methodical, St. Frank, La Cabra, Stumptown, and Coffee Collective to name a few), but chose to do a deep-dive and perform a competitive analysis on 3: Verve Coffee, Onyx Coffee, and Trade coffee.
Direct Competitors
Indirect Competitor
On top of analyzing each company’s usability strengths and weaknesses, visual design, and differentiation in the market space, I defined 3 objectives to seek out when going through their websites.
Takeaways:
My observations on what makes a coffee website usable and delightful for a wide spectrum of coffee drinkers are:
A way to guide people into what coffee best fits their preferences (a coffee quiz is a great example)
Home brewing information that is easy enough for a brand-new home brewer, but has enough detail for people who want to fine-tune their home brewing methods
The websites that had unique icon sets, unique terms for the roast level, and enjoyable animations really enhanced the user experience and memorability.
Education offered with information. For example, explaining why the brew method might influence what type of coffee is recommended, why “how you drink your coffee” (with milk or black) makes a difference in what coffee you might like, why coffee is priced to a certain point, etc.
Any website that had a coffee calculator was a nice touch, especially if they were wanting to sell a subscription service to take the guesswork out of “how often will I even need a bag?”
Text copy felt very important for an approachable experience.
Any review felt like a nice touch- from reviews on subscription services, specific coffees, or reviews on being a wholesale account.
User Research:
I then went to research users. I conducted interviews with 5 users of varying coffee knowledge, home brewing preferences, and access to specialty coffee. My goals in the interviews were:
To understand user behavior towards coffee buying habits, online and in person.
To understand any confusion or frustration users have when buying coffee from specialty coffee shops
To gain insight into any useful or delightful experiences people have had when buying coffee, online or in person.
To better determine what features and language people find useful when selecting a coffee bag.
To narrow down target users who would use an online coffee subscription service and further define what needs, wants, and desires those users have.
The Interviewees:
Data Collection:
Takeaways:
Most interviewees, across the coffee knowledge spectrum, talked about confusing terminology in coffee, and how they all valued more approachability in the language used in specialty coffee.
Most interviewees wouldn’t purchase a subscription unless there was some kind of value-added deal. Some mentions included free shipping, savings on coffee, or some kind of bonus for their loyalty and efforts.
3/5 interviewees expressed appreciation for knowing why coffee is priced the way it is; or expressed frustration in not knowing why coffee is priced the way it is.
Understanding coffee seasonality and brewing methods were two areas of education interviewees would like to see more of.
Creating Personas:
From the user interviews and data, I was able to define three personas that would use and engage with Tenfold’s online coffee platform. I further defined each persona’s values, needs, desires, pain points, and features they would utilize with a coffee website, applying the information gathered from my competitive analysis. Meet Diego, Mark, and Mary:
These research-informed personas were used and referenced when collaborating with the owner and developer on what features to design on the website and what coffee subscription offerings to create. Based on the research, we made the following decisions:
Creating 2 subscription offerings, one "Roaster's choice" (offering a new, exciting coffee selected by the roaster), and an "I can't run out of coffee" (offering a less-expensive, larger package offering for someone valuing convenience).
Designing and developing the following features: A coffee quiz, a coffee calculator, and a way to review previously ordered coffees.
Developing a more defined language unique to Tenfold on how coffee is communicated.
Defining what education and brew recipes users are looking for to add to the website.
Beginning the design + the setback
Information Architecture
After collecting user and marketplace research, I began brainstorming information architecture and designing the first iteration of the sitemap.
After getting stakeholder feedback, iterating, and finalizing the sitemap, I began creating a prototype.
Prototyping
Implementing the design & the setback
I learned quickly that my prototype, although useful for me to visually display how I imagined the content looking, was useless when trying to recreate the design into Shopify. It was my first experience working in Shopify, and I learned quickly that the limitations on how a website looks are very dependent upon the Shopify theme you select. So, I went to research Shopify themes.
The business owner and visual designer both wanted video to have a large part in the visual aspect of the website. This narrowed down many Shopify themes, and I landed on the “Be Yours” theme because, with the limitation of not having a developer to do any customization, it offered a comparatively large variety of blocks for different ways content could be displayed as well as having a custom icon set we could utilize throughout the website.
Additional Shopify challenges
Another big challenge of this design was finding the right Shopify Apps for the different features we wanted to implement on the Tenfold website. We wanted a product quiz to lead different users to a coffee that best fits their preferences, a calendar/ticketing app for events Tenfold hosts, and a subscription app for the coffee subscriptions Tenfold wanted to create. Shopify has hundreds of apps, and they all vary in price, visual customization, and features. I tried out many different apps for each of these desired features to find the best option while taking into consideration how they best integrated into the Tenfold Shopify storefront and the price limitations.
Updating the design: Tenfold’s Philosophies
Upon viewing the sitemap and prototype, we realized we weren’t fully communicating all we wanted to in regard to Tenfold’s mission and business practices. The initial designs included talking about Tenfold’s coffee sourcing, roasting, and service philosophies all in the “About” section, but we wanted to explore how to communicate that better. Tenfold works with exactly 7 farms, carefully selected, to have long-term partnerships, and they wanted to use the website to educate consumers in an approachable way about the coffee supply chain, the impact purchasing coffee from Tenfold has from a sustainability perspective, and the stories of these farms and farmers. They also have very intentional ways of approaching roasting, aiming to showcase each coffee's unique qualities depending on the region, variety, and processing method. Tenfold is equally passionate about the consumer experience within their shop- they are very community oriented and offer weekly coffee classes, dinner pop-ups with local chefs, and giving guests a professional hospitality experience when serving them in the shop.
We redesigned the sitemap-navigation to include 3 subheadings in the “About” tab:
Sourcing Philosophy
Roasting Philosophy
Hospitality Philosophy
The Current Design
Where it stands
This was a unique challenge with not being able to transfer Figma design files and having to design directly into Shopify. As it stands, I have designed every page on the website, integrated apps, included very basic copy and placeholder images, and handed off the website for the next steps to be completed by the visual designer and business owner.
Estimated launch: June 2023
What’s Next:
Upon their work adding copy and visuals, I will conduct usability testing and iterate the design as needed.
One of Tenfold’s brand colors is light pink. Before launching, I will test the website for accessibility to ensure the brand color is being showcased the best way while adhering to WCAG guidelines.
The wholesale website design will be based on the redesigned retail website, I have begun user research for wholesale accounts and will go through the design thinking process when designing a complimentary wholesale account website for Tenfold.
I will continue to revisit my initial objectives, the research from users, and my personas to ensure all content, visual displays, and information architecture are indeed meeting my user’s needs.
Conclusions:
Lessons Learned
The most obvious takeaway was to do more research on the platform I am designing on before spending time creating mockups that may or may not be actually feasible to design.
When conducting research I learned to take time after each interview to evaluate how well the interview questions were at getting the information I was looking for. I scheduled the interviews close together and reviewed all the data after the interviews were completed. Upon looking at all the responses, there were some areas I wish I would have investigated further with each interviewee. Moving forward when conducting interviews, I will take time to make adjustments to my interview script to ensure I am collecting the best data possible.