Categories
Case Studies Forms

Gardening Meetup Platform: Website Visual design case study.

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.

https://medium.com/media/db26329aac7856d865adca0d15bd758e/href

šŸ¤” 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.

10 Benefits of Gardening, Plus Helpful Tips & Recommendations

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.

The Importance and Benefits of Teaching Gardening to Children Toddlers to Preschoolers

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

1. Layout

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.

šŸ“‡ Wireframes

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.

About:

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.

šŸ’» Designs

1. Logo

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.

4. Schedule

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.

  1. Pickers pot
  2. Explorers pot
  3. 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

https://medium.com/media/636792189a4a06814ad7bdd88e5179e4/href

šŸ’« 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
  • Typography
  • 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.

Let's connect and discuss more design, productivity and arts on Twitter, LinkedIn or Instagram.

Thankful to Abhinav Chhikara for giving me this assignment providing valuable feedback and guidance.

Special thanks to Rama Krushna Behera, Sunal Sood, Vishal S Krishna and Yugandhar Bhamare for valuable feedbacks andĀ insight.


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.