Revamping Mycro Harvest: How I transformed a bland landing page into a brand new experience
Welcome to a detailed redesigning journey of “Mycro Harvest’s Landing Page Experience” — a personal project that showcases my approach to enhance user engagement in the AI-powered, smart farm tech for mushroom cultivation.
Note: This case study is not associated with Mycro Harvest and is based on my personal views. The study’s scope may be limited due to the lack of complete user data. It was conducted as a learning exercise to challenge myself and develop innovative redesign strategies. 🚨
Imagine a world where anyone can be a mushroom maestro. No special soil, no cryptic rituals — just you, a sprinkle of technology, and a bounty of delicious, nutritious fungi. That’s the story I want to tell with the new Mycro Harvest’s landing page.
🍄About Mycro Harvest
Mycro Harvest is a company that uses AI-powered mushroom farms to grow low-carbon food and materials.
Why the redesign?
- The current website is clean but in my opinion, it is all about the brand and does not speak to the target persona
- What is it exactly? Who is this for? How does it work? Is it B2B or B2C? — these were a few questions which came to my mind while scrolling through the website
- Lacks essential information, less engaging flow for the users, the colours and imagery do not seem to work
After this exploration, I set out to reimagine Mycro Harvest’s landing page and improve the experience in any way I could.
Redefine mushroom cultivation with AI. Traditional methods are a thing of the past. Design a website that embodies the future of farming.
Duration: 14 days
TL;DR: See it in action!
Skip ahead and check out the interactive final prototype here👈 and experience its interactive features for yourself!
Alternatively, you can watch the video (though I’d recommend trying out the prototype) 👇.
🎯Goals and motivation for the redesign —
My goals for the redesign:
- Refresh the UI for a modern and intuitive feel
- Increase user retention, improve user satisfaction
- Enhance user experience for a seamless journey into the world of smart farming
My personal goals:
- Take full ownership of the various roles involved in designing a product such as a User Researcher, User Experience Designer, and UI Designer.
- Enhancing my learning experience by challenging design decisions and addressing their solutions
📝Let's begin
Understanding AI in farming was step one. But who would benefit the most? With the website lacking a target audience, I saw a chance to put the users first. Let us create a B2C experience that caters to everyone interested in smart mushroom cultivation.
Understanding Our Audience
MycroHarvest’s target audience spans a spectrum of mushroom enthusiasts. This includes experienced home growers seeking to elevate their setups, restaurateurs and chefs interested in high-quality, locally sourced mushrooms, and even curious individuals who want to explore the exciting world of mushroom cultivation at home.
Desired Outcome
Through this landing page, my goal is to educate, inform, and engage the target audience, showcasing the benefits and applications of AI in mushroom farming.
Let’s pause for a moment and enjoy this short GIF I made.
✏️My Design Process
To tackle this project, I dove into a well-structured design process to get the best results. The first version took me about four to five days to craft, and then I incorporated all the feedback I received to make it even better.
Harnessing the Power of AIDA Framework
To shape my design approach, I turned to the AIDA framework, a concept introduced in the 10k Designers cohort. This framework comprises of four stages: Attention, Interest, Desire, and Action. If you are curious to learn more, click here.
During the ideation phase, I leveraged this framework to craft a compelling landing page. I analyzed how successful smart farm tech websites implement AIDA to guide users towards specific actions, like signing up for a free trial.
Let’s explore how I applied AIDA to create a user journey that captures attention, ignites interest, builds desire, and ultimately leads to action — growing MycroHarvest’s business.
- Attention: Captivating hero section with copy that generates curiosity
- Interest: Describing how the technology works in a captivating way, showcasing its unique features and advantages
- Desire: By explaining the benefits in more detail and emphasizing on how the tech produces fresher, more flavorful mushrooms while minimizing environmental impact
- Action: a clear CTA button, “Order Your Mushroom Kit Today!”
🔍Research
The initial phase of my research involved a detailed examination of competitors and their features in the AI-powered smart farm technology for the mushroom cultivation field. Through this analysis, I identified several exciting opportunities for Mycro Harvest to differentiate itself from its competitors and provide a superior user experience.
Leveraging ChatGPT was incredibly beneficial in refining these insights and enhanced my overall research.
- Personalized Cultivation Plans: Providing personalized cultivation plans based on factors such as mushroom variety, location, and climate can offer a customized experience for users and improve user satisfaction
- Real-Time Monitoring & Automation: Integrating real-time monitoring of factors like temperature, humidity, and nutrient levels allows for automated adjustments and optimizes plant growth. This can be a significant advantage over competitor systems that rely on manual monitoring
- Modular and Scalable Solutions: Offering modular and scalable solutions can cater to a wide range of customers, from small-scale hobbyists to large commercial farms. This flexibility can attract a broader customer base and increase market share
- Remote Farm Management: Cloud-based platforms and mobile applications can empower Mycro Harvest growers to monitor and manage their farms remotely. This allows for greater flexibility and faster response times to changing conditions, optimizing farm operations
- Sustainability and Environmental Impact: Emphasizing sustainable practices, such as using organic substrates and reducing waste, can appeal to environmentally conscious consumers. Highlighting these features can differentiate Mycro Harvest from competitors and attract a niche market segment
- Advanced Data Visualization & Insights: Providing users with clear and actionable insights derived from the collected data empowers them to make informed decisions about their smart farm. Interactive dashboards and reports can elevate Mycro Harvest above the competition
- Seamless Integration & Scalability: Designing a system that effortlessly integrates with existing smart home devices and offers scalability for expanding operations will position Mycro Harvest as a future-proof solution
- Educational Content & Community Building: Offering informative content and fostering a user community around indoor farming empowers users and fosters brand loyalty
- Simplified Setup & User Interface: Prioritizing a user-friendly setup process and intuitive interface ensures a smooth experience for users of all technical backgrounds
- Providing consumers with a higher level of transparency and trust
🗺️Information Architecture
The Information Architecture (IA) developed offers a visual blueprint of how content is structured within the product. By grouping pages based on user journeys and detailing the content within each Mycro Harvest’s IA facilitates a user-friendly experience. It seamlessly guides users through essential features and information required for successful mushroom cultivation.
✏️Wireframing
Throughout the wireframing process, I tested several layouts to fine-tune the information architecture. Here is a snapshot of the wireframe:
🖼️Moodboard
To get my creative juices flowing, I went on a full-on mood board adventure! This was not just about pretty pictures, though. Here is the cool stuff I found to spark some serious design ideas — From experimenting with text styles and vibrant colours to exploring bento grids, layouts, imagery, and everything in between!
🌟Visual Guidelines
Mycro Harvest’s refreshed visual guideline captures a blend of innovation and accessibility, inspiring users to grow gourmet mushrooms at home. The following guidelines establish a cohesive visual language that reflects the brand’s core values:
- Bright and Optimistic: The colour palette leverages a combination of blue, orange, and yellows. This selection evokes feelings of optimism, growth, and fresh possibilities, perfectly aligning with the excitement of cultivating gourmet mushrooms at home
- Simple and Approachable: The design aesthetic prioritizes clean lines, clear elements, and uncluttered layouts. This simplicity reflects the brand’s user-friendly approach, ensuring that everyone can easily start their mushroom cultivation journey
- Playful and Engaging: Introducing pops of orange and considering illustrative elements in future designs add a playful flair to the brand, mirroring the joy of growing and harvesting your own food
- Typography: Opting for clean, modern fonts that are easy to read across various applications.Using a combination of Impact font for headlines & titles and a more approachable font like Josefin Sans for body text.
- Overall Tone: Maintain a balance between professionalism and approachability
🔁Some early iterations
Before we dive into the final reveal, let’s rewind a bit and dive into the process with some early explorations and the decisions which shaped them.
The journey to the final design involved multiple iterations, tweaking layouts, fonts, and design elements. A crucial step in this process was determining the essential information for each section and ensuring its purpose was clear. Comparing the initial draft to the final design highlights the impact of meticulous attention to detail. From micro-adjustments like colour tweaks for optimal contrast to concise copywriting and refined font sizes, every element contributes to a landing page that’s not just aesthetically pleasing but also highly functional and scalable.
🥁Unveiling the Final Design
The wait is finally over! I’m excited to share the final version of the landing page with you. Your feedback is incredibly valuable to me, so please take a moment to share your thoughts in the comments below. Thank you!
“Really nice work overall, don’t think I can add any points of improvement”
- Abnux
Let’s Break it Down
To ensure the landing page effectively connects with users, I conducted a deep dive into each section. This analysis wasn’t just about functionality; it was about achieving a delicate balance between business goals and a seamless user experience.
Alright, let’s dive into each section, one by one.
1. Hero Section
The hero section is the prime landing pad for visitors, so it needs to make a lasting first impression. For Mycro Harvest, we designed a hero section that’s both informative and inviting.
- Clear & Concise Copy: The headline “Mushrooms Made Easy” instantly conveys the product’s value proposition. Supporting text with calls to action like “Order Today” and “Discover How” guides users towards the next steps
- Appetizing Appeal: The hero image showcases a cluster of fresh, white mushrooms, evoking a sense of deliciousness and homegrown goodness
- Playful Elements: The playful illustrations surrounding the image and buttons add a touch of whimsy and personality, making the Mycro Harvest experience feel approachable
- Trustworthy Touches: The background texture adds a subtle layer of depth and sophistication and further builds trust. Logos from featured brands add credibility and social proof, demonstrating the brand’s recognition and reliability
By combining these elements, the hero section effectively grabs attention, delivers essential information, and builds trust with potential customers, setting the stage for a positive user experience throughout the landing page.
2. Benefits: Cultivating User Desire
The benefits section on the landing page is designed to be more than just informative! Here’s how it entices potential customers:
- Visually Appealing Layout: The section features clean, high-quality mushroom imagery alongside minimal icons. This approach keeps the focus on the core benefits while maintaining a fresh and contemporary aesthetic that aligns with the product’s overall brand identity
- Crisp & Compelling Copy: The headline is brief and bold, making it instantly readable and memorable. The copy itself is crisp and concise, highlighting the key advantages of Mycro Harvest in a way that resonates with the target audience
- Intriguing Call to Action: A clear “Know More” button invites users to dive deeper and explore the world of Mycro Harvest benefits in more detail
- Fresh & Inviting Aesthetic: The overall design maintains a light, fresh feel that reflects the health and taste of the mushrooms themselves. The colour palette and use of white space create a sense of openness and cleanliness, further emphasizing the product’s natural qualities
- Nurturing Our Promise: The catchy phrase “Nature meets Nurture” reassures users about Mycro Harvest’s commitment to quality and sustainable practices, adding a layer of trust and responsibility
By combining these elements, the benefits section effectively transcends simply listing advantages. It tells a story — a story of possibilities and a fresh approach to food — which directly resonates with the target audience.
3. Process
The landing page takes the mystery out of mushroom cultivation with a clear and engaging process section. Here’s what makes it shine:
- Catchy Headline: The playful headline used instantly grabs attention and sets a fun tone for learning about the process
- Interactive Pointers: Four easy-to-understand pointers visually represent the key steps involved in the process. These pointers likely include short labels to give a basic idea of each step
- Hover-Over Explanations: As users hover over each pointer, a more detailed description of the corresponding step appears. This keeps the initial view uncluttered while providing users with the information they need upon demand
- Benefits at a Glance: Following the process breakdown, another set of icons highlights the key user benefits. The overall tone highlights how Mycro Harvest allows users to enjoy fresh mushrooms with minimal effort, thanks to AI technology
- Highlighting AI Technology: A short explanation is added here to clarify how AI technology simplifies the process and ensures optimal growing conditions for the mushrooms. This reinforces the value proposition of Mycro Harvest’s smart system
Overall, the process section effectively leverages interactive elements and clear explanations to engage users and demystify the mushroom cultivation process.
4. About us
The About Us section is designed to introduce the brand, its mission, and its commitment to sustainability. Here’s a breakdown of its key elements:
- Compelling Introduction: A concise and engaging description introduces the brand and its mission. This highlights the company’s commitment to innovation, sustainability, and the ease of homegrown mushrooms
- Impactful Message: A powerful statement like “Every grower makes an impact!” emphasizes the positive environmental impact of Mycro Harvest’s technology. This instantly connects with users who are eco-conscious and resonates with the brand’s sustainability message
- Social Proof: This dedicated section showcases the positive impact of MycroHarvest. Which include statistics of the number of happy growers, and the environmental benefits of using the technology. Highlighting these elements builds trust and credibility with potential customers
- Interactive Accordion Menus: The use of accordion menus with brief titles keeps the section visually clean and uncluttered. The inclusion of brief titles with expandable drop-down sections allows users to explore specific details about Mycro Harvest’s technology and its benefits. This approach allows users to explore information at their own pace and delve deeper into areas of interest
Overall, the About Us section effectively introduces Mycro Harvest, its mission, and its values. It leverages social proof, impactful messaging, and interactive elements to create a positive and trustworthy brand image.
5. Blog
The landing page also incorporates a visually appealing blog section to keep users engaged and informed.
- Grid-Style Layout: The blog articles are arranged in a clean and user-friendly grid layout. This allows users to easily scan headlines, browse visuals, and discover content that excites their interest
- Compelling Titles & Images: Each blog post likely features a catchy headline and an enticing image, effectively grabbing user attention and giving a hint about the content
- Strategic Call to Action: A strategically placed “See More” button tempts users to explore the full blog and delve deeper into the world of Mycro Harvest. This button likely leads to a dedicated blog page where users can discover a wider range of articles, recipes, and mushroom cultivation tips.
6. FAQs
In this section, I focused on questions that the users might have after going through the landing page. The FAQ section has the most common and essential questions answered already.
It’s Figma Time! See the MycroHarvest Prototype in Action here 👈 or watch the video below!
✨Reflection and lesson learned
This project presented a unique challenge — venturing into the world of smart farm technology, a topic I was initially unfamiliar with. However, instead of letting nervousness hold me back, I saw it as an opportunity to expand my design horizons and tackle previously unexplored waters.
- The Power of Planning: Breaking down the project into manageable chunks with clear deadlines kept me focused and helped ensure everything came together smoothly
- Striking the Information Balance: Finding the sweet spot between providing compelling information and avoiding user overload was crucial. I actively honed my ability to prioritize content and ensure clarity without overwhelming the user
- Discerning Feedback: iscerning which feedback to incorporate and which to respectfully leave behind was a skill I honed during this project. By understanding the “why” behind the feedback and staying true to the project’s scope, I was able to make informed design decisions
- The Power of Documentation: This project truly highlighted the importance of meticulous documentation. Having a clear record of my design choices and thought processes saved me time and frustration. It also helped me confidently explain the reasoning behind my decisions during feedback sessions
Overall, this project was a journey of growth and exploration. By embracing the unfamiliar and actively learning along the way, I developed valuable skills and design insights which will be instrumental in my future projects.
Fin.
Wrapping up, this landing page project was a thrilling first step into the world of crafting user-centric experiences. I am incredibly grateful to the amazing mentors and peers at 10k Designers for their invaluable feedback and support throughout the process. Their guidance truly helped me elevate the final design.
I hope you enjoyed this case study as much as I enjoyed crafting it. Your time and patience is truly appreciated.
Feedback? I’m all ears! Feel free to share your thoughts in the comments below or just want to say Hi? Connect with me on Twitter and LinkedIn
🤝 Furthermore, I’m actively seeking opportunities as a Product Designer. Do reach out if you’d like to work with me or collaborate on some projects. Feel free to reach out on LinkedIn or Twitter.
PS: Did you know? You can give up to 50 claps on Medium by long-holding the clap button! 👏🤩
Thank you, Have a great day ahead ❤️
