Coffee Subscription Site
Project Overview
This project involved designing a sign-up coffee subscription service featuring a unique ‘coffee quiz’ that determines the coffee preferences of the customer for a local roastery. With research, competitor analysis, a survey, and design exploration, I prototyped a website which utilized tone and inclusive language to ensure any user could order without having any prior knowledge about coffee. Alongside branding, package design, and web design, I aimed to develop a fun, unique, and informative system that would separate this roaster from the rest.
Role
Designer
Project Date
Fall 2022
Client
Class Project
Involved
Branding
Prototyping and Wireframes
Design Research
Packaging and Web Design
Social Media Content Creation
Copywriting
Project Details
-
This project aimed to create an easy and informative sign-up process for an imaginative local coffee subscription service. To do this, we conducted research, including a survey and competitor analysis. We then developed two user personas to understand both coffee lovers and newcomers.
-
The multipage coffee subscription site was created to simplify the coffee selection process for users of all experience levels. By integrating an interactive coffee quiz, potential subscribers can discover their preferences in a user-friendly manner, ensuring an enjoyable sign-up and purchase experience.
The inclusive language and tone foster an inviting atmosphere, eliminating any intimidation that may come with selecting new coffee types. Throughout the website, clear descriptions and approachable visuals help demystify the world of coffee, making it accessible for everyone.
Further enhancing the user experience, the project extends beyond the website to include cohesive branding, packaging, and identity design. This emphasis on a fun, engaging aesthetic resonates with the local Edmonton community, particularly for those opting for local delivery service. The overall identity reflects the vibrant culture of Edmonton, showcasing both the quality of the coffee and the character of the city. In doing so, the project not only builds a strong online platform but also fosters a connection with the local audience, encouraging coffee enthusiasts and novices alike to explore and enjoy their coffee journey.
-
Define the project goals and assign KPI’s and target audience
Develop personas to empathize with the target user
Define the why, the user need, the project challenge
Research coffee and how it is made to aid my overall understanding
Conduct a local competitor analysis
Design a modern identity system, style guide and apply it to packaging
Design a customized ‘coffee quiz’ for personalized product suggestions
Develop site map and user flow for website and coffee quiz
Create wireframes and prototype site
Conduct user testing for improvements
-
The user need came from a lack of local personalized coffee subscription services that offered delivery for patrons. Additionally, there is often a lack of coffee roasters that aim to educate patrons about the history, production, and different types of coffee there are.
The challenge for this project was to develop a coffee-through-the-mail subscription service where the sign-up experience helps determine the coffee preferences of the customer (region, roast) and the frequency that they want the coffee delivered. Most importantly, the experience must help educate the user about coffee.
-
For this project, students were asked to define project-specific goals with associated key performance indicators. Though these goals and KPI’s are theoretical, by defining them, they could aid in tracking progress and measuring the overall impact of my work. Thus, by using data-driven insights, I can make informed decisions and optimize my designs for maximum impact.
Project Goals:
Site offers an opportunity for users to learn about coffee, its services, and products
Users go through a seamless and successful sign-up experience on web
Users experience a comprehensive and personalized subscription selection experience
Project KPIs:
More than 50% of unique users visiting the site spend at least 1min browsing
More than 5% of all patrons opt-in to receive a monthly newsletter/subscribe to email
Fewer than 2 unique mistakes are made by each visitor when completing their sign-up experience
Project Research
-
In order to empathize with the user and design a coffee subscription site that offers premium blends and useful information about coffee, I consulted secondary sources for more information. Through my research, I was able to learn about coffee basics, how coffee is made, the various blends that are offered, and its sustainability. By doing so, I was able to add pages, topics, and extra categories to the site that provided educational content and specific design elements to the project.
-
The Experienced: John
John is a avid coffee drinker that enjoys dark roast black coffee. He loves hanging out with friends at coffee shops, but is a real enthusiast when it comes to preparing is coffee at home. He uses a variety of methods to make his coffee but needs a way to have it delivered because he is extremely busy with work as a small business owner.
His goals:
fast and simple subscription sign up
being able to track his order progress
a sign up experience that remembers his last order and coffee preferences
Pain points:
running out of coffee at home
contacting someone for tech issues
when his personal info isn’t saved and he has to re enter preferences
The Newbie: Sarah
Sarah is new to the world of coffee making and really needs some guidance in terms of figuring out what she likes and then how to make it at home. She has plenty of time on her hands because she recently graduated. She is eager to learn and wants to share her passion with her friends when they come over next weekend for brunch.
Her goals:
learn about coffee
view subscriptions options
learn about the subscription and increase her knowledge
Pain points:
not knowing where to begin
contacting someone for tech issues
feeling like there are too many options
not knowing what coffee she likes
-
Another important part of my design process was to analyze the competitors within the local coffee roastery and subscription service industry. This is because analyzing the competitors can help me understand the strengths and weaknesses of their website accessibility, pricing strategies, product offerings, and subscription services. By gathering this information, I was able to identify opportunities to differentiate my design and subscription service from the competitors and develop a unique value proposition that resonates with my target audience. For this portion of the project, I focused on analyzing competitors solely within Edmonton, this included looking at the opportunities and successes from:
Transcend Coffee & Roastery
Yeg Coffee Club
Ace Coffee Roastery
Roasti Coffee Co.
-
I conducted research through an online survey with thirty people from different backgrounds. The survey focused on their coffee habits and preferences regarding coffee subscription services.
Key points:
Only 2 out of 30 participants have used a coffee subscription service.
Coffee subscriptions are viewed as "easy" and help avoid running out of coffee.
Participants disliked minimum order limits and restrictions on blend choices.
Key findings:
Respondents expressed various preferences for taste, type, brewing method, and subscription options.
Not everyone makes coffee at home or for personal use.
It's essential to consider inexperienced users.
Survey highlights
Style Guide and Product Packaging
Utilizing my research and user personas, I decided to developed a warm, modern and fun design system. The system was also applied to the product packaging which utilized the geometric cup logo as a pattern on packaging while offering key information such as roast type, flavours, amount, and bean size.
Style Guide
Moodboard and Logo Mockup
Coffee Bag Design
Website Structure and Site Map
In order to map out the structure of the website for the coffee roastery, I utilized a site map is a visual representation of the hierarchical structure of the website, showing the relationships between different pages, sections, and content elements. By doing so, I was able to utilize the map as a tool for organization and ensuring I design with accessibility in mind.
Site Map
User Flow
After creating the site map, I developed a user flow for a personalized coffee quiz, subscription sign up, and simple check out experience. In doing so, I outlined a series of steps or actions that a user could take to accomplish ordering coffee from start to finish within the site. Thus I mapped out the user's path from entry point to exit point. This process helped me identify potential roadblocks or areas for improvement.
User Flow
Wireframes
The following wireframes show the early iterations of the basic web structure for each page. Below is a view of the landing page and the coffee quiz screens.
Website wireframe
Web Pages
Pages at a glance
For this project, I was able to build out the majority of the screens needed to make it a functional web prototype. With this in mind, I created the landing page as a start and built everything from there. The coffee quiz has 7 screens that take the user through the steps of choosing a blend, customizing their subscription, and creating an account to check out. Additionally, I built out an account dashboard, contact page, and other additional pages. In an effort to increase the educational value of this website, I made sure to include pages such as an informational blog page, an 'about beanz' page, a FAQ, and a detailed page about their subscriptions.
Designed Pages in Figma
Prototype Video
Project Reflection
Through this project, I learned more about the inner workings of coffee estates and the needs that a small business such as this one might have. This included offering a personalized experience, resources, and ways to stay connected as a growing coffee community.
Areas of Improvement
Moving forward, I am eager to learn more about how the site could adapt to a mobile view as I did not develop this portion out for the semester. I believe this would be a great addition as most folks reach for their phone nowadays. Thus, being able to browse, order, and learn on your phone would increase traffic, and sales, and of course, aid the user’s overall experience. All in all, I am proud of the work that I’ve put into this project and excited to share it with all those who helped me along the way, including my instructor Anne Brown, friends and family, and of course fellow design peers.
