This post documents the development of my high-fidelity prototype for the Participatory Collective website, with a focus on clear navigation, clean structure, and accessible, user centred design. The aim of the prototype is to create an intuitive and welcoming digital space that reflects the Collective’s values while guiding users smoothly through the site.
The navigation bar plays a key role in supporting clarity and ease of use. It features clearly labelled page titles (Our Story, Projects, Our People, Blog, and Events) displayed in black text against a white background to ensure strong contrast and readability. Alongside these links is a prominent call to action button, Get Involved, which encourages user participation. The Participatory Collective logo is also positioned within the navigation, acting as a consistent brand identifier and functioning as a home button, allowing users to easily return to the homepage at any point. Additionally, an accessibility button is present on every page, ensuring users can access accessibility options whenever they need them.
The overall user flow is simple and easy to understand, aligning with the friendly and collaborative tone of the website. The homepage immediately sets this tone through the hero section and the tagline “We learn, grow, and make change together,” with “together” visually highlighted to reinforce the Collective’s emphasis on collaboration. Below this, a dedicated section introduces the four key stakeholders, each represented by a distinct colour. These colours follow the branding guidelines established in Assignment 1, creating consistency and a strong visual identity across the site. Call to action buttons associated with each stakeholder use darker shades of their respective colours to improve contrast and accessibility.
Imagery is used throughout the prototype to add warmth and authenticity. Images featuring people help establish a sense of trust and inclusivity, making users feel more comfortable and engaged. Storytelling is a central design feature, particularly on the Our Story page, where users follow a colourful, game board style illustration with interactive elements. This approach allows users to learn about the Participatory Collective’s mission, values, and approach in an engaging and memorable way. The journey concludes with the call to action “Be part of the story,” which guides users to the Events page.
The Get Involved call to action in the navigation directs users to the Participatory Collective mailing list, allowing them to stay connected even when they are not actively visiting the website. The footer further supports engagement by displaying social media icons, clearly showing where the Collective is active online.
In terms of functionality, the website also includes a carousel card section designed to showcase the different projects associated with the Participatory Collective. This interactive element allows users to browse through key project areas in a dynamic and engaging way, reinforcing the Collective’s wide range of community focused initiatives. At this stage, the carousel functions correctly in terms of interaction and navigation, however, due to time and technical difficulties, only the first state currently displays full project information for the community groups. The remaining states are visually present but do not display the content. This is an area for future development, where expanding the carousel to fully populate each state with detailed project information would further enhance usability and clarity for users exploring the Collective’s work.
Overall, the branding, colour palette, layout, and navigation work cohesively to support the tone of the website and create an accessible, enjoyable experience for users who want to learn more about and actively engage with the Participatory Collective.
References
-Images used from Shuttershock and iStock-
Shuttershock (2025) Community Celebration royalty-free images Available online: https://www.shutterstock.com/search/community-celebration [Accessed 3/1/26].
iStock (2025) 2,069,256 Premium, High-Res Photos and Video Available online: https://www.istockphoto.com/search/2/image-film?phrase=community%20 [Accessed 3/1/26].
-Social Media and Icons used on Our Story page from Icons8-
Icons8 (2025) Social media icons Available online: https://icons8.com/icons/set/social-media [Accessed 3/1/26].
Figma Link