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.
Scope:
- UX/UI Design
- Design Library Implementation
- React prototype with Heatmap tracking
- Motion graphics
Iteration:
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.
Wireframes
After the initial period of ideation and exploration, the wireframes were now ready for a test drive, the first user testing.
Documentation
Together with the wireframes, I documented every page to define the structure and reasoning behind design decisions.
Prototype
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.
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
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.
