View the original post
A case study on creating a website landing page for a virtual Gardening meetup.
💚 The Gardening niche.
As part of the 10KDesigners Masterclass, a specific niche was allocated to work on and design a web page to improve our visual design abilities.
The niche assigned to me was a — Gardening meetup platform.
This case study will explain my whole designing process- research, explorations, Information architecture, visual design works and the learnings I gained from this assignment.
🤔 How well do I know about gardening?
Is gardening all about- greenery, plants, flowers, soils, watering and pots?
Do I have enough knowledge/resources about the gardening world to start the design immediately?
Well, a lot of questions came up before me when I started. Some are stupid questions, while others are biased, but all can be answered or countered, so before making any design decisions, I make a list of things that need to be better understood and include them in the designs.
Here is the list of topics/questions that helped to get the right start.
- Who are the people who will attend the event?
- What might a virtual event in this niche include?
- What kind of style guide might work best for the niche?
- As this event will be online how to attract people to participate more?
- What events or activities happen in any gardening meetups?
- Is there any gardening meetup platforms online?
🤩 5,8,10 and 12 health benefits Gardening provides
These search results helped me to understand for whom the Gardening meetup platform will be designed.
Gardening impacts every generation of the world as a hobby, but this practice develops an individual’s physical and psychological health.
Participation in gardening occurs both at the personal and community levels.
So the design needs to cater are:
- Comprehensive contents.
- Events list that matches the real gardening activities.
- Registrations for individuals as well as groups or communities.
- Visuals to promote the idea of the online gardening events better.
👀 How should the website look like
A basic website framework contains — Header, banners, Call to action buttons, testimonials, blog posts and footer etc.
The scrolling actions (vertical) help the user to follow the conventional way to consume the whole content on the page.
So I chose to preserve the same action, structure, and aspects of the website so that my target audience would find it simple.
2. Ideas and Inspirations
Looking for inspirations for my niche, the keywords- Gardening, Plant selling, Green theme, etc were the most searched.
The type of websites that I found related to gardening meetup platforms looked cluttered with contents and UI elements that would simply reduce attention and participation from the users at the first glance itself.
Here are some of the websites that I took inspirations and ideas for my design:
Therefore, the following design considerations were necessary for the visuals:
- Clean and concise design elements.
- Conventional website layout.
- Style guide that properly connects with the niche.
- Appropriate and consistent interactions.
🧐 What I am creating
So before I started with ideating designs for my assignment. I formulated a need statement that sparked the design assignment.
A global gardening meetup that brings people from all over the world together and connect with others passionate about food and gardening.
Events include hands-on workshops, garden activities, talks on exciting gardening topics including urban farming, permaculture, regenerative agriculture, hydroponic gardening and more will be incorporated.
The statement or purpose of the website design gave a clear plan and guided the design and content creation.
📝 Building the Information architecture
Creating an Information Architecture helped me keep a checklist of sections and elements in my designs.
The designs inspirations from websites and other online gardening events gave an idea about the hierarchy of design elements and interactions that should go in a website hosting online events.
✏️ Ideate and Sketch
With all requirements noted from research and definition of the design need. I started sketching out the frames and elements keeping the hierarchy concept in mind
Planning and iterating more on paper automatically helps to have a clear vision at the very beginning.
🎶 Copywriting and setting the right tone
A system should speak the user’s language (site’s main audience) with words, phrases, and concepts familiar to them rather than system-oriented terms.
Keeping that in mind, I created the copy for the different sections familiar to the words and topic in the Gardening niche.
Building and Visualising the design layout before the final go gave a better understanding of the space where my designs have to perform.
🙌 About the event
So the event name I came up with for the gardening meetup is :
Garden love — Global Gardening virtual meetup event.
The GARDEN LOVE is an online event, growing your local community of gardening aficionados by organizing a meetup virtually in this pandemic time. The two days event will allow people to join an existing meetup or create their own and build a community of gardening enthusiasts in the process.
🤠 Style guide
With the research and inspirations from existing websites, I built a style guide to follow and maintain consistency throughout the design.
2. Header section
The first view of the website set the purpose correctly by feeding the viewers information about what this site is for.
Images and illustrations complementing the content engage well with the user.
3. Why should someone join this event?
This event is a global event and aims for the maximum participation of enthusiasts, learners, and experts worldwide. So to connect well with the target users the benefits of the website is framed with illustrations and content.
The schedule is designed for 2-day events so the plan is to keep it straight and simple with
- Name of the days.
- Date of the event.
- Talks and workshops to be held.
- Speakers and hosts who would be conducting talks and workshops.
- Time of the events.
Because the meetup programme is global, a feature to set the time zone has been introduced to the design. A fixed time will cause a lot of misunderstanding.
The users can set the time zone and check the event schedule.
5. Speaker’s vine
The speaker’s section includes the images and designation or identification of some of the famous personalities of this Gardening field.
Illustrations and CTA to see the whole speaker’s panel allow the viewers to know about more speakers and hosts for the event.
6. Take your pots (Tickets section)
The research inferred that the gardening event can be accessed by everyone and the gardening communities.
So there are 3 tickets (named as pots) types designed for the events registration.
- Pickers pot
- Explorers pot
- Community pot
7. Testimonial section
This section is necessary for every website as it adds to the credibility of the website. A review of the event tells the viewer whether it will be worthy to get the tickets. Quoting the people’s review and combining it with their image visually humanises the section more, increasing participation.
For this section to show more credibility and authenticity I included:
- Quoted comments
- Image of the person
- Name of the person
- Job or Designation
8. Miscellaneous sections
a. Sponsors section
Adding value to the sponsors and partners is always essential for the business strategy of any website. Incorporating a sponsor logo in a website adds credibility to the event and increase exposure.
Sponsors are promoted visually by keeping the logo centre-aligned and for uniformity, every logo is of the same dimensions.
b. Knowledge feeds.
The more engaged a visitor becomes with the website material, the more likely it is that he or she will convert from a viewer to a participant. This section was added so that users may learn more about the event and its services.
Giving plenty of content like blogs, vlogs and articles, keeps a user more informed and this helps to achieve the website’s purpose.
c. FAQ section
Virtual Gardening meetup events are not very common and certain questions will always arise regarding the event functions. Including a good FAQ section in a website automatically improves the customer service strategy.
Simple questions will be answered quickly and automatically without the intervention, thereby reducing the chances of error. Also offers a better experience to the users.
🌺Let’s see how the prototype works
💫 Learnings and experience.
1️⃣ Importance of setting the purpose.
This task taught me that it is essential to define the purpose of your visual design. The vision and goal for conveying the message are critical. Once the objective is defined, it is easier to establish and shape other variables such as :
- The copywriting
- The colour harmony
- UI elements and components
2️⃣ Need for starting empty.
In the beginning, I jumped into designing the header of the website with whatever prior idea I had about websites. Eventually, after some time I was lost with what components and interactions should go.
And the next day, I realised I needed to empty my mind of assumptions and focus on the process. Then I saw the significance of first gathering the dots and then linking them. My revisions improved as a result of a lot of inspiration and observations from other websites.
3️⃣ Following the process
The process acts as a checkpoint for the design work. It always benefits and ensures that the design incorporates all important elements and does not overlook anything.
4️⃣ Experiments with style
Color, font, and layout all contribute to the design’s overall harmony. The visual synchronisation of these three variables determines how successfully the website will engage the viewer and convey the website’s objective.
Shapes and stylization of alphabets convey the meaning. The organisation of all of these elements, as well as the copy, unifies the website design.
So folks thanks a lot for the read 🌻😁!! Suggestions and feedbacks are always welcome.
Thankful to Abhinav Chhikara for giving me this assignment providing valuable feedback and guidance.
Gardening Meetup Platform: Website Visual design case study. was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.