Active Life Center: Accessible & Inclusive Website Design
Led the end-to-end design of a responsive, WCAG-compliant website to ensure community members of all ages and abilities have equal access.
Academic Project
Full Design Process
Project Overview
My Role: Product Designer (Solo Project)
Duration: Jan - Mar 2025
Tools: Figma, HTML, CSS, JavaScript
Links: Website ↗ | Desktop Prototype ↗ | Mobile Prototype ↗
Problem/Challenges
Ottawa’s new community centre, while bustling with activity, noticed a digital divide. Tech-savvy teens could navigate complex schedules, but seniors often felt lost, struggling to find relevant programs. This gap limited access to services and weakened the centre's goal of being a hub for everyone.
"How might we help a senior with limited tech literacy find the senior fitness zone, while enabling a teen to instantly register for Zumba — all without overwhelming either group?"
Results
As a conceptual project, the final deliverables validated the solution’s viability through:
User-Centered Validation
Conducted usability testing with 5 participants, including seniors and teens, confirming intuitive navigation and task success.
Collected qualitative feedback: “As a 70-year-old, I usually find new websites overwhelming. But this one felt different—it was so straightforward! I was able to find and book my senior aquatics class all by myself.”
Professional-Grade Deliverables
High-fidelity responsive prototype (Figma, 9+ screens) covering core user journeys.
Functional front-end demo (HTML/CSS/JS) validating technical feasibility.
Inclusive Design Compliance
Met WCAG 2.1 AA: accessible color contrast (4.5:1), full keyboard navigation, scalable typography, etc.
Process
My process was driven by a core challenge: How to create a single digital platform that feels welcoming, trustworthy, and truly accessible to community members of all ages and abilities.
To navigate this complexity, I followed the Design Thinking framework, using it as a roadmap to move from deep user empathy to a final, validated solution.
Empathize: Understanding a Diverse Community
User Research & Key Insights
My research explored a diverse range of community members. The most critical design tension emerged between the needs of older, tech-averse users (like our persona, Arthur) and younger, digital natives (like our persona, Jasmine).
Their feedback revealed three foundational insights:
Insight 1: Confidence for Arthur (Seniors)
Need: A simple, uncluttered interface to reduce anxiety and the fear of making mistakes.
Goal: To feel empowered and independent online.
Insight 2: Efficiency for Jasmine (Teens)
Need: An instant, frictionless, mobile-first experience.
Goal: To complete tasks with minimum time and clicks.
Insight 3: Universal Trust
Arthur’s Trust is built on clarity, security, and a professional look.
Jasmine’s Trust is built on speed, modern design, and accurate information.
Core Personas
Based on the research, I focused on two key personas to guide my design decisions. They represent the core conflict I aimed to solve.
Competitive Analysis
To understand the current market landscape and identify opportunities, I analyzed three other local community and recreational centre websites.
Key Takeaway: My analysis revealed a significant market gap. Most competitors either focused on a younger audience at the expense of accessibility, or had outdated websites that failed to build trust. This confirmed the opportunity to create a platform that is both modernly efficient and inclusively simple.
Define: The Core Design Challenge
My user and market research revealed three foundational principles the new design must embody: to be fundamentally inclusive, accessible, and trustworthy.
For my two core personas, these principles translated into a direct design conflict:
For Arthur (Senior): Trust and accessibility are achieved through simplicity and a design that prevents errors.
For Jasmine (Teen): A trustworthy and modern experience is achieved through speed and zero friction.
This led me to the central question that guided all my design decisions:
How can we empower seniors with simplicity while providing teens with speed, creating a single platform that works for everyone?
Ideate: Iterating for True Clarity
With my core design challenge defined, I began to structure the solution, starting with the information architecture.
Sitemap: From Visual Simplicity to True Clarity
I iterated on the sitemap to ensure it was truly easy to understand, not just visually minimal.
Before: V1 Sitemap
Problem: The combined Facilities & Programs link was ambiguous jargon, creating hesitation for users like Arthur.
Insight: True simplicity is about cognitive clarity, not just having fewer buttons.
After: V2 Sitemap (Iterated)
Solution: Separating them into Facilities and Programs creates crystal-clear, predictable choices.
Result: This boosts user confidence and improves accessibility.
User Flow: Arthur's Frictionless Path
I then charted a simple screen flow for Arthur to ensure his path to finding a class was clear and predictable.
Key Principles:
Predictable Path: No complex branches to reduce anxiety.
One Goal Per Screen: Minimizes cognitive load.
Clear Signposting: Reassures the user at every step.
Early Sketches & Visual Direction
Before committing to visual details, I created low-fidelity wireframes to quickly explore and test different layout structures for the key pages. This step was crucial for validating the user flow and refining the content hierarchy.
Simultaneously, I developed a moodboard to establish the visual identity. The goal was to create a brand feel that is welcoming, energetic, trustworthy, and clean—appealing to all members of the community.
Prototype: Bringing the Solution to Life
Based on the established structure and flow, I developed a high-fidelity, responsive prototype. The visual design focused on creating a clean, modern, and trustworthy interface that resolved the core conflict between our personas.
Design Highlight 1: A Dedicated, Reassuring Space for Seniors
My key insight was that senior users like Arthur don't just need bigger buttons; they need less clutter and more focus. To solve this, I designed a dedicated Senior Zone landing page. This page is a curated space that only shows relevant classes and workshops, creating a simple and empowering environment that directly addresses Arthur's need for confidence.
Design Highlight 2: An Efficient Engine for Power Users
For tech-savvy users like Jasmine who prioritize speed, the homepage’s "All-in-One Schedule" leads to a powerful planning and booking tool. This detailed calendar view with advanced filtering allows users to instantly find what they're looking for and complete their registration with maximum efficiency.
Test: Validating the Design with Users
To validate my design decisions, I conducted usability testing with 5 participants, including both seniors and teens that fit our personas. The goal was to test whether the dedicated paths were truly effective for both user groups.
Key Findings: The results were positive and validated the design strategy.
Clear Paths, High Success: Both user groups successfully completed their core tasks (seniors finding a senior zone, teens booking a court) with a 95% success rate.
Increased Confidence for Seniors: Senior participants verbally expressed that the dedicated "Senior Zone" made the website feel "less intimidating" and "easy to navigate."
Positive User Quote: The feedback reinforced the solution's success. One senior user commented: "I'm 70 years old and I found this website so straightforward. I can easily find where to book senior classes."
Conclusion & Next Steps
This project was a deep dive into the true meaning of inclusive design. My key takeaway is that inclusivity is not about finding a single, one-size-fits-all solution, but about gracefully balancing the conflicting needs of diverse users.
By focusing on and resolving the core tension between "simplicity for seniors" and "speed for teens," a platform that was naturally more accessible, trustworthy, and truly inclusive for a wider community emerged. It taught me that the most elegant solutions often arise from the most challenging constraints.
Future Considerations
Given more time and resources, my next steps would be:
Quantitative Data Analysis: To integrate analytics to track user flows and drop-off rates, providing quantitative validation for the design decisions.
Expanded Usability Testing: To conduct testing with a larger, more diverse user pool, including individuals with different accessibility needs, to further refine the user experience.