Royal Society of Chemistry
Transforming the digital landscape of the Royal Society of Chemistry with a modular and flexible design system
Role and Process
Design Highlights
Brought in by Unthinkable as the designer for this project, I worked closely with project director Jack Hardiker from Office of Everyone to ensure the project was executed smoothly. We collaborated with the RSC in-house digital team to develop a design system tailored to their requirements.
The project began with an audit of their existing digital presence. This allowed me to identify key design inconsistencies and accessibility barriers. Based on the audit findings, I then moved into the design and prototyping phase, where I created wireframes and high-fidelity prototypes with the system components.
Throughout the process, testing and iteration were key. The design system was tested through redesigns of several existing websites. Additionally, user testing was conducted by the RSC team. Feedback was gathered and discussed during biweekly review sessions. This iterative approach ensured the design system was always aligned with their objective.
Development process followed
Accessibility and Scalability
During the initial audit, key accessibility issues were identified and addressed. One of the primary issues was poor colour contrast, which was resolved by curating a new, more accessible colour palette. Additionally, font sizes were adjusted to improve readability and ensure proper text scaling for users with visual impairments. This was essential to make the text more legible across different devices and platforms.
To further enhance accessibility, focus states for interactive elements were standardised, improving keyboard navigation and ensuring users could easily navigate the website without a mouse. Button sizes were also increased to meet the required touch target specifications for mobile users, making the site more user-friendly and accessible across devices.
Curating a colour palette through by exploring tints and shades and their corresponding contrast ratios
The design system was built with scalability in mind, ensuring it could be seamlessly implemented across various content management systems. This also included designing for a variety of mobile and desktop screen sizes, ensuring the system adapted well to different viewports and provided a consistent experience across all platforms.
An example of component design variations tailored for different viewports
Guidelines and UI Library
To facilitate future development, I created a comprehensive set of design guidelines and an extensive UI library in Figma. This not only enabled the RSC’s team to easily implement the system but also provided the foundation for them to expand and maintain the system as their digital ecosystem grows.
An example of visuals created for the guidelines
A sneak peak into the design system
About the Project
The Royal Society of Chemistry (RSC) is a non-profit organisation dedicated to advancing the chemical sciences, promoting education, and highlighting the importance of chemistry in society. They provide valuable resources, publications, events, and initiatives that benefit both the scientific community and the wider public.
The RSC partnered up with Unthinkable Digital to create a modular design system as part of their ongoing digital transformation. The RSC faced challenges in managing multiple websites and platforms that had been developed without a unified set of design guidelines, which resulted in inconsistent branding, disjointed user experiences, accessibility issues, and inefficiencies in development.