Designing for Biotech: Insights in Product Design (Part 1)

20 odd years ago, I was an intern at a design agency in Shoreditch. The hipster streets were bleak, and beards were rare. We were musing on a question that could quickly bring design interviews to a natural end; the interviews where you’d like the time back. Like with the chap who kept his shades on or the girl who couldn’t explain the presence of a polar bear on her homepage because she hadn’t designed it.

“What’s your favourite colour?”
“Blue”.
“Fascinating. Well… Thank you for coming in.”

With hindsight, that colour question could have gone on forever. But we played it as some sort of quack neurological insight.

Fast forward to today, I’m thinking colour again. The entire colour palette of Synthace’s software, Antha. Last year I was designing colours on the head up display of Sir James Dyson’s new electric car, now I was looking at the colour of wells on a 96-well plate for a miniaturized purification protocol. New direction, new learnings.

With this in mind, I want to share some insights on redesigning a product in very different contexts and how that’s played out for Antha - a brief peek into how a design approach works.

Insights in design approaches

Insight #1 - Unknown unknowns 

One of the great creative directors I’ve worked under once asked me why UK traffic warning signs were outlined red rather than filled with a solid red. 

“Is it because a filled red is too blood thirsty? And why is it triangular?”

Source: Adobe Stock
Source: Adobe Stock

Rationales must always exist - the reasons behind the design - but this time I was stumped and slightly embarrassed. 

On my return the following week, I had a dossier of rationales. I could’ve defended that road sign in a court case. (See Psychology of shapes, Psychology in Design and Jock Kinneir & Margaret Calvert).

This level of discovery, the rationalization and understanding of intent is part of many design frameworks, including the first part of the popular Double Diamond framework, and hasn’t changed regardless of the design context I’ve encountered.

Serendipitously, former US Secretary of Defence, Donald Rumsfeld, sums up the discovery phase rather succinctly:

.....as we know, there are known knowns; there are things we know we know. We also know there are known unknowns; that is to say we know there are some things we do not know. But there are also unknown unknowns - the ones we don't know we don't know.”

Source: From a response United States Secretary of Defense Donald Rumsfeld gave to
a question at a U.S. Department of Defense (DoD) news briefing on February 12, 2002


Yes, he was talking about weapons of mass destruction - some may agree that us designers are the very same. But you get the idea: we are here to resolve intent, deliver outcomes, and uncovering known unknowns is an essential part of that.

Insight #2 - Understand what ‘Zeitgeist’ means

Don’t sidestep the brand. I look to lean branding or David Hieatt’s Do Purpose as a quick framework to understand what the brand fundamentally is, especially if you’re new to a product or company. 

The outcome you’re looking to create must sit on the brand as a foundation. It’s where you should point to for inspiration and justification.

Source: Adapted from  David Hieatt’s Do Purpose
Source: Adapted from David Hieatt’s Do Purpose

Insight #3 - Stay on target

When you enter the design and delivery phase, the enormity of a project can take over - you can have a design wobble, and you start doubting yourself. You need a design stop-and-search to ensure we are continuing down the right path. Here are three key principles I use to steady the ship (adapted from Vignelli’s Design Canon.) 

  • Semantics - design with a purpose; from the product itself to everything on the ‘page’, it all has an affordance, meaning or reason
  • Syntax - replicable methodology or visual grammar; everything has a method and consistency, e.g. the way a button looks or behaves and how it’s positioned
  • Pragmatics - if you combined the two above, is it still usable and useful?

Here’s a simple example (when I first arrived, we had a lot of these):

Source: Synthace
Source: Synthace
  • Semantically, metaphorically, a ticked checkbox has a positive connotation, while the red background has a negative connotation, making it a visual oxymoron
  • Syntax-wise, the use of red for positive messages is going to come back to haunt you as you reuse that syntax in other contexts
  • Pragmatically (semantics + syntax), the red checkbox is confusing and gets more confusing if set alongside error states on view

Insight #4 - Which way to perfection

At various points in my design career, I’ve dreamt of a design review with zero feedback. You’ve come out of the review and it’s perfect. When you have a review once a week with the ultimate sign off, this is inevitably how it gravitates to working. Except that it’s a fundamentally flawed approach. 

Iteration is slow because it bottlenecks into this senior sign off who’s too busy to see you.This isn’t going to be news to anyone: iteration and iterating fast facilitates insights.

At Synthace, we have immediate access to all those in the know: the lab scientists, the biologists, the clients, the engineers; it helps uncover those unknown unknowns but, more importantly, it tells your ego to move out of the way so you can invite others into the ideation.

A design approach to Antha

There are two overall tasks. Firstly, update the user interface (UI) of our software, Antha. Secondly, as a consequence of that, create a whole new Design System as part of the process.

1. First steps: look at the competition

When we were designing the car, we rented a car every week so everyone could take a look at it and fiddle about with all the bits we were interested in. Sometimes people were literally kicking the tyres.

We’re wondering: who is the benchmark? What are they doing well and not so well? And most importantly we look for easy wins.

2. Purpose

We need to understand our proposition…. try asking about the name. For example, what do Synthace and Antha mean? Where did the names come from? Why? Then couple this with the mission or vision that underpins the why/what/how of the brand.

This should help ‘stimulate’ the visual ‘artefacts’ as well as provide a brand personality. Things like the colour of those ‘artefacts’, e.g. the logo or the primary UI colour, should flow from that brand personality. 

For example, Antha is an adaptation from "anther": the part of the stamen where pollen is produced. Antha’s brand colour is green, which equates to biology, nature and growth. Synthace’s brand colour is blue, which equates to digital technology but binds naturally with the product colour. 

3. Designing for accessibility

How do you define the right green?

Source: Compiled by Synthace
Source: Compiled by Synthace

Start with accessible palettes. We are using WCAG 2.0* as a guideline for colour and size, but not as a stick to beat ourselves with because the nature of our product is so complex that it will be near impossible to implement an AA rated product.

*Bear in mind, this standard will change - the current standard is considered too binary in its outcome.

Contrast is contextual and perceptive, so is different for each of us (Myndex has great articles on this).

Steps to a palette:

  1. Adobe Colour Wheel - using our existing palette, we pick colour swatches and themes that suit Antha and align with our brand
  2. Material.io colour tool - having found the core colours, we run it through Google Materials own colour tool to output a full palette including primary and secondary colours
  3. We also use Paletton to look at colour patterns
  4. Colorable - whilst doing the above, we need to constantly try and meet accessibility standards (e.g. for minimum contrast) and review our colours for colour-blind users
  5. We then choose a semantic (info, error, warning, success) set of colours that sits well with the primary and secondary colours as well as a set of neutrals (greys)
  6. Finally, we apply the colour and see how it sits with the atomic components, i.e. the base components like the buttons, switches, tabs, etc.

Here’s our first attempt (primary green and secondary indigo/fuchsia).

Source: Adobe Colour Wheel tool
Source: Adobe Colour Wheel tool

It felt aligned with the brand but it wasn’t working - for several reasons:

  • Green equals success, so semantic green was confusing along the brand green. How does everyone else get around it, you ask? They don’t. Usually they don’t use the green in their UI, just in their branding. Alternatively, they apply it in a minimalistic way or they apply it in a terrible way.
  • A lot of green wasn’t accessible as it had a high percentage of white in it, leaving us with fewer options; making darker green palettes was not in line with our brand’s look and feel.
  • There are a lot more interactions and components on Antha than on a standard content-heavy web page so there are more ‘bumps’ or instances of green, making the UI very... green.

Iterations later, I discovered Colorbox.io by Lyft, the car service product. Lyft recognized the shortcomings of a linear graduation of colour that Google Materials delivers. In reality, UI focuses more on the light and dark notes of the palettes, and the middle notes are rarely used. The algorithm they created had different graduations (cubic, quad, quint, etc.), and with this tool we created a much more practical colour palette.

Source: https://colorbox.io/
Source: https://colorbox.io/

We landed on brand green for navigation, almost as a wrapper for the central UI, using brand blue as primary and indigo as secondary colours.

Source: Synthace, current colour palette
Source: Synthace, current colour palette

So far so good...

Whilst design fundamentals are crucial to establish confidence in our designs, we had to adapt the way the application of it works. Semantics and syntax were in place but pragmatically the first round of colour application didn’t work. We iterated on it quickly, and we’re now on an exciting path to the next challenge at Synthace.

Next time: UI layout. 

How did this...

OldAntha

...become this?

NewAntha
🔝