Problem Context

Synapsys has been launched and relaunched several times. The process of updating medical software is difficult and leads to old software in the field that rarely gets updated, partly due to complex FDA compliance.

To that end Synapsys has many different styles and systems governing its design which can sometimes contradict and conflate i.e. such as the use of modals below.

Immediately obvious here is issues with lightbox, border, close, input fields, typography and CTA’s

Design team justifications

Discovery

All the design tools that were just daily and infrequently by our design team were collated, frequency of use, impact of migration and available features were identified and compared.

Lots of tools for different projects and for Synapsys there were 3 tools actively in use

System review

A complete component audit was needed to assess the components, design and paradigms currently in use. Variations of these were noted and as well as discrepancies and estimates for redesign and, if applicable, redevelopment. These were added to the backlog and stored in our backlog management system (Azure devops in this case) as design technical debt. 

Font choices were low impact and low cost but calendar widget variations and geo referenced date / time formats were high risk and high cost.

Reviewing style and widget variations

Solutioning

When reviewing and discussing the various styles and systems it became apparent that a more collaborative system was needed. Figma seemed the obvious choice. UXPin was also considered for reasons of file and project structure, collaboration, versioning and developer interaction.

A unified component library and maintenance plan was fundamentally needed.

Additionally, and perhaps ideally, a system of design was deemed beneficial. This design system playbook would contain strategies for tackling all elements of design from ‘how, when and why to research’ to how to estimate work and maintain a design technical debt backlog etc.

The system needed to be holistic but not prescriptive as BD makes acquisitions which need to be adapted to Synapsys or equally likely Synapsys adapted to the acquisitions. Designers need to be free to follow a playbook but maintain autonomy to sprint quickly when needed.

Ultimately UXPin was used as our Design repository to store not only our design artefacts from research to prototypes, but also our sprint planning and backlog prioritisation. This would eventually grow to a wiki style single source of truth for all Design related initiatives.

Brad Frost’s atomic design was used as the template for a new design system library. This is a really smart way to hierarchically embed all components from tiny labels to section and page templates.

This system makes for fast iterating and light maintenance.

Atomic Design, Brad Frost

Building the library

Synapsys originally shipped with 1920 x 1200 monitors and was not responsive. As newer instruments and use cases for remote access were added responsive and adaptive approaches were used

Adaptive multi device use patterns

Synapsys is a massively complex system with alerts coming from various instruments and immediately visible, and actionable, from multiple locations.

Diverse dismissible alerts

Secondary buttons are rejected for certain scenarios i.e. if there is risk of patient harm. In this scenario dual primary buttons are required to add cognitive load to the user to actively consider the choice.

Medical technology cognitive and risk considerations

Consistency from all aspects including the interactions surround text entry was considered and documented

Text entry interactions

Alternative patterns for specific functionality such as starting or ending instrument processes were considered and standardised

Alternate RAG buttons

Rebuilding in UXPin

With the components added to the team design system repository, variations of given components were stored and referenced in the local project e.g. kiosk button in the Atoms library.

Dropdown buttons in the Atom library

Artefacts and supporting UX related activities and initiatives were added to the design system for easy reference by stakeholders.

Building up the design system beyond a component library

Conclcusion

An important part of this system was stakeholder threaded commenting on all artefacts, prototype testing and recording live with users and developer Javascript, css and asset handover integrated.

UXPin was the perfect solution for these too. Figma, is an equally useful online collaborative design system repository, but the navigation, team environment and iteration history swayed the design team UXPin. 

For less complex B2C applications where complexity is less important and visual design is more important Figma is a great choice.
For our complex enterprise B2B system UXPin was the clear winner.

That said some of our designers still use Figma, for enhanced visual design, or solidworks, for industrial design, etc. timestamped screenshots and links to the design file are still stored in UXPin.

Each Design org is different, but it worked well for us.