Building IPCRG with Remora
IPCRG’s existing website had become visually outdated, and important information was difficult to find. The organisation wanted a cleaner digital experience with generous white space and clearly defined content areas.
I redesigned the website using Remora, the flexible website-building system I had previously helped develop. I created the complete visual direction, homepage experience and component set while considering from the beginning how every design decision would translate into Remora’s variables.
An important part of the audience included patients looking for reliable information about respiratory conditions. The redesigned experience therefore needed to help visitors identify the right content quickly, while also supporting IPCRG’s wider research and educational work. IPCRG describes itself as a clinically led charitable organisation focused on improving respiratory health through research and education.
01
The challenge
IPCRG’s original website contained a large amount of valuable health information, but its outdated structure and visual design made that information difficult to locate.
Visitors often arrived looking for guidance about a particular respiratory condition. The new website needed to provide clearer routes to condition-specific information while also accommodating research, education, news and organisational content.
The client wanted a clean and spacious visual style, with information separated into clearly defined content areas. The challenge was to deliver this while working within Remora’s shared foundations and ensuring the website remained flexible for future content.
02
Establishing the visual direction
Before designing the homepage, I created a moodboard to explore how IPCRG’s existing brand could translate into a clean, approachable digital experience.
The moodboard brought together proposed colours, typography and smaller interface details such as buttons and content treatments. I also considered how these decisions could later be applied through Remora’s variables, rather than creating styles that would only work on a single page.
Presenting this stage first allowed the client to review and confirm the overall visual direction before I moved into the more detailed homepage design.
03
Designing the homepage around user needs
Once the moodboard and visual direction had been approved, I began designing the homepage.
The client helped define the content structure, while our team recommended adjustments that would make important information easier to find. Many visitors arrived looking for advice about a particular respiratory condition, so I created prominent homepage cards for topics such as asthma and COPD.
These familiar labels gave users a clear route into the website without requiring them to understand IPCRG’s internal structure. The card-based layout also divided a large amount of information into distinct, scannable sections.
I created three homepage versions as the design developed through client feedback. Each version was presented through an interactive Figma prototype, allowing stakeholders to review the hierarchy, content and overall experience before I configured the final Remora variables.
04
Building the design through Remora
I designed every element shown in the client prototype, including the navigation, hero, buttons, cards, headings, content sections and footer.
Each element was created with Remora’s component and variable system in mind. Once the design was approved, I added IPCRG’s colours, typography, spacing, component styles and responsive values into Remora.
I also designed the mobile experience using Remora’s dedicated responsive variables. Typography and spacing were reduced for smaller screens while maintaining the hierarchy and clarity of the desktop design.
Developers could then export the configured variables and use them to build the website. After development, I reviewed the implementation against the approved Figma prototype and provided design-QA feedback on spacing, typography, colours and component consistency.
05
The result
The completed website is now live, giving IPCRG a cleaner and more structured digital presence.
The new homepage provides clearer routes into condition-specific information while supporting the organisation’s wider content. The project also demonstrated that Remora could create a distinctive client experience without losing the consistency and efficiency of a shared design system.
By considering components and variables from the beginning, I was able to carry the approved visual direction consistently through client feedback, responsive design, development and final QA.
Explore the design in Figma
View the approved moodboard, homepage concepts and responsive website prototype in Figma.