Overview
Benenden Health is a UK not-for-profit healthcare provider that launched an online community to help members access health information and connect through peer support.
The challenge was to create a fully branded, easy-to-navigate community experience within the constraints of an existing white-label platform and design system.
I led the UI design, translating Benenden Health’s brand into a clear, accessible interface, and worked closely with engineers to ensure designs translated cleanly into implementation.
The community launched successfully and continues to support active member engagement.
- Client
- Benenden Health
- Role
- UI Designer & Front End Developer
- Focus
- High-fidelity UI design,
Front end build and integration - Platform
- Web - Community Platform
- Tools
- Adobe XD, Figma (Design System), HTML, CSS (SCSS), JavaScript
Challenge
Benenden Health required a fully branded online community that felt trustworthy and accessible for a healthcare audience, while being delivered within the constraints of an existing white-label community platform. This introduced several core design challenges:
Designing within a shared platform
The community was built on a white-label platform shared across multiple clients, requiring the UI to operate within predefined layouts and use existing components and interaction patterns while reflecting Benenden Health’s brand.
Applying an existing design system
The work focused on applying an existing design system and aligning colour, typography, and UI components with Benenden Health’s brand.
Extending platform functionality
Benenden required an events manager not natively supported by the platform. It needed to be scoped, designed, and implemented without disrupting the existing community experience.
Supporting region-based community spaces
The community required region-based spaces across the UK (e.g. South East England, Scotland), creating the need for clear structure and navigation to help members find relevant conversations.
Approach
Translating brand within platform constraints
Working within an existing white-label platform and design system, I used Benenden Health’s main website as a reference to guide layout decisions and brand application across the interface. This ensured the community aligned with the wider Benenden ecosystem while operating within platform constraints.
Iterative design and stakeholder feedback
I developed high-fidelity UI designs across two iterations. Each round incorporated structured feedback from Benenden Health’s marketing team and internal stakeholders, refining layout, brand alignment, and key interface components.
Researching event platforms
I analysed established event platforms to understand common UI patterns and interaction models. These insights informed the structure, navigation, and key user flows, ensuring the feature met client requirements and was intuitive to use.
Configuring region-based community spaces
I structured twenty-one region-based community spaces to reflect different areas across the UK. Permissions were configured so members only saw the community space relevant to their region, reducing clutter and improving discoverability.
Staging and quality assurance
During staging, I worked closely with developers to refine spacing, typography, and responsive behaviour, ensuring the final implementation accurately reflected the intended designs.
Solution
The following screens highlight key areas of the Benenden Health community experience, demonstrating how the platform constraints and brand requirements were translated into a cohesive interface.
Homepage (Logged out)
The logged-out homepage introduces the Benenden community, featuring clear sign-in and registration CTAs, public community content, and event highlights to encourage exploration before joining.
Homepage (Logged in)
The logged-in homepage provides a personalised overview, prioritising relevant community spaces, recent discussions, and upcoming events in a structured layout.
Discussion Board
The location-based discussion board enables members to browse active topics, start new conversations, and navigate content through a structured layout and clear hierarchy.
Conversation page
The conversation page prioritises readability and participation, establishing a clear distinction between the original post, replies, and interaction actions such as replying, quoting and voting in polls.
Mobile views
The mobile views of the logged-out homepage and a conversation thread are optimised for readability and intuitive interaction on smaller screens.
Contributions
I led the UI design and collaborated with developers to customise the front-end of a shared white-label platform for the Benenden Health community.
UI design ownership
Led the UI design for the community, producing high-fidelity layouts for core pages across desktop and mobile within an existing design system.
Client collaboration
Partnered with Benenden Health’s marketing team to present designs, gather feedback, and ensure alignment with brand guidelines and stakeholder expectations.
Front-end implementation
Collaborated with full-stack developers to implement agreed designs by customising platform templates and the HTML/CSS, ensuring design intent was maintained through to production.
Custom events manager
Collaborated with product managers and developers to design UI concepts and contribute to the front-end implementation of a custom events manager layered onto the existing platform.
Outcome
Production delivery
After several months of design and build, the community was launched for Benenden Health members. The platform translated brand requirements into a clear, structured experience, enabling users to navigate, discover content, and engage with community features within the constraints of the white-label system.
It introduced region-based community spaces and a custom events feature, enabling both online interaction and in-person local engagement while establishing a scalable foundation for future growth.
It introduced region-based community spaces and a custom events feature, enabling both online interaction and in-person local engagement while establishing a scalable foundation for future growth.
Continued ownership & evolution
Following launch, I continued to refine and evolve the platform through incremental updates, working closely with developers to maintain consistency as new features and content were introduced.
The core structure, navigation patterns, and design foundations established at launch provided a stable framework that supported ongoing improvements without disrupting the user experience.
The core structure, navigation patterns, and design foundations established at launch provided a stable framework that supported ongoing improvements without disrupting the user experience.
Sustained engagement
The community remains active, with sustained member participation and ongoing discussions, indicating that the structure and features introduced at launch continue to support engagement over time.
View live platform