Working mobile mid-fidelity prototype:
Brief comments on mobile design as I designed this prior to the desktop version:
These screens display a clear entry point and structure, as I’ve clearly shown areas for navigation. This is essential for a mid-fidelity prototype as users can already see where they might go next. Having a predictable navigation system is important for mobile use. I believe I’ve created intuitive pathways, creating a logical flow. The main navigation items are visible, and the user’s journey branches out sensibly. I believe user flow is an important part, how someone moves from the homepage to other parts like ‘Get Involved’ or ‘People’. Moreover, the design is not overly polished which shows how i’m focusing on structure, layout, and interaction, not just visuals, which is what a mid-fidelity prototype should be. I have used placeholder elements for images or content, which keeps things flexible to adapt and change in high fidelity. Given the nature of the project, for example community, collectives, involvement etc, having a mobile prototype I believe is essential as people are likely to access this on their phone. The prototype encourages engagement, which aligns with my CTA strategy such as getting people involved and sharing their story. This shows my approach of user-centred considerations.
Working desktop mid-fidelity prototype:
Describing both my desktop & mobile prototype:
Prototype Overview
My mid-fidelity prototype, crafted in Figma, brings to life both the desktop and mobile versions of my concept for a community-focused collective website. This prototype doesn’t just represent how the site could look, it simulates how a real user might navigate through it, providing an early, interactive glimpse at structure, interaction, and content flow. The main aim is to make a platform that is inclusive and proactive, as a place where users can learn about communities, share their own stories, and get involved in meaningful ways. This helps me address how screens connect, how users cross different sections, and where the most compelling CTAs should be.
Desktop Structure & User Flow
On the desktop version, the homepage is cleanly structured around a grid layout that prioritises clarity and easy navigation. At the top sits the ‘hero section’, a welcoming brief title that introduces the collective’s purpose and sets the tone. Below this, I introduce content blocks to show where the information will go. The navigation bar remains at the top, enabling users to jump between key pages such as ‘Our Story’, ‘Projects’, ‘People’, and ‘Get Involved’ no matter where they are on the site. This persistent top navigation builds consistency and makes navigation feel reliable and user-friendly.
When a user selects a card, they go through to a detailed page, retaining the top navigation so they can move elsewhere easily. This logical flow keeps things intuitive. On the ‘Get Involved’ page, I’ve placed CTAs for joining the mailing list, sharing a story, and attending events in clearly separated sections, giving users distinct but complementary ways to engage. To simulate interactions, I used Figma’s prototyping features to define hotspots. For example, clicking ‘Share now’ doesn’t yet open a working form, which is mid-fidelity, but it links to a frame that represents the future form, this helps stakeholders envision how this will work without building every field now.
Mobile Design & Navigation Logic
In the mobile version, the layout adapts for smaller screens, everything stacks more vertically. On mobile, the hero section is more compact but still puts the call to action front and centre, because on handheld devices, immediate visibility is even more crucial. Under the hero, the mobile homepage rolls into a streamlined list of ‘Our Story’, ‘Projects’, ‘People’, and ‘Get Involved’, making it easy for users to scroll through the menu and find core pages.
Tap targets are larger for the mobile to accommodate for touch interactions. When a user taps a card, they move to a detailed page. In the ‘Get Involved’ mobile screen, the three core CTAs (mailing list, share story, collaborate with us) are laid out in a vertical stack, each inside its own button. This ensures clarity and a touch-friendly experience.
Call to Action Strategy
A core part of the prototype, on both desktop and mobile, is the call to action (CTA) element, designed to gently but clearly encourage user engagement. The CTAs are given prominence in ‘Get Involved’ but separated enough to feel like meaningful, distinct options. On mobile, I optimise the CTAs layout for touch. Each button is large enough for a thumb tap and spaced to avoid accidental taps. I also considered that mobile users might want to act quickly or on-the-go, the simplified flow helps this and makes engagement feel approachable.
The reasoning behind these CTAs is grounded in user motivation, some users will want to watch and listen, others will want to participate and share, etc. By offering a range of different engagement options, I cater to different personas and encourage sustained and frequent interaction. Additionally, by carefully placing CTAs in both desktop and mobile flows, I make the user journey smoother and ensure the next steps feel simple.
Design
I believe my designs use a calm, pastel colour palette adhering to my brand guidelines that creates a friendly and welcoming feel. The light blues, soft pinks, and greys work well together and give the project a cohesive visual identity. The graphics add personality as I was told from the Participatory Collective that they enjoy illustrations, so I thought this element would adhere to that. I believe these decorative shapes add a lot of detail. In addition, I included my logo without ‘The Participatory Collective’ text as I felt it made for too large of a logo once placed once I began designing. Additionally, I decided to include only serif fonts throughout my design, to tie in with the logo and also because they can convey a sense of trust and authority. Overall, the design is visually consistent, approachable, and user-friendly.
User-Centred & Ethical Design Decisions
Accessibility was another major design principle. I sized buttons generously on mobile, ensured text is easy to read, and kept navigation predictable across devices. Later on, I plan to explore more nuanced accessibility features, but the mid-fidelity prototype already reflects a consideration of inclusive design.
Moreover, by keeping the design minimalistic in this prototype, such as fewer unnecessary pages, the eventual high fidelity built website will perhaps be more efficient and potentially less resource-intensive, which helps with sustainability from a digital carbon footprint perspective.
Feedback
Since creating the initial desktop wireframes, I gathered feedback from both peers and a tutor. A tester remarked that the menu felt cluttered at first glance, this led me to simplify labels in the navigation to make things feel cleaner.
I also received some critical feedback I chose not to implement just yet, as someone suggested adding social media share buttons to boost visibility. Whilst this is a good idea, I decided to defer it to a later, high-fidelity stage so as not to clutter the mid-fidelity prototype and to focus on communicating the core ideas first. It was also mentioned to me to make the images move around each other, which is something I may look into in high fidelity too, as well as other experimentation with buttons etc.
Challenge
Balancing accessibility with visual clarity was also tricky, making buttons large enough for mobile taps is important, however I had to ensure they didn’t dominate the screen or push important content too far down. I settled on a compromise of sizeable, clear buttons combined with a generous amount of negative space and a vertical layout, so that content feels balanced and navigation remains an important element.
Next Steps & Reflection
Once I’m confident in the flow and structure, I’ll move on to the high-fidelity design phase, adding real content, typography, imagery, etc. At that point, I’ll also integrate accessibility improvements. Finally, I’ll document everything, not just what changed, but why. Reflection is crucial such as what worked, what didn’t, and what I learned. Ultimately, this will feed into the final assignment where I build the polished version of the prototype.