Drawing User Attention to the Right Place at the Right Time.

The Challenge

Roche’s scan applications interface with its flagship scanners, facilitating high-definition imaging and digitization of pathology slides that can be scored remotely from anywhere in the world. Colored lights in the UI and on the scanner instrument communicate complex meaning to users, helping them scan slides and solve issues faster.

Concord engaged to create an intuitive connection between the scanner instrument and the user interface.  

The Solution

Concord used a 5-step process to design the color system as status indicators to help users intuitively navigate and understand workflow and error statuses. Simultaneously, we aligned them with other scan app software to create a learnable experience across products.

5-Step Process:

1. Discovery: we spoke to subject matter experts and reviewed all available material related to the scanners to understand the users and their needs, the problem, and our limitations for implementation.

2. Ideation: We gathered use cases and constraints by meeting with stakeholders and researching similar products.

3. Design: We designed high-fidelity mockups and prototypes that illustrated the ideal color status design pattern using Figma.

4. Feedback: We surveyed stakeholders for insightful feedback on our interactive design mockups to be able to iterate and reach a vetted outcome.

5. Development: We implemented our finalized designs into a fully implemented pattern by working with developers.