Refeyn / Scientific Software / Design System
I established a scalable UI foundation for complex scientific software, helping product, R&D, and engineering teams move from inconsistent legacy interfaces toward clearer, more maintainable product experiences.
When I joined Refeyn, there was no design system, just lightly customised default QT components that looked dated and inconsistent. We took the opportunity of working on the software of a brand new instrument for build our Design System
The software used a dark theme with an orange-tinted background that appeared more dark brown than modern.
The brand guidelines were minimal and print-focused, containing only a handful of shades of blue and orange - insufficient for building accessible digital products.
A full redesign of legacy applications wasn't feasible, it would have required significant time & resources. But adding features in the old UI would only increase inconsistencies.
The solution was to apply the new UI to all new software and adjust the old software's colours so both could coexist, enabling a gradual, unified transition.
Create a cohesive, professional design language that replaces dated default components.
Streamline workflows and speed up development execution
Build a system that grows with new products across desktop and touchscreen, adapting and supporting new use cases
Ensure proper contrast, larger touch targets, and clear typography throughout.
Dark Theme with blue tints replacing orange-brown backgrounds for modern appearance and extending of Refeyn's brand. Extended colour palette for versatility and scalability
Roboto is a highly readable, modern neutral typeface ideal for user interfaces. Its open-source nature, broad device optimisation, and range of weights provide design flexibility and consistency
We added numerous new icons and redesigned all existing ones to create a cohesive style with rounded outlines and consistent stroke widths
We created predefined spacing rules, using values that are multiples of two to keep a clean, balanced look. This helps maintain a consistent rhythm throughout the design, making everything feel well-aligned and visually harmonious
After achieving an agreement with Marketing and Branding stakeholders, we extended the colour palette, created typographic scales, elevation and spacing rules, and icon standards
We built the initial core components needed in the software: buttons, checkboxes, radio buttons, toggles, text fields, pop-up dialogs, tabs, progress indicators, etc.
Transitioned from Qt to QML to enable greater flexibility
Introduced new UI components and variations of the current ones and updated desktop legacy apps incrementally and organically, then extended to touchscreen applications on a later stage
Documentation is a critical part of any design system, it bridges the gap between design and development, ensuring that components are implemented consistently and accurately.
Each time a new component was created or a variation introduced, detailed documentation was produced outlining its anatomy, properties, layout and spacing rules.
To streamline this process, a Figma plugin called Specs was used to automate documentation. All documentation was also mirrored in Confluence, allowing non-designers and other stakeholders to easily access and reference the same information without needing to use Figma.
Continuously evolving design system with extensive component library
Already designed with the new UI. And legacy software applications cohesively coexist with the new UI
Scalable design supporting both desktop and touchscreen applications
Extending the minimal palette required stakeholder buy-in and careful justification for digital needs
Managing old versus new UI during gradual rollout without jarring user experience
Ensuring teams across the organisation embraced and utilised the new system guidelines
Successfully scaling from desktop-focused design to touchscreen applications whilst maintaining consistency
The Refeyn Design System transformed the software into a shared language that enables consistent, modern, and accessible experiences.
It allows a much faster implementation and supports scientists with tools that are both powerful and a pleasure to use
OTHER PROJECTS GLIMPSES
