Medkit Design System
Building a design system from scratch to inform the design and development process of the Vision suite of products and improve the lives of NHS healthcare practitioners.
CONTEXT
Vision Health (now part of Cegedim Healthcare Solutions) provides clinical software used across the NHS for GP patient management, appointment booking, and secure medical record sharing.
Medkit Design System began to take form in early 2019 in an effort to evaluate the UI patterns used across the Vision products and help shape the user experience at a micro and macro level.
THE PROBLEM(S)
Working in silos
Up until this point, designers and developers were working in isolation within their respective product teams, with little time to focus on the discovery and definition phase of each feature. This meant that a lot of the same UI patterns were being developed multiple times by different teams, with each team producing very different results.
Limited visibility and communication
Product teams worked in isolation, with limited visibility and communication into each other's work.
Insufficient discovery
Teams had limited time to properly explore and define problems before building features.
Inconsistent results
The same patterns were developed by different teams, resulting in inconsistent user interfaces.
OBJECTIVES
Apart from the pressing issue of consistency, Medkit was an opportunity to dig deep into the discovery process and ensure that design would no longer be an afterthought of development but rather the first touchpoint. By producing clear and concise documentation for each UI component, we ensured that each team would use the same technologies, practices and re-usable patterns consistently to build successful Vision products and deliver a seamless user experience.
Overall, Medkit was an opportunity to build a common language that all stakeholders across product teams would use to communicate in, thus making design accessible to everyone involved in the making of the Vision apps.
MY ROLE
Joining the team in 2019, my role extended beyond the design of the system itself. I led the full conception of the Design System, establishing the governance, processes and ways of working needed to keep it consistent and scalable as the product ecosystem evolved.
Drawing on my previous Design System experience at Prudential, I introduced a systems-first thinking to the product development process. I developed a structured process for auditing, defining and redesigning the common UI components and patterns already in use, while identifying opportunities to introduce new components that would better support the needs of the Vision products.
The result was a shared foundation that brought Product, Design and Engineering closer together, giving the wider team a consistent set of principles and components to build from.
Medkit version 1.0 at a first glance
IMPACT
Medkit allowed the design team to establish a methodical approach to the research and design of components and set the standards of use for the Vision products while enabling us to collaborate with developers even more effectively. More importantly, it drove a change within the design team to focus on the things that matter. It allowed for a renewed emphasis on the discovery process and testing of prototypes with customers to make necessary changes before being fed into the development process.
Having designed Version 1.0 of Medkit, we are already seeing the cost and time-savings benefits of our Design System come into effect. It has enhanced shareability, reduced development time and the need for ‘patchwork’ while producing consistent results.
SKILLS DEVELOPED
UI design
Figma
Running audits
Setting up processes
Organisation change
Project management