High Park Nature Centre

A redesigned website that improves accessibility, simplifies navigation, and helps visitors easily discover programs, camps, events, and seasonal highlights like the cherry blossoms.

UI & UX

Visual Design

Client

Timeline

November 2022 - May 2023

My Role

UX/UI Designer

Tools

Figma, Wordpress

Our Impact

40%

Reduction in navigation drop-off

WCAG 2.1 AA

Accessibility standard achieved

3×

Faster seasonal content updates

The Problem

The existing site was getting in the way

High Park Nature Centre serves a wide and varied community. This includes families enrolling in nature programs, visitors planning a trip around cherry blossom season, and locals looking for upcoming events. In the existing website, key information was buried, and navigation was inconsistent. For an organization whose mission is community connection and environmental education, a frustrating digital experience was a direct barrier to that mission.

Key pages required multiple clicks to reach and were inconsistently labelled across the site.

Navigation structure reflected internal organizational logic rather than how visitors actually thought about and searched for content.

The visual design lacked cohesion — fonts, colours, and component styles varied between pages, undermining the Centre's credibility and sense of identity.

Research & discovery

Understanding visitors before redesigning their experience

Before sketching a single screen, I needed to understand how visitors actually used the site. I conducted a heuristic evaluation of the existing website using Nielsen's 10 usability principles, identifying 23 distinct pain points across navigation, content hierarchy, and mobile performance. I supplemented this with a competitive analysis of five peer nature and conservation organizations to understand design patterns that worked well in this space.

Users weren't failing to find information because they weren't looking — they were failing because the site gave them no reliable path to follow.

The evaluation revealed that the problems weren't isolated. Navigation labels didn't reflect user language, content was duplicated across sections without clear ownership, and mobile had been treated as an afterthought. These findings shaped three core design priorities: simplify wayfinding, surface the most-visited content faster, and build the entire experience mobile-first.

Design process

Working from the inside out

My team and I established a clear framework before touching any visual design: we would work from the inside out. Content architecture, navigation, and user flows had to be resolved before colour, type, or imagery. This discipline prevented cosmetic fixes from masking structural problems.

1

Heuristic evaluation & competitive analysis

Conducted a systematic audit of the existing site against Nielsen's 10 usability principles, cataloguing 23 pain points across navigation, hierarchy, and mobile performance. Reviewed five comparable nature and conservation organization websites to identify effective patterns and opportunities for differentiation.

2

Information architecture & card sorting

Ran card-sorting sessions to understand how users naturally grouped and labelled site content. Results revealed significant mismatches between the existing navigation and user mental models. Reduced top-level navigation from seven items to four, with key pages accessible within two clicks from any entry point.

3

Wireframing & prototyping

Produced low-fidelity wireframes for all key page templates, prioritizing layout and content hierarchy before visual expression. Tested early prototypes to validate the new navigation structure before committing to high-fidelity design.

4

Visual design, design system & usability testing

Developed a visual identity rooted in the Centre's existing branding, extended with natural textures and earthy tones drawn from the park's savannah grass habitat. Built a Figma component library covering all reusable UI patterns. Ran two rounds of usability testing, applying iterative fixes between rounds until all critical issues were resolved.

Design process

Bringing the park's character onto the screen

The visual design drew from High Park Nature Centre's existing branding while introducing natural elements inspired by the park's savannah grass habitat. The goal was a design that felt organic and inviting without sacrificing clarity.

Colour system

A palette of forest greens, warm neutrals, and earthy accents drawn from the park's natural environment. Colour was used functionally. All colours were tested for WCAG 2.1 AA compliance.

Typography

A pairing of Red Hat Display and Red Hat Text has been used throughout the website. The type scale was designed to perform on mobile first, with generous line heights and careful sizing for legibility across age groups.

Component library

A full Figma component library covering navigation, program cards, event listings, the cherry blossom tracker module, image components, and accessibility-compliant form elements. This gives the Centre a system they can maintain and grow independently.

Accessibility

All interactive elements meet WCAG 2.1 AA contrast ratios. The redesign introduced keyboard navigability and screen-reader compatibility across the site. Touch targets were sized and spaced for comfortable mobile use.

Outcomes

A site that works as hard as the park does

The redesign delivered measurable improvements across usability, accessibility, and content management, and gave the Centre a digital presence that reflects the quality and warmth of its in-person programming.

Inclusive by design

Full WCAG 2.1 AA compliance achieved for the first time in the Centre's history, ensuring every visitor can access programs, events, and seasonal content equally.

Effortless wayfinding

Restructured information architecture brings every key page within two clicks. Programs, events, and the cherry blossom tracker are now consistently surfaced and clearly labelled throughout the site.

A mobile-first experience

Responsive layouts and touch-optimised components built for the majority of visitors, many of whom access the site on mobile.

A new system

A Figma component library and CMS-driven architecture empowers the Centre to update content, launch new programs, and manage seasonal pages independently.

Reflection

What this project taught me about designing for community

The best decisions came from listening carefully to what visitors actually needed, rather than what seemed visually interesting.

Structural problems can't be solved with visual ones

Early in the project, it was tempting to focus on visual design, but the audit made clear that the navigation was disorganized. Resolving that first made every subsequent visual decision more purposeful.

Designing for a wide age range changes your defaults

With users spanning ages 18–72 in usability testing, decisions I might have taken for granted became explicit and deliberate. Accessibility stopped feeling like a checklist and started feeling like good design.

A design system is a gift to your client

Delivering a Figma component library meant the Centre could update their own site confidently after handoff. Seeing them manage cherry blossom season content independently, without any design support, was one of the most satisfying outcomes of the project.