Anthem Design System

DESIGN SYSTEM • 2021 • TraceLink

 

Anthem Grid, with Navigation closed

Summary

When technology changes, so does the experience opportunity - as TraceLink’s data capabilities improved, there became a point of transition and an opportunity to redesign from the ground up. As the concept of TraceLink’s Opus Platform became more than a discussion on the roadmap, the redesign of the experience was paramount. Responsive, adaptive, and completely hinged on serving cross-relevant data to the user. All of this, and something that could be utilized in a developer application to allow third party applications - not just built in house.

Design

Objectives

  • Create a responsive design system, thinking through mobile first design for the complex data needs of the TraceLink ecosystem

  • Ensure the design system is configurable by third-party developers

  • Design the components in a content management system for the design team’s use

  • Document the design system for internal development and external configuration

Research

  • Extensive research into WCAG standards to ensure accessible content in design

  • Collaborative exploration with Engineering into responsive grids and system technologies

  • Analytics evaluation of the current system usage, including browser and viewport, connectivity and location, as well as application versions to understand needs

  • Usage analytics of common interactions and user flows from Life Sciences Cloud platform to establish needed phase 1 components

Approach

We established a Google Material Design and React.js-based design system, researching best practices to ensure a cohesive and user-friendly experience. After grid discussions, the design team collaborated on vision and concept design work across viewports, with identifiable user flows represented to determine key visual aesthetics.

Brand identity and style were established in collaboration with the marketing department, with accessibility at the forefront. With data visualization a key aspect of the new components, this concern was paramount.

Finally, the global "Network Navigation" paradigm was iterated (and iterated) to pivot user data and establish through an information architecture model. All of this was then shared out through the Product Management organization and design.

Solution

  • Identified Global components and initial component group for delivery

  • Created concept “template pages” using known user flow needs to ensure rapid design delivery and prove system efficacy

  • Design components into team content management tool, to enable rapid prototyping and design work in hi-fidelity

  • Iteration of components, with micro-interaction focus, including UI hooks for Solution Builder application offered by TraceLink to third party developers

  • Design System documentation and versioned release of components and their configuration capabilities

Outcomes

The Anthem Design System and Design Guide provides TraceLink a responsive, configurable design system that is capable of handling the robust data and variable interaction needs in the Platform. Solution Builder, an application developed by TraceLink, further allows third party developers access to the design system and templated pages to build apps on the Opus Platform.