Case Study : Designing a landing page for a Coffee Subscription Website
👋🏼Introduction
Having already done a couple of projects in App Design, I thought it was time to try my hands on Web Design! And what’s better than to start with designing a Landing Page?
Now, the next thing to do was find a problem statement for creating a Landing Page. While I was casually scrolling through Instagram Reels, I stumbled across this extremely satisfying Coffee-making reel. I remember researching about coffee a year back just to get started with coffee because it seemed interesting! Now I have a problem statement too! So let’s get started!
🪶 Problem Statement
Design a landing page for a Coffee Subscription Website.
From a coffee-making reel to a Coffee Subscription Website?
After watching the reel and my own experience, I was sure that I wanted to do something around coffee. I arrived at the final problem statement after doing a good amount of research which will be discussed in the upcoming sections.
👨👩👧👦Target Audience
Coffee is the 3rd most consumed beverage after Water and Tea. About 2 billion cups of coffee are consumed every single day! Among those, the working class are the majority consumers. And among those, people who really know their coffee and are ready to experiment are even less! This makes coffee a very niche field.
The Target Audience then becomes, Beginners — people who want to get started into the world of coffee. On the side we can also cater to people who want to try out different types of coffee and are already well versed in the world of coffee.
🎡Overview
The goal of this case study was to design a landing page for a Coffee Subscription Website such that we convert people who are intrigued by coffee to Coffee Connoisseurs. Through the landing page we answer user’s questions like How to get started? Why choose us? Our subscription process and much more!
🏃🏻♂️In a hurry? Check out the prototype video here!
🕵🏻Research
🧠My Design Process
It started with exploring the Idea of Coffee and refining it to arrive at the final problem statement of the Coffee Subscription Website. Exploring around Coffee gave me very common results of either a Coffee Brand Website like Blue Tokai Coffee or Coffee Subscription Website like atlascoffeeclub.com. Upon more research on these two topics I chose the latter because Subscription websites lacked certain things which could be improved. These certain things came to my mind while exploring and comparing the above two topics.
My design process started with exploration and narrowing down the problem statement and then going back and forth for specific secondary research to visual designs iterations.
One new thing I learned and Implemented in this Case Study was the AIDA Framework. This Framework helped me structure my Landing Page to maximize user conversion.
Attention : Heading and CTA
Interest : Product Images and How it works
Desire : What will they learn? , We’ll have what they are having
Action : Subscription Plans
🤼Competitive Analysis
Now that I have converged to get the final problem statement of Subscription Website, it was time to diverge and compare various Subscription websites to find patterns and loop holes!
Points noted —
- Cater to only coffee enthusiasts who have already entered into the world of coffee.
- Limited to just delivering coffee.
- Variety of players in the market, like coffee syrup, instant coffee powder, coffee beans etc.
- Highly customizable options.
- Variety in sourcing coffee like In-house roasting, 3rd party roasters etc.
💡Ideation
Based on the research and competitive analysis, I ideated features that can be a part of my landing page:
- Catering to Beginners : All subscription services focus on customers who are already into coffee the coffee world and I have tried fill this gap so that more people can easily enter into this field and actually cherish drinking coffee.
- Coffee + Knowledge : Delivering just coffee won’t suffice for beginners. Coffee is a very intricate field and its takes a long time to know and understand its intricacies. To solve that we provide them with knowledge around coffee also like right brewing methods, tasting notes in different coffees etc.
- Developing a Community : Learning and sharing in a community helps you a lot, so why not with coffee? Conducting contests for the community to keep people interested and constantly improving.
- Coffee from around the Country : Not restricting people to taste only In-house coffee but instead let them explore coffee from around the country be it a Blue Tokai or Alchemist, we give you the best.
📃Information Architecture
🖌️Design
🐮Mood Boarding
This phase involved constructing my mood board for inspiration from websites like Pinterest and Savee. The inspiration was taken from not just landing pages but also random stuff around Coffee!
🎨Style Guide
These are the Text and Color Styles that I created for the designs to be consistent throughout and for the ease of designing.
💻Final Screens
Hero section : The main purpose of the hero section was to capture attention so after some research, Colors and Packaging is what caught the attention of many people in the world of coffee. The social proof section inculcates High quality and Tried and Tested feel in the users.
How it works section : I wanted this section to be highly visual so that the users know what they are getting into. Rather than just images, I felt functional cards would give the users a better idea. Divided the 4 steps into 4 parent cards to emphasize each step.
The coffee journey section: This section was an important section as this was the one that would bridge the gap between beginners and coffee connoisseurs. Chose the Bento style for this section because it effectively displays the learnings in a short screen space.
The recipe wall section : What better way to utilize a coffee community than to share your coffee recipes with fellow members? The recipe wall displays exactly that! The wall also includes ratings which helps users identify how other users have liked the recipe.
Subscription section : Though the main idea is to onboard more beginners, but why devoid others of the exceptionally good coffee sourced from around the country? That’s why there are 2 options for subscription, First “Just Coffee” Plan, where you get a regular subscription of coffee with customizations based on feedback, Details about the coffee received — Know your coffee and new recipes with every delivery. Second “Coffee Journey” Plan, which includes everything in the first one plus access to exclusive community and a learning experience to help you in the journey of becoming a coffee connoisseur.
Testimonials section : Reviews play a very important role in building trust among the users and maximize the conversion. An additional touch of “Number of roasts tried” gives more authenticity to the reviews.
Footer section : Kept the footer simple with a CTA button for easy access when someone reaches the end and some quick links on the side. And last but not the least, a big The Coffee Club label because why not😜
🔁Design Iterations
Iterated over multiple ideas and designs to finally get the final screens shown above.
Issues faced -
- To decide between showing Coffee of the Month or the Packaging of our Product.
- To show images or functional cards for How it works.
- To show The coffee journey in a Road with multiple stops or a bento grid. The road version made it difficult to add description to each stop and made it very cluttered, so chose the latter.
- Multiple variations with colors.
- To show Coffee Packets or Coffee boxes which contain packets. Since we collect beans from multiple sources, a outer box makes more sense because that way it gives due credit and recognition to the roaster with their own brand packaging inside our boxes.
🔗Prototype
Here’s the link for the Figma prototype! Check it out
