Active Life Centre is a conceptual website redesign focused on improving access to community wellness programs, event scheduling, and facility information. The project aims to create a user-centered digital platform that supports diverse audiences such as fitness members, seniors, families, instructors, and event organizers.
The design prioritizes clear information architecture, accessible navigation, and responsive interactions to ensure users can quickly discover programs, book activities, and stay connected with community events.
Community recreation websites often suffer from:
These issues reduce participation and make it difficult for users to find relevant programs or complete registrations.
User research confirmed that finding schedules and registering quickly on mobile devices was a major pain point.
The platform serves multiple audience groups:
Primary Users
Secondary Users
Tertiary Users
.png)
The user journey highlighted five main stages:
Users often experience frustration due to slow loading, generic filters, and lack of bulk registration options.
To simplify navigation, a structured sitemap was developed that organizes content into clear categories:
This hierarchy ensures users can quickly find activities, event schedules, and facility information.
The interface design focuses on four UX principles:
Program categories, filters, and highlights allow users to quickly explore available activities.
Large readable typography, strong color contrast, and responsive layouts support diverse user groups including seniors.
Filtering by age group, activity type, instructor, and time of day helps users locate relevant programs faster.
Visual content such as testimonials, event photos, and instructor profiles builds trust and encourages participation.
The visual language communicates energy, inclusivity, and community wellness.
Key design elements include:
These elements create a consistent and welcoming experience across the interface.
Low-fidelity wireframes were developed to establish the structure, layout, and information hierarchy of the Active Life Centre platform. At this stage, the focus was on organizing content, defining navigation flows, and ensuring key features such as program listings, schedules, and community highlights were easy for users to locate across desktop, tablet, and mobile interfaces.
.png)
.png)
The high-fidelity designs apply the visual design system to create a polished and accessible interface for the Active Life Centre platform. This stage introduces the final color palette, typography, UI components, and layout structure to ensure visual clarity and consistency across the website.
The Programs Highlights page is showcased as a key interface example because it demonstrates how users can explore community programs, discover activities, and quickly access relevant information. The layout emphasizes clear visual hierarchy, card-based content organization, and accessible navigation to support efficient browsing across desktop, tablet, and mobile devices
The interactive prototype demonstrates the core user flows and interaction patterns of the Active Life Centre platform. Selected screens from the prototype are showcased to highlight how users can navigate the interface, explore programs, and interact with key components such as program listings, event schedules, and community highlights.
These prototype screens illustrate how the design adapts across desktop, tablet, and mobile devices, providing a responsive and intuitive user experience while maintaining visual consistency and accessibility throughout the interface.
This is your chance to make a significant change in your life.
