This case study sets out the work conducted by Mindera in collaboration with ColorADD, an organisation that aims to make the world more inclusive for people with colour blindness.

Overview

• Client: ColorADD
• Industry: Social impact / inclusion
• Project type: Mobile development
• Tech used: React Native
  

About

ColorADD is a universal sign code developed by Miguel Neiva, a Portuguese professor and graphic designer, to help people with colour blindness. It represents colours and colour combinations through a series of geometric shapes.

The team responsible for ColorADD states that its mission is to “facilitate colour identification for colour blind [people], while contributing determinately to their social integration and welfare, turning communication more efficient, responsible and inclusive.”

Executive summary

Mindera developed the iOS and Android ColorADD app. The purpose of the app is to provide a colour guide for people with colour blindness and to act as a tool for disseminating the ColorADD code.

Challenges

ColorADD was created on the basis of inclusive design. Its code can be used through a license and is implemented in a huge range of organisations.

The ColorADD team built an app for colour identification. It worked by detecting the colour of anything the user’s smartphone camera was pointed towards. This then delivered a sign code to help the user understand what colour was being observed by their camera.

The app was enormously popular and even won the accessibility category of the Vodafone Foundation Mobile For Good Europe Awards in 2013.

By 2020, the team at ColorADD wanted to reach more people. The aim was to educate society about colour blindness and the role ColorADD can play in making everyone’s life easier. The educational aspect was the key focus point, with the team seeking to spread awareness and promote the ColorADD code.

This meant a new version of the app was needed, one that was available to all mobile users (the original was only released on App Store) and incorporated more features.

Alongside these key requirements, the challenge for version two of the ColorADD app was for it to support the following objectives:

• Being designed for everyone to use — not only colour blind people but also those with other visual impairments, such as amblyopia.
• Having an education component — so people could learn the colour system.
  

Mindera worked together with the ColorADD team to deliver the new app.

Solutions

We held a Sprint 0 meeting to establish the project objectives & actions

Mindera held a remote Sprint 0 meeting in June 2020. It brought together a variety of specialists from Mindera, namely:

• Account owner
• Product owner
• Android developer
• UX/UI designer
• Backend developer
• Software developer
• Quality assurance analyst
  

Bringing together all of these experts was a really important part of the solution-building process for Mindera. It helped Mindera to understand ColorADD’s objectives and brainstorm how we could help its team achieve them. It did so by addressing the following objectives:

• Identifying and discussing the vision and requirements.
• Discussing previous assumptions about the product features.
• Conversing about the technical architecture.
• Talking through and deciding on the processes and practices (working model) to use.
• Determining the tools and environments that would be necessary for the project.
• Defining the next steps.
• ColorAdd’s goals for the project & the app features Mindera developed
  

The goals for Mindera were as follows:

• To develop and app that would help colour blind people to identify colours
• To include an educational aspect in the app that would help people use it
• To make it simple for the ColorADD code to be disseminated
• To quickly deliver the app on both iOS and Android
  

The Mindera team then defined a top-level roadmap. It established that the app would deliver the below features:

• Colour detection — real-time
• Colour detection — saved images
• Real-time colour detection with fixed target
• Educational tools to learn more about the ColorADD system
• Promoting/showcasing the ColorADD brand
• Sharing screenshots on social media
• Details of ColorADD contacts
• Information about ColorADD
• Colour addition system
• Onboarding tutorial
• Content translation
• Static identification
• Camera controls
• Sound control
• Surveys
  

With the purpose of the app and its features determined, work then commenced on the designs. Once the designs were approved, they were then implemented.

Highlighting some of the key features of the app

The app includes a wide variety of features that are designed to achieve the goals the ColorADD team had for it.

We explain some of the most important features in greater detail below:

Colour identification system

In terms of how the design and work delivered an app that detects the colour of anything the user points their camera towards, there’s an algorithm that would match a sign code for each RGB (red, green, and blue) element.

ColorADD already had something close to this solution — an Excel spreadsheet with RGB (red, green, and blue) matching sign codes. Mindera needed to move that information into code and do some approximations when it didn’t match exactly. To achieve this, we iterated an algorithm to convert the data from RGB to the ColorADD code.

Real-time identification

This feature helps users to immediately identify colours. The user points their camera at a colour and they are then given a ColorADD code that allows them to establish what it is.

Static identification

It works in much the same way as the identifying colours in real-time part of the app. The difference is that this feature allows users to upload a photo and they then receive a code to identify its colours.

Save identification and share it on social media

Users are able to save the information that confirms the colours they sought to identify. They can then publish this information on their social media accounts by using the native sharing methods of their device and OS.

The purpose of the sharing feature of the app was to twofold. Firstly, to increase awareness of colour blindness. Secondly, for users to share helpful information with people they know who have colour blindness — increasing inclusivity.

Educational tools

A crucial objective for the app was to make it easier for people to understand how to use ColorADD. The colour code system was added to the menu for two reasons:

• To educate people with colour blindness on how using the app can help them with their daily routines
• To increase awareness of the app amongst the general public and explain what each colour symbol represents
  

The educational tools of the app display text on the user’s screen that detail the below four aspects of ColorADD.

The colour alphabet
This explains ColorADD is a universal and inclusive language that helps colour blind people to identify colours.

A simple concept
This outlines that ColorADD is based on three simple graphic symbols which represent primary colours, with “black” and “white” used to show whether the tone is light or dark. The symbols are transformed into a mental game that’s simple for people to memorise and apply, so they can quickly identify colours in their everyday lives.

Social responsibility and innovation
This demonstrates that the idea of ColorADD is it’s a tool everyone can use — it’s not only for people who are colour blind.

Accreditation and recognition
This lists the wide number of organisations that use and benefit from ColorADD. It also notes the breadth of acknowledgement ColorADD has received, from the scientific community to the corporate world.

Why we used React Native to develop the app

We decide to use React Native to create the iOS and Android apps required by the ColorADD team. It was chosen because it allowed us to deliver the solutions for both operating systems (OS) at the same time.

This decision was made because the app wasn’t very complex and we wanted to use a small team to develop it for each OS. Using React Native meant we could write the code once and deploy it in both iOS and Android. The result of this is that we could achieve ColorADD’s objective of creating a good app on two OS in a short period of time.

Results

The obvious results to highlight is that Mindera delivered the two apps (iOS and Android) the ColorADD team required. These are the features highlighted on Google Play and the App Store:

Credit: App Store

Credit: App Store

Credit: App Store

The app has a five-star rating on both Google Play and the App Store. This demonstrates that it delivers a great experience to ColorADD’s users.

Client’s words

André Teixeira, CEO of ColorADD, shared these kind words about how it was to collaborate with Mindera on this project:

“The entire Mindera team involved in the development of ColorADD app had the amazing ability to understand the framework of the project and to adapt to the social innovation component present in our mission.

“They were able to leverage all their know-how and adjust it to ColorADD's requirements to, together, produce a solution that is really useful for including colour blind people in a global world that communicates through colour.”

Looking for a tech partner? Get in touch!

ColorADD is one of the many organisations Mindera has collaborated with to provide long-term solutions to important issues. If you need a tech partner for your business then please get in touch with us. We’d love to work with you and help your organisation.