Case Study: Crafting a landing page for a Coffee Expedition

A walkthrough of how I designed my first landing page for a cultural coffee exploration vacation

Responsive landing page

✨ Context:

In the latter part of the year, I joined the 10kdesigners UI/UX cohort. One of the tasks there was to design a landing page for a certain niche event. The purpose of the project was to practice visual design and the design process to create an excellent website that was both visually appealing and practical. “Coffee Brewing” was my allocated niche.

Coffee brewing was something I had never heard of before. Even though we had the option of switching the niche we would work on, I decided to take this on as a challenge and continue with it.

I looked for past coffee-related events in India but couldn’t discover anything noteworthy. So I decided to use the Crazy 8’s technique to encourage myself to come up with novel ideas.

A coffee expo, a coffee exploration trip, a coffee workshop, and a day in the life of a coffee maker were just a few of the ideas that came to mind.

An overview

🤯 Problem Statement

Create a landing page for a fun-filled coffee discovery journey that works on the web and mobile devices.

A little backstory: When we were all working on the assignment together before, I came up with this design. This was an event I created for a fictional firm called ‘Mochato.’

Version 1 of the landing page

I was dissatisfied with the outcome. Following the pod wrap-up session, I decided to return to it later and start over.

🤓 Design Process

Unlike the last time, I opted to break down the entire process into separate stages this time. This allowed me to keep focused and on target.

An iterative non-linear design process

🧐 Ideation

I opted to create an event for an Indian coffee brand instead of a fictitious firm. I looked at the websites of a few different brands. In today’s world, there are several well-known Indian coffee companies, making it tough to choose one. Following a review of their websites, I decided to make Sleepy Owl the event’s imaginary organizer.

Sleepy Owl

🔍 Research

I questioned a few of my friends to see which of the event ideas I had come up with they would like to attend.

I’d like to go on a coffee tasting retreat, similar to a wine tasting expedition.

I’ve never heard of coffee exploration done in a different way before, but it’s something I’d like to try.

After hearing their comments, I decided to pursue the proposal of a unique coffee trip. Additionally, I was slightly swayed by this concept.

I thought about how the event would feel, gathered knowledge about the coffee industry, and brainstormed ideas for the event’s activities.

✅ Information Architecture

The landing page’s primary objective is to encourage people to register for the event. I organized the various elements of the landing page using the AIDA (Attention, Interest, Desire, and Action) framework.

Categorizing sections according to AIDA Framework

After that, I created a sitemap for the landing page, organizing important sections and their contents. This does not include visuals, which might be added as needed during the visual design stage.

Sitemap of the landing page

💡Inspiration

I explored ideas on a variety of other coffee-related websites. I also sought inspiration by section to identify visual pattern trends. Landingfolio, Behance, Awwwards, and Lapa Ninja were referenced.

Section-wise inspiration

Landing page inspiration

🖥 Wireframing

I created wireframes for each segment using references from existing pages. Then, to get a sense of how the landing page might look, I created a landing page out of those exact components.

Wireframes for each section

🌈 Visual Design

I made sure to finalise the copy of various portions of the landing page before starting the visual design process.

I started with section-by-section tweaks for the visuals as well. Iterations at the wireframe stage benefited in the visual design process’s pace. Each section had more than 5–6 variants, while the entire page had 18–20 iterations. Here is the link to the final landing page.

Web and Mobile prototype of the landing page

I also included a ‘Shop’ section on the event landing page to serve as a gentle reminder of the company’s offerings.

I used Sleepy Owl’s patterns with some of my own to create the visual style. I blended their and my styles. To give it a fresh look, I left the typography and brand colors the same but added new visual patterns.

After receiving some suggestions, I decided to exact their styles. As a result, I created a new version of the landing page that is visually comparable to Sleepy Owl’s main website. I didn’t think it was very impressive, so I didn’t do any further iterations. Here’s a sample of what I’m talking about.

Here’s a rundown of 2–3 iterations of a couple of landing page sections.

⭐️ Hero Section

Hero Section Version 1.0

Issues:

1. The center of attention shifts from the foreground to the background.
2. The content has a low contrast ratio.
3. With similar websites, aesthetics do not hold power.

Hero Section Version 2.0

Issues:

1. Because of the center alignment, scanning text is tough.
2. Brand colors have yet to be incorporated.
3. The images chosen don’t convey a sensation.
4. White space is underutilized.

Solution:

Hero Section Final Version

⚡️ Features Section

Features Section Version 1.0

Issues:

1. The body copy is ambiguous and full of filler words.
2. The information and image do not adequately represent the value propositions and might be better visualized.
3. There isn’t enough information to pique people’s interests.
4. Nothing is conveyed by the headline. Only fluff words are used.

Features Section 2.0

Issues:

1. Scanning is difficult. Important information is not emphasized.
2. There’s a lot of material here, and there’s not a lot of breathing room.
3. The body copy is hazy and full of filler words.

Solution:

Feature Section Final Version

🔮 Mentors Section

For this section, I used one of the mentors’ details and experimented with several arrangements.

Mentors Section Version 1.0

Issues:

1. The card resembles a ticket, which does not compliment the landing page’s tone.
2. The section appears to be lacking in visual appeal, and some graphic components may be added.
3. There is no indication of presence on social media.

Mentors Section Version 2.0

Issues:

1. This section appears cluttered because the information is scattered throughout the image.
2. Reading text from different angles is difficult.
3. The visual representation does not appeal to the eye.

Solution:

Mentors Section Final Version

📅 Schedule Section

Schedule Section Version 1.0

Issues:

1. Photos that are boxed don’t look nice next to images that aren’t boxed.
2. There’s a lot of negative white space all over the place.
3. The visual representation does not appeal to the eye.

Solution:

💰 Pricing Section

Pricing Section Version 1.0

Issues:

1. The body copy appears to be unrelated to the title.
2. Text that is dense and lacks breathing room.
3. The portion does not appear to be neat.

Solution:

Pricing Section Final Version

🧐 Frequently Asked Questions

FAQ Version 1.0

Issues:

1. The title is inappropriate because it contains just questions and no facts.
2. The solutions to all questions are displayed, which add to the cognitive burden and made it more difficult to read.

Solution:

FAQ Final Version

😇 Future Scope

• Other visual improvisations can be made.
• There could be an increase in the number of interactions.
• The landing page can be made more responsive for different breakpoints in addition to the web and mobile versions.

🤗 Learnings and Takeaways

• Iteration is crucial. Keep iterating on your designs and don’t throw out the old ones. Make a new iteration whenever you modify.
• Pay attention to what others are saying. Try to learn from the mistakes and feedback of others so that you don’t make the same mistakes.
• Don’t be intimidated. Break down large molecules into smaller problems and address them one at a time.
• It is critical to receive feedback. Maintain close feedback loops and develop iterations more quickly. Fail quickly, but fail ahead of schedule. Also, avoid becoming too connected to your creations.
• Observe the patterns that already exist in your world and strive to incorporate them into your creations. Re-inventing the wheel is a bad idea.

And that’s it 🌻

I owe Abhinav and the 10kdesigners community a huge debt of gratitude. I’d want to express my gratitude to Yug, Sargam, and Paritosh for their unwavering support and valuable feedback in helping me finish this project.

Congratulations if you’ve made it this far 😇

If you enjoyed reading this case study then long-press on the clap icon 👏 and show your support! Please feel free to contact me via Twitter or LinkedIn if you have any questions, recommendations, or would want to collaborate! I’m interested in Product Design positions. Let’s collaborate! 🤝