Coquitlam River Community Garden Website Redesign

Self-initiated volunteer project to redesign the website of a local NFP community garden, making it more appealing to existing and prospective gardeners.

Client: Coquitlam River Community Garden (CRCG)

Space: Sustainable Communities, Environment

Timeframe: 5 months

My Role: Web Design, UX Research, UX Design, UI Design, User Testing, Design Leadership

Team: 3 team members - designer (myself), garden president, and webmaster.

Context: The Coquitlam River Community Garden, formerly known as the Colony Farm Community Garden, is a not-for-profit organization dedicated to promoting organic gardening and fostering a supportive community. As a gardener at the time, I took on the website redesign, which had been planned for 3 years.

Coquitlam River Community Garden Website Redesign

Self-initiated volunteer project to redesign the website of a local NFP community garden, making it more appealing to existing and prospective gardeners.

Client: Coquitlam River Community Garden (CRCG)

Space: Sustainable Communities, Environment

Timeframe: 5 months

My Role: Web Design, UX Research, UX Design, UI Design, User Testing, Design Leadership

Team: 3 team members - designer (myself), garden president, and webmaster.

Context: The Coquitlam River Community Garden, formerly known as the Colony Farm Community Garden, is a not-for-profit organization dedicated to promoting organic gardening and fostering a supportive community. As a gardener at the time, I took on the website redesign, which had been planned for 3 years.

Coquitlam River Community Garden Website Redesign

Self-initiated volunteer project to redesign the website of a local NFP community garden, making it more appealing to existing and prospective gardeners.

Client: Coquitlam River Community Garden (CRCG)

Space: Sustainable Communities, Environment

Timeframe: 5 months

My Role: Web Design, UX Research, UX Design, UI Design, User Testing, Design Leadership

Team: 3 team members - designer (myself), garden president, and webmaster.

Context: The Coquitlam River Community Garden, formerly known as the Colony Farm Community Garden, is a not-for-profit organization dedicated to promoting organic gardening and fostering a supportive community. As a gardener at the time, I took on the website redesign, which had been planned for 3 years.

Coquitlam River Community Garden Website Redesign

Self-initiated volunteer project to redesign the website of a local NFP community garden, making it more appealing to existing and prospective gardeners.

Client: Coquitlam River Community Garden (CRCG)

Space: Sustainable Communities, Environment

Timeframe: 5 months

My Role: Web Design, UX Research, UX Design, UI Design, User Testing, Design Leadership

Team: 3 team members - designer (myself), garden president, and webmaster.

Context: The Coquitlam River Community Garden, formerly known as the Colony Farm Community Garden, is a not-for-profit organization dedicated to promoting organic gardening and fostering a supportive community. As a gardener at the time, I took on the website redesign, which had been planned for 3 years.

Clarified Site Hierarchy, Intuitive Navigation, and Modernized UI

Problem: Outdated website lacked clear structure, incompatible with mobile devices, and visually unappealing, sidelining the website as a resource hub for gardeners.

Outcome: A site-wide visual refresh to engage new and seasoned gardeners, supplementing the sense of community with an established online presence.

Clarified Site Hierarchy, Intuitive Navigation, and Modernized UI

Problem: Outdated website lacked clear structure, incompatible with mobile devices, and visually unappealing, sidelining the website as a resource hub for gardeners.

Outcome: A site-wide visual refresh to engage new and seasoned gardeners, supplementing the sense of community with an established online presence.

Clarified Site Hierarchy, Intuitive Navigation, and Modernized UI

Problem: Outdated website lacked clear structure, incompatible with mobile devices, and visually unappealing, sidelining the website as a resource hub for gardeners.

Outcome: A site-wide visual refresh to engage new and seasoned gardeners, supplementing the sense of community with an established online presence.

Clarified Site Hierarchy, Intuitive Navigation, and Modernized UI

Problem: Outdated website lacked clear structure, incompatible with mobile devices, and visually unappealing, sidelining the website as a resource hub for gardeners.

Outcome: A site-wide visual refresh to engage new and seasoned gardeners, supplementing the sense of community with an established online presence.

User Assessment and Competitive Analysis Uncover Desired Changes

Common recommendations from findings include adding a search bar, featuring demo plots prominently, and improving access to contact info and event registration. Merging document categories will also clarify content categorization.

View full usability assessment research script here.

💡How might we improve the accessibility and visual appeal of gardening resources while ensuring a user-friendly experience for individuals with varying levels of digital proficiency?

💡How might we improve the accessibility and visual appeal of gardening resources while ensuring a user-friendly experience for individuals with varying levels of digital proficiency?

💡How might we improve the accessibility and visual appeal of gardening resources while ensuring a user-friendly experience for individuals with varying levels of digital proficiency?

💡How might we improve the accessibility and visual appeal of gardening resources while ensuring a user-friendly experience for individuals with varying levels of digital proficiency?

Optimized Information Architecture for Document Differentiation and Improved Content Organization

Taking recommendations from research, the documents and resources were all placed on one page and no longer distinguished between "member documents" and "non-member" documents. An events calendar and message board were also planned for the index page.

Optimized Information Architecture for Document Differentiation and Improved Content Organization

Taking recommendations from research, the documents and resources were all placed on one page and no longer distinguished between "member documents" and "non-member" documents. An events calendar and message board were also planned for the index page.

Optimized Information Architecture for Document Differentiation and Improved Content Organization

Taking recommendations from research, the documents and resources were all placed on one page and no longer distinguished between "member documents" and "non-member" documents. An events calendar and message board were also planned for the index page.

Optimized Information Architecture for Document Differentiation and Improved Content Organization

Taking recommendations from research, the documents and resources were all placed on one page and no longer distinguished between "member documents" and "non-member" documents. An events calendar and message board were also planned for the index page.

Refreshed Visual Design to Improve Legibility and User Engagement

The brand colours were refreshed with accessible shade variations, and the font was changed to Cabin for improved accessibility and a more modern aesthetic. Navigation was reworked, with tile components added to the index page above the fold for easy linking to key pages. A search bar was added to the navbar to help users find specific items quickly.

Mobile-First Component Creation

Hi-Fidelity Mockups Accommodate Mobile and Desktop Sizing

View Figma Interactive Mockups for Mobile and Desktop

View Figma Interactive Mockups for Mobile and Desktop.

Calendar UI in desktop mockups is based on Calendar - Auto Layout.

View Figma Interactive Mockups for Mobile and Desktop.

View this project's full case study.

Takeaways

  • Accessibility Focus: The design prioritized accessibility for a senior-aged audience, ensuring WCAG compliance and user-friendly features. Key adjustments were made to improve visual clarity and usability.

  • Collaborative Leadership: I guided the team by sharing expertise and organizing tasks, such as user research and design principle education. The experience reinforced the value of balancing expert input with team collaboration.

  • Community Engagement: Working on the project allowed me to connect with fellow gardeners, strengthening their positive feelings toward the website redesign. This sense of community was a key motivator throughout the process.

Let’s chat over coffee and tea, because why not both?

Let’s chat over coffee and tea, because why not both?

Let’s chat over coffee and tea, because why not both?

Let’s chat over coffee and tea, because why not both?

© 2025 Alice Zhang. This portfolio was made with the unyielding support of caffiene 🍵☕
© 2025 Alice Zhang. This portfolio was made with the unyielding support of caffiene 🍵☕
© 2025 Alice Zhang. This portfolio was made with the unyielding support of caffiene 🍵☕
© 2025 Alice Zhang. This portfolio was made with the unyielding support of caffiene 🍵☕