Client Background
Bayside community centres consist of two locations: Highett Neighbourhood Community House and Hampton Community Centre.
These centres organize a variety of community classes, workshops, events, and activities for local residents to participate in. They also offer services such as venue rentals and equipment rentals. They serve as hubs for connection, a sense of belonging, active participation, and inclusivity within the community.
Client Pain Points
They originally had a slow WordPress website with complex page information, making it difficult for both users and administrators to navigate. Event categorization was chaotic, with some courses appearing in multiple categories, expired events still visible on the website, and frequent overbooking issues that required manual refunds via phone calls.
Since most users are elderly individuals, the website's complexity, slow performance, and unclear instructions severely hindered residents from making online reservations and finding information. Additionally, staff had to invest significant unnecessary time in communication with users and adjusting unreasonable arrangements caused by the website.
After several meetings with the community centre staff, we have summarised the following key issues:
Activity Update and Management
- Website usability/accessibility
- Activity/event categorisation
- Overbooking problems
- Reducing labour/time costs
- Increasing channels for community activity donations
Membership
- Certain activities are exclusive to members
- Differential pricing for members and non-members in some activities
- Encouraging online membership purchases to reduce on-site registrations and membership purchases on the day of the event
Helpful Information Display
- Information categorization & hierarchy redesign
Data Analytics and Visualization
- Membership counts for 2 different centres
- Sales and participation levels for various courses
- Donation statistics, including donation project tracking
UX Optimization for Elderly Users
- Font size and colour choices
- Reduce info and instructions on a single-screen
- Feedback prompts after completing actions
- Repeated emphasis on essential information (e.g., school terms, etc.)
Timeline
Our project began in September and we aim to have it launched before Christmas. Despite having limited hours due to community workers' part-time schedules and the staff who work with us only working 10 hours a week, we meet every two weeks to review the project's progress and discuss any challenges we have encountered.
Design Process
Platform choosing
The website primarily showcases and sells community courses and activities. To ensure a smooth shopping experience for users, we have chosen Shopify as their operating platform. Shopify offers robust checkout, refund, and sales statistics systems. Furthermore, its compatibility with iPads allows our staff to provide on-site services with ease. The use of the Shopify app also makes email subscription and data visualisation convenient.
Information collecting and organising
Page structure confirmation
Operation flow to ensure that some courses/event can only be purchased by community members👇🏻👇🏻👇🏻
Website building
After finalizing all the "product templates" and "page templates" with the client, I utilized Shopify to construct their website. During the branding process, I follow to the style guide provided by centres and collaborated with them to choose appropriate icons. (for example they requested to use the most direct and simplest icon to represent each category of the course/events). In cases where some custom pages needed coding intervention, I handed over the confirmed wireframe to the front-end engineer and conducted testing of the functionalities.
Accessibility checking
We followed the Web Content Accessibility Guidelines and used the accessibility checker that Google provides to test every page before the handout to ensure the score was not lower than 90.
We prioritize clear messages by avoiding confusing animations and exaggerated visuals. We also create a Senior UI/UX Design Principle Check for future use.
Further assistance
We understand that the community often requires new types of activities and information displayed on the website. For website administrators, it is a request to have the ability to create custom pages. However, it is also important to maintain both visual/structural consistency with existing pages. Therefore, we provide a guideline & principles for creating new pages to ensure that employees have a clear understanding of the page structures that can be used.
Results after the website upgrade
Based on feedback from community staff, after the launch of the new website:
- The centres experienced a notable increase in turnover.
- There was a significant decrease in incorrect bookings and overbookings.
- The amount of donations has substantially increased.
- Several residents have reported that the new website is much smoother to navigate than the previous one, resulting in a considerable reduction in the number of complaints and inquiries related to website usage.
Thoughts After Project
- Due to factors such as usability, project timelines, budget constraints, and user operating habits, there are times when it is necessary to appropriately simplify visual effects.
- Due to the limitations of the platform used (Shopify), there are still issues with the information display not being sufficiently simple and clear (activity information contains complex text + limited budget prohibits excessive front-end code adjustments).
- Due to different activity providers, there are at least four different ways to book an activity. It would be preferable if the methods could be unified as much as possible, allowing all the booking operations to be performed on a single unified interface.
If you're interested, here's the link of the website 👇🏻
https://baysidecommunitycentres.org.au/