TL42 Design System

DESIGN SYSTEM, OPERATIONS, PRODUCT MANAGEMENT • 2019 • TraceLink

 

Project Summary

Definition of TraceLink’s first pseudo-responsive grid

As TraceLink explored how to enable the Life Sciences Cloud with an international-capable interface, research into best practices and coded capabilities highlighted a clear need: a design system to standardize the display options and create templates for page types that enable a rapid translation of the existing to a scalable, globally-modifiable experience.

With a limitation imposed by the Scala-driven render of the interface, part of the system’s security, as well as a series of compliance-driven feature deadlines, the design system needed to allow a blend of “legacy” pages existing side by side with the templated screens to allow for a phasic implementation of the components across over 250 screens.

To support the internationalization requirements, the first TraceLink design system was defined. For full project summary, see the Life Sciences Cloud Internationalization project page.

Design

Objective

Users across the Life Sciences Cloud need the information architecture and common user micro-interactions to be consistent and recognizable, as well as flexible to their language or viewport, to make the applications more useful, usable, and teachable.

  • Define a series of components and common page templates that allow phasic transition of TraceLink’s applications to the new design system

  • Identify necessary “global” components that must be implemented for Phase 1

  • Adhere to TraceLink’s brand identity and gain cross-functional buy-in to system styles

  • Establish a design system library and content management plan for the Experience Design team to use in mock ups and prototyping

  • Document a User Interface Guide with styles, components, pattern library and best practices presented in a format usable for cross-functional consumption by Product Management, User Experience and Engineering and ensure iteration plan is agreed to continue support

Research

  • Internal interviews with Sales and Customer Success teams yielded hotspot areas to investigate, and inversely provided a sample of direct customers to interview

  • Single-app release of information architecture restructure in live product to gather needed A/B analytics and direct user feedback

  • Study of bug history reports and change requests related to the experience, whether resolved or unresolved

  • Research in WCAG standards for Accessible interfaces and Localization and Internationalization best practices, with a summary output to evangelize the Product Management and Engineering approach to designing with these considerations in mind

  • User testing of concepts and designs throughout, using internal Network Operations user groups

Approach

  • Work collaboratively with Engineering and determine how to best build within our technology (a Scala-served interface) on a timeline, including creating and maintaining a shared HTML / CSS / JavaScript build of the system to allow rapid design evolution

  • Maintain regular checkpoints with Product Management, Engineering and Services to ensure direction alignment, program timeline, adjust plan, and ensure customer outreach regarding a platform-wide impact in a regulated industry

  • Build out the individual components in design prototyping tool and train design team on usage

  • Establish information hierarchy model and documentation, with designed page templates for each layer maintained in design prototyping tool

  • Publish the interface guide with defined information architecture, component use cases and their interaction behaviors, and page templates to expedite future design

  • Write and revise the functional specifications for all components, ensuring clarity of meaning with Engineering team and test cases needed with Quality team

  • Act as design liaison and subject matter expert in collaborative team scrums across company to ensure understanding of new design system and it’s usage

  • Approve coded components

Solution

  • Describe the final product or service design in detail, including its key features and functionality.

  • Explain how your design addresses the needs of your target users and solves the problem you identified in the introduction.

Outcomes

  • Discuss the positive impact that your design has had on users, businesses, or other stakeholders.

  • Include quantitative metrics whenever possible, such as increased user engagement, improved customer satisfaction, or increased sales.

  • Share any testimonials or feedback from users or clients about your design.

  • Summarize the key takeaways from the case study and highlight the lessons you learned.

  • Discuss any future plans or ideas for improving the product or service.