Digital

Colenso BBDO 66 Beyond Binary Code

2022 Digital Products
Credits
  • Pou Auaha / Creative Directors
    Simon Vicars (CCO), Maria Devereux (CIO), Dan Wright (ECD), Beth O'Brien (Creative Director), Thomas Darlow (Creative Director)
  • Ngā Kaimahi / Team Members
    Haylie Craig (Senior Art Director), Erin Mattingly (Copywriter), Lucy Grigg (General Manager), Ryan Butterfield (Senior Business Director), Jin Fellet (Business Manager), Elsi Gibbs (Business Manager), Rob Campbell (CSO), Lizzie McCollum (CX Strategist), Liam Norris (Social Planner), Elle Kiddie (Senior Digital Producer), Isabelle Hooper (UX Strategist), Jodie Heron (UI Designer), Kyle Wetton (Fullstack Engineer), Logan Maire (Head of Technology & Innovation), Hamish Steptoe (Senior Designer), Fern Holloway (Senior TV Producer), Zia Mandviwalla (Director, FINCH), Corey Esse (Managing Director, FINCH), Bex Kelly (Exec Producer, FINCH), Duncan Bernard (Producer, FINCH), Marty Williams (DOP), Julian Curran (Editor), Neville Stevenson (Production Designer), Pete Ritchie (Colourist), John Baxter (Projections & Online), Cam Ballentyne (Music Composition), Craig Matuschka (Sound Engineer), Tamara O'Neill (Producer, Liquid Studios), Billy Worthington (Copywriter), Anna Markova (Technical Lead)
  • Kaitautoko / Contributors
    Claire Black (General Manager, OutLine Aotearoa), James Malcolm (Communications CoOrdinator, OutLine Aotearoa), Aych McArdle (Co-Chair, OutLine Aotearoa)
  • Client
    Caitlyn Hayes
Description:

Opportunity:
Transgender and non-binary communities are unaccounted for by most business data sets. There are millions of people who make up these communities worldwide, but we don’t have true data on them. That’s because we’re asking the wrong questions.

When a form asks for gender data and it only has two options (male, female), trans and non-binary people are forced to lie. A daily hurt that makes them feel invisible. If a person’s information is not correctly collected, stored or used, digital systems can’t understand or innovate with them in mind.

Beyond Binary Code changes that. Co-created with rainbow mental health organisations, trans and non-binary communities, it’s a single piece of a code that can be added to any website to make forms and fields gender inclusive.

It includes:
1. Code builder tool. Helping businesses understand whether they need to collect gender data, and if so, customising the code to suit their needs.
2. Downloadable HTML code. Updating forms to create inclusive data sets and flow on experiences. Written to work in HTML and Java, as well as Wix, SquareSpace, WordPress and other direct-to-market website building software.
3. Business resources. Encouraging buy-in, implementing the code, understanding data privacy obligations, and celebrating the positive gender datapoint ripple effect.
4. Non-binary design language. Welcoming and representing trans and non-binary experiences through film, imagery and stories.

Approach:
Design process.
Co-creation with the non-binary and trans communities was integral to the development of a welcoming, inclusive non-binary design language that elicited an emotive response and drove businesses to take action. The co-design sessions included needs identification and tonal language sessions with non-binary and trans individuals, as well as OutLine, to formulate key aesthetic and language considerations for the digital experience.

Three key design elements:
1. Fluidity and movement
- The blending of colours in the form of background gradients that shift as users move throughout the site create a sense of fluidity, constant change, and a rejection of harsh lines, boxes, and aesthetic confinement.

- The scroll interaction similarly rejected preconceived expectations, instead taking users on a journey in ‘behind the internet’, as the code flew past their screens - reinforcing a sense of movement, progress, action, and new perspectives.

2. Euphoria in representation
- Non-binary co-creators discussed the feeling of euphoria when they were acknowledged and repsrented by a business. To visualise this feeling, images of our non-binary co-creators would transform as they loaded in, from blurred and distorted, to crisp, clear and confidently in focus.

3. Rewriting code cues
- Snippets of code, code-based visual cues and coding windows were used in order to play on the idea of ‘rewriting’ the binary code of computers and more broadly the internet.

Results:
In the first 2 weeks of launch, the website recorded over 10k unique views, 200+ code downloads and started meaningful conversations with 36 major businesses.