Local Garden Club Website Redesign
Edmonds Floretum Garden Club
Project Overview
CHALLENGE
As the oldest garden club in Washington State, the Edmonds Garden Club has recently experienced significant growth in membership as more individuals in the region join in the joy of gardening. As a UX/UI designer, my task was to enhance the user experience of the club's website, catering to both current and prospective members of the club.
INSIGHT
The Edmonds Floretum Garden Club, with nearly 200 members and an average age group of 65 years old, will celebrate its 100th year of service to the city in August 2022. The club is primarily run by its Board Committee and hosts monthly meetings and in-person events adhering to Covid protocols. The pandemic has led to a boom in club memberships, and the club's website, updated by retired professionals from various fields, serves as a crucial communication tool. In preparation for their Centennial celebration, the club is revamping its online presence by creating a new '100th-year' logo, establishing a new Instagram page to reach younger generations, and redesigning their website.
SOLUTION
Create a new website for the club with these goals in mind -
-
Make the website easier to use for the Club members and potential members - an overall better user experience.
-
The website should be easy to maintain for the website manager.
-
Make the website visually attractive to draw more members as the club celebrates its 100th year of service to the City of Edmonds.
CLIENTS
Edmonds Floretum Garden Club
DURATION
3 months
TEAM
Self-directed; with insights from the club's board members
Research
GOALS
-
Understand the main pain points of the user - a potential member, a new member, and the club's website manager.
-
Figure out what features within the website can help make seemingly tedious processes for the club's website manager simple and less time-consuming.
METHODOLOGY
-
Analysis of current website to understand shortcomings
-
Evaluation of various current tasks and processes of the club and website manager.
-
In-depth user research with current club members, potential club members, and club board members.
Current State Evaluation
To understand the current experience and pain points of users, I analyzed the information available on the club's website.
website homepage
quick notes from the existing website
Too much information!
It feels like one long endless scroll!
Exhaustive information about the club's activities and history are recorded.
The club has a large database of quality photographs of their members, gardens, and club activities which can be used for marketing purposes.
For a potential member - not clear on steps to join the garden club.
Two navigation bars - top and side - is confusing
Pages with information duplicated - adds to confusion
Aesthetics of the website does not reflect the club's character
Understanding Users
There were 3 major types of users the website was catering to.
Understanding the pain points of these three groups was critical to ensure a sucessful website.
Potential Club Members
Existing Club Members
Club's Website Manager
Club members demographics
Collating the overall club member demographics was an easy way to get a quick overview.
Over 70 years old
70%
Between 50 - 69 years old
29%
Younger than 50 years
1%
Age groups of club members
User Interviews
I conducted primary research to gain direct insights from the users and to build real connections with them.
'I've been a member of the Floretum Garden Club for about ten years now. Our in-person monthly meetings used to be how I got to know about all the events happening in the coming month. But now, since everything has shifted online, I need to rely on the website for this information. It is so confusing and frustrating! The events are usually never updated. And there is a whole lot of other unrelated information on that tab as well! Usually, I just end up calling up someone to find out about the next event.'
- Club Member feedback
(on ease of finding information)
'I keep having to update the website. Every day. On some days I'll have to sit with it at least three times! This was supposed to be a fun activity, instead, it has become such a chore now. '
- Website manager feedback
(on maintaining the old website)
'It was so difficult to join the club! I almost didn't go through it just because of the confusing process!'
- Club Member feedback
(on the membership process)
'I can never find anything on that website!'
- Club Member feedback
(on ease of finding information)
Other things that my interviewees mentioned that seem to add havoc for the users -
-
large numbers of new memberships were hard to keep track of since there wasn't an effective system in place.
-
students and teachers who wished to apply for scholarships and/or grants would email the club directly with a query, afterwhich they would be requested to send relevant information. This caused unnecessary delays in communication.
Research Synthesis
KEY INSIGHTS
-
Users rely on information from their friends and fellow club members over data available through the club website.
-
Users often wait for their weekly newsletter to find information.
-
The website is frequently not updated.
-
Confusing membership process is a deter for new members.
-
Applicants applying for the club's scholarships and grants have reduced in number.
NEEDS
-
Users need to know that all information on the website is updated and can be trusted.
-
Users want to reduce the time spent on the website searching for information.
-
Users (website manager) want to reduce the time spent on managing the website.
-
New members should feel welcome, especially while joining the club.
-
To help applicants, applying for scholarships and grants should be easy and time efficient.
User Personas
After gathering data and understanding major user pain points, I created two hypothetical user personas representing common use cases. These personas highlight potential problem areas that can be analyzed to improve overall user experience with the website.
Ideation
DESIGN GOALS
After talking with their marketing and strategy team, we set two main goals:
-
Make the website easier to use for the Club members and potential members - an overall better user experience.
-
The website should be easy to maintain for the website manager.
Product roadmap
I brainstormed a list of product features/qualities to ensure I'd achieve the design goals by the end of the design process. These features were then sorted into two categories - Must-have (P1) and Nice-to-have (P2), based on how well they can help achieve the design goals.
This process will infuse our design goals into the product while aiding in prioritizing features during the design phase.
Photograph of sketchbook - brainstorming product features and qualities
P1 (Must-haves)
P2 (Nice-to-haves)
-
Declutter website
-
Unified visual identity
-
Become a member - membership automated form
-
A system for gifting memberships
-
A system to keep the upcoming events page ALWAYS updated
-
A member portal - to ensure exclusivity
-
visually attractive & easy to understand HISTORY page
-
Speaker at past events archive page
-
Easy to update and manage, BLOG page
Sitemap
After setting up the product goals and deciding what features to include, I built up the website's structure using a sitemap. A sitemap helped me to visualize the relationship between the content and examine the hierarchy.
As the Edmonds Floretum Garden Club is a small local club, with users primarily in the age group above 70, I tried to keep the sitemap simple and straightforward, making navigation within the site easier.
Task Flow
To decide what I am designing, identifying the main flow of users when completing a task helps me to direct my focus on designing specific pages. By creating task flows that center on key functions of the garden club's website, I was able to think through the necessary steps and examine the user experience in detail. Below is the flow for 1 task
I created three user flow diagrams to map out experiences for three common user tasks. Since our major user group is above 70 years of age, and not very tech-savvy, care was taken to make sure that each task could be fulfilled in less than 3 site pages or less than 5 steps (clicks). These diagrams visually aided in my planning of the redesign, allowing me to better understand what the interface needed to provide the user with a positive usage experience.
Task: Rita wants to gift a membership to her grand-daughter Emily
Legend:
User Flow
Building on the task flow, I mapped user flows whose scenarios correspond to the established tasks. The decision trees were added for me to think through what actions users would take based on their feelings about the website. Below is one example user flow.
Scenario
James wants to know more about Edmonds Floretum Garden club before he gifts a membership to his mother
Legend
DESIGN SOLUTIONS
To ensure that I’d achieve the goals by the end of the design process, I produced specific design solutions that correspond with each goal:
-
Simply the User Flow
-
Create & design an intuitive system to join the club - make the membership process straightforward.
-
Set up an easy system to update and edit the most viewed page of the website - Upcoming Events - with automated posts and deletion of events after the date.
Design
I used the product roadmap brainstorming notes to guide and prioritize my process of designing the website.
P1 (Must-haves)
-
Declutter website
-
Unified visual identity
-
Become a member - membership automated form
-
A system for gifting memberships
-
A system to keep the upcoming events page ALWAYS updated
-
A member portal - to ensure exclusivity
P2 (Nice-to-haves)
-
visually attractive & easy to understand HISTORY page
-
Speaker at past events archive page
-
Easy to update and manage, BLOG page
DESIGN CONSTRAINT
The garden club executive board preferred building the new website on the Wix hosting platform.
Visual Branding
The Club’s online presence needed to have consistency in terms of colors, fonts, and styles used. After experimenting with different colors and styles the following were chosen that would blend well with the 100th-year club logo while portraying the club's brand identity. Brainstorming sessions with the club's board members helped identify keywords that could further serve as guiding principles during the design of the website.
Different colors, fonts, styles, and photography guidelines were determined to make the website visually attractive.
-
Community-driven
-
Non-profit
-
Knowledgable
-
Expertise in gardening
-
Friendly & Fun
-
Oldest Garden Club in Washington State
Key words
Club logo designed for their 100th-year anniversary
Color theme
Font Styles
Crisp site content
Confusing and duplicated information had to be distilled and reorganized to declutter the website..
The website had multiple pages with repeating and/or irrelevant information which added to the confusing user experience. Further, within each page, there was a lack of structure and hierarchy of information. To solve this, each page was analyzed and redesigned with crisp, clear, and relevant content.
For example, the club’s 100-year-old history was collated from various presentations and tabular columns (from the website) into a visually vibrant timeline.
Snippets of the history timeline page
Straightforward Membership Process
A new system had to be created for joining the club. This needed to be an easy and intuitive process that could encourage visitors to become members or gift a membership. It also had to be convenient for the club committees to manage and contact the new members.
An online fillable form that would enable the user to either become a member or download a voucher for gift membership became an easier and more efficient solution.
The old website needed potential members to directly contact the club via email or post for any inquiries regarding memberships. This led to delays and frustration. The process also felt cumbersome, and we observed users dropping off at this point.
An online fillable form helped the membership process become more efficient and user-friendly. The online payment link is added to this form to make the whole process seamless.
Gifting Memberships
Gifting a Membership is also made user-friendly by an online form that can be filled. Submitting the completed form gives you access to download a voucher that can be emailed/printed. This can then be sent to the recipient whenever they see fit. The recipient can activate the membership by contacting the club. This ensures that the club will not reach out to the recipient directly in case the gift membership is to be gifted on a particular special day.
'Upcoming Events' page
Upcoming Events is the most viewed page of the website. This needed to be updated constantly with new events and removal of old events. All three user groups had concerns regarding this particular page.
User Group
Major Pain Point
Potential Club Members
Existing Club Members
Need to be able to find this page and all upcoming events easily.
Club's Website Manager
Need to be able to update events on the page easily. It would help to prepare event updates in bulk, in advance, such that the website could get automatically updated.
For the ease of those viewing the website
Upcoming Events information is found on both the homepage and its dedicated page (from the navigation menu)
Homepage - upcoming three events can be found on the landing (home) page of the website
Upcoming events page
For the ease of those managing the website
A feature of Wix was used wherein the data can be filled in a datasheet format into a 'Content manager' which will automatically update information on both the homepage and Upcoming events. Data from this content manager is linked to both places such that they get updated following the styles and formatting of the respective pages. Specific dates and times can be set to publish (add) an event or unpublish (remove) an event from the website.
This system allows the club member managing the website to fill in relevant data in advance, reducing the need for daily updating of the Upcoming Events page.
Content Manager for Upcoming Events
ADDITIONAL SYSTEM UPDATES TO OTHER PAGES
A similar system of 'Content Manager' was set up for the BLOG, IN THE NEWS, SPEAKERS AT PAST EVENTS pages, where frequent updates were foreseen. This system of updating data into a data sheet helps the club maintain the website with minimal effort. It also ensures that size and styles of color, font, and images remain consistent throughout even if multiple people were to be in charge of updating the website.
Exclusive Member Portal
Since the club is growing drastically it needed a new system to efficiently convey exclusive information to their members. Earlier, a PDF document was created every year with dates and other necessary information for the members and this document was password-protected on the website. But it was difficult for instant updates and soon the information in the document would become obsolete and outdated.
Addressing this issue, I was able to create a member portal, using Wix features, where instant changes could be made with minimal effort. A password-protected section of the website will contain information that is to be shared only with members of the club.
Snippet of inside the member portal
The following information was included in this section, which could be accessed only with a password (provided by the club during member initiation).
-
Floretum Photo Galleries
-
Member Directory
-
Newsletters
-
Monthly Meetings Information
-
Plant Sale & Garden boutique guidelines
-
Discount Codes
This system also ensured that any new information could easily be added to this portal.
Usability Study
Usability tests were conducted to refine the website before launch.
Usability Study Parameters
-
6 participants – of the typical user age group; two of which used to help in managing the website.
-
Study Type - Unmoderated usability study
-
Location - remote
Usability Study Findings
#1
Gift a membership form was simplified based on user feedback –
Payment options were integrated into the form
#2
An online form was created to apply for a grant for school gardens. This would immediately reach the club, which then could be processed.
Previously, this form needed to be downloaded, manually filled out, and mailed to the club. This caused delays and unnecessary confusion.
Conclusion
Reflection
Creating this website was a really fun project for me to understand my skills as a UX designer. It is my first project of this scale where I had to create an exclusive member-only portal. To create something so different from what the users were already used to was challenging while satisfying. I also got to explore the various features Wix offers.
An efficient site map can help in navigation and making the website intuitive for the users. Making sure that the site map could easily evolve with the club ensured that maintenance of the website would be easy even when it required change.
Since the club is a non-profit organization with volunteers running the board, it was important for me to ensure the style and organization of the website remains intact even through the various changes the website would see. I prepared a 'maintenance doc' which can act like a guide for making any changes to the website.
Snippet of the maintence doc
Hopefully, this doc will be helpful for the club in maintaining their website for the years to come.
Evaluation
A year after I handed this website over to the club, I'm happy to notice that the website has already grown, while maintaining the original look & feel. This is a success in terms of making the website robust enough for changes that will occur in the future and making the maintenance process fairly easy.
I did notice that they have taken off the membership joining form. I hope to understand what went wrong there over some coffee and biscuits the next time I see any board member.
The Wix stats for the website also look good -
-
The bounce rate decreased by 35%, indicating users trusted the content and stayed on the site longer.
-
Drop-off Rates on Key Pages reduced by 20%, showing users were successfully navigating to critical information without abandoning their search.
-
Use of Automated Tools/CMS Efficiency led to a 40% reduction in admin time required for content updates and maintenance, significantly improving overall site management.
-
Membership Growth Rate increased by 15%, reflecting a more engaging and welcoming experience for new members.
These metrics underscore the effectiveness of the design improvements in making navigation intuitive and content easily accessible, enhancing both user experience and administrative efficiency.