Oxford Nanopore Technologies.

Biotech design systems and regulated software

"Designed to deliver accessible, rapid, data-rich, DNA and RNA analysis to 'enable the analysis of anything, by anyone, anywhere'"

  • User experience design
  • Design system
  • Figma
  • Regulated software
  • Hardware devices

About nanopore

The biotech sector company develops DNA and RNA sequencing technology. I have delivered designs for desktop and touch devices that can sequence libraries and samples on one, two, five, 24 and 48 position devices for research and applied practice use.

ONT's technology is used in biomedical and cancer research, as well as plant, animal, pathogen, and environmental analyses. It's also used in clinical and translational research to develop applications that could improve health outcomes.

Design system

I was responsible for creating and maintaining ONT's (new 2024) design system 'Brill'. I used atomic design methodology to create components and formulate the library - creating a consistent core set of components, styles and tokens to be used across the ONT platforms. Included in my work on the design system was the implementation of a pattern library 'Puffer' that brought together design patterns from five different systems to help create consistency across the ONT devices.

The design system has been released to design and development teams and has over 100 components and over 5k inserts per week.

  • Form system
  • Layouts and code scaffolding
  • Cards
  • Alerts and notifications
  • Iconography
  • Typography
  • Primitive and symantic colours
  • Primitive and symantic sizing, spacing and radius
  • Navigation

My processes

  1. Research existing designs Find, use and discuss existing components and patterns within the design files of the informatics team.
  2. Consolidate, ideate, improve, iterate Bring together similar solutions to similar problems. Ideate on new solutions that work for many scenarios.
  3. Review Using the SME knowledge of the design team, take onboard feedback and user buy in.
  4. Finalise and test Adjust to perfect, define scope of components and stress test.
  5. Release to design Release to designers to stress test.
  6. Bug fix Circle back to fix any issues from feedback loops within the design team.
  7. Document and release to development
  8. Continous review The conversation is encouraged and welcomed around the limitations of the design system and patterns that we use within the design team. Enabling improvements and bug fixes to be released.
Scroll right for more Sorry this is bad alt text - Screenshot of ONTs design system on Figma - Table Sorry this is bad alt text - Screenshot of ONTs design system on Figma - Card Sorry this is bad alt text - Screenshot of ONTs design system on Figma - Input type text Sorry this is bad alt text - Screenshot of ONTs design system on Figma - Metadata Sorry this is bad alt text - Screenshot of ONTs design system on Figma - Search Sorry this is bad alt text - Screenshot of ONTs design system on Figma - Breadcrumb

Q Line

My 'platform' work was to transform the regulated Q Line interfaces from 5 position GridION devices into a 24 and 48 position PromethION devices. During this time I brought forward new requirements into solutions; setting up multiple positions at once, allowing position and account management and maintaining BAU feature and bug fixes.

As part of my time in the Q Line Platform I helped to align interfaces between two distinct platforms, this was to take advantage of the new design system and bring the interfaces together so that users of both platforms could have a consistent experience.

Some OKRs for the business were to create consistency and release faster, the work on my Q Line platform helped move two platforms into one set of consistent designs with variable and togglable features and flows for each. There was some friction in the team's ways of working and patterns, to overcome this as a team with more collaboration and alignment I helped to implement:

  • Ticket based workflows
  • Jira ticket templates
  • Figma branching strategies
  • Design co-working strategies
  • Design documentation and handover

Feb 2025 - Work is ongoing at ONT on the Q Line platform software.