ARUP Design System

ARUP Laboratories is located in Salt Lake City, Utah, with 4,000 employees and 65 laboratories. Founded in 1984, it is affiliated with the University of Utah’s Department of Pathology and provides national research and reference lab services.

The ARUP Design System creates standards based on quantitative and qualitative data and unifies ARUP’s brand using design thinking.

ARUP Design System - Desktop & Mobile

Project

ARUP Laboratories has numerous web development teams working on different and concurrent projects. This has caused repeat development on similar design patterns and product components, resulting in slowdowns and inconsistencies in delivered products.

Solutions

I collaborated with product managers, IT web developers, other UX and UI designers to create a design system of reusable code, common design patterns, and shared design language. With the design system, we can work more efficiently while adhering to a consistent design vision.

Roles

  • User research and testing
  • Design workshops and reviews
  • High-fidelity prototypes
  • CSS, HTML, and JavaScript coding
  • Drupal theming and development

Design Process

Design Process

My design process is closely aligned with the Nelson Norman Group’s UX training which I have taken part in. At every step of my design process, I keep the users at the forefront of my thoughts, empathizing with their experiences and perspectives. I advocate for the user’s point of view, especially in terms of accessibility standards and inclusive design practices.

It is also important to gain a thorough understanding of the scope of the project and business goals. During the initial discovery phases, I met with project stakeholders to understand the requirements to successfully complete the project. I then collaborated with other designers to perform user research, defined objectives, and strategized with insights from research.

User Research

As a part of the ARUP Design System team, I performed user interviews and surveys to better understand how the product will be used by internal developers and designers.

The design and engineering teams gave insights on how a unified and branded design system would help them work more quickly and efficiently. The designers care deeply about creating work that reflects well on the team and the company’s brand, and the developers love that the design system can help them deploy faster with less time spent on programming specific components.

Methods Used

  • User interviews and surveys
  • Google Analytics
  • Google Optimize: A/B testing
  • CrazyEgg and Microsoft Clarity: Heatmaps, UX recordings

Prototypes

I adopted many of the similar design principles and best practices used by existing design teams, and I referenced ARUP’s redesigned website in creating components for the ARUP Design System.

ARUP Design System - Prototype
ARUP Design System - Prototype
ARUP Design System - Prototype
ARUP Design System - Prototype
ARUP Design System - Prototype
ARUP Design System - Prototype

WCAG and Accessibility

My designs followed usability and WCAG, or Web Content Accessibility Guidelines. I put colors through accessibility checking to ensure AA compliance. This is an example of the corporate brand red on a gray background.

ARUP Design System - WCAG

Project Progress

ARUP Design System

The project is complete, with the initial version currently available for internal use.

Successes of the initial design system release:

  • Decreased development time
  • Better standardization and integration between web properties
  • Improved usability and product quality