Designing an engaging and accessible site for a Rare Dementias support charity

Rare Dementias Support (RDS) is a world-leading, UK based service provided by the University College London Dementia Research Centre (DRC) and partners and funded by The National Brain Appeal.
This project was sponsored by The Selfridges Group Foundation.

Rare dementias support / selfridges & co.
ux designer
UI Shot of the Rare Dementias Support website

I have worked on the re-design of the Rare Dementias Support website as a representative of the Selfridges team.

The main focus of the re-design was to improve overall navigation, increase accessibility for users living with the disease and allow for a flexible, component-based site in order to make changes quickly.

The brief

Complete the re-design with testing and interviews from stakeholders from the charity and their prospective users and created designs for the site as well as a small design system of components to be then implemented by a developer in Wordpress.

Create an experience that is accessible to potential users living with the disease and their carers, with particular attention to simplified navigation, ease of discovery and search and a clean, minimal design.


  • UX/UI Design
  • Design Library Implementation
  • React prototype with Heatmap tracking
  • Motion graphics


Exploration & Ideation

After the initial stakeholder interviews and after analysing data from the user research conducted by an external agency, I started drafting user flows, information architecture and wireframes of the website.

The initial exploration phase was conducted with stakeholders both inside the Selfridges team and the charity responsible for the maintenance of the site, the Dementia Research Centre of University College London.

Information Architecture of the Rare Dementia Support website


After the initial period of ideation and exploration, the wireframes were now ready for a test drive, the first user testing.

Wireframes of the Rare Dementias Support website


Together with the wireframes, I documented every page to define the structure and reasoning behind design decisions.

Wireframes of the Rare Dementias Support website


The website was meant to be tested with carers and users living with the disease therefore they had to be conducted remotely and with the assistance of one of the researchers, with the necessity of collecting data about user behaviour on page in bulk.

Therefore the decision of creating a static coded version of the site and allow a heat-mapping tool, HotJar in this case, to capture relevant data.

Styling-wise the prototype was just an enhanced version of the wireframes with added images but no accent colours

The User Interface

The peculiar aspect of the Rare Dementia Support brand was that it included 6 sub-brands, one for each disease.
This difference had to be reflected in the UI of the website to allow for distinction and allow users to relate the sub-brand to a specific colour.

UI Shot of the Rare Dementias Support website

The Design Library

Next on the list was to create as many re-usable components as possible, to allow for a high degree of personalisation for the admins of the website.

By following Atomic Design principles I have created a small design library of re-usable components

Design guidelines for Rare Dementia Support

Dev Handover & Conclusion

The site was now ready to go into development, with a smooth handover process to the developer via Abstract.

Rare Dementias Support now has a strong brand an an excellent digital product helping them bring valuable information to those in need and increasing their brand awareness and their mission to the world wide web.

Before and after view of the Rare Dementia Support website