Vizient Case Study - Enterprise application

The Challenge

Vizient has a diverse product suite by way of acquisitions. Hence there was no standardization of product interactions, user interface styles and interactions.

Many Products

With dozen of products operating co-dependently, one of the biggest problems Vizient's facing is the lack of standardization.

Inconsistency Interface

If every project is using a different UX toolset, with different standards, and UI patterns, the result is an inevitably disjointed experience across products.

Missing Interactions

After rounds of auditing and researching, we found out that many of Vizient products are missing basic interaction to guide user behaviors.

The Solution

We created a fully functional UI toolkit based on a customized version of Angular Material. With a standardized interface and clear documentation we were able to cut down on operational costs, all while implementing a single uniform design language.

UI Toolkit

We developed a clear and concise UI toolkit, with easy-to-follow guidelines. No more guessing "what color goes there?" or "what size was that table?”

Clear Documentation

We introduced step-by-step documentation coupled with 1:1 meetings to showcase how to apply the tool-kits to design & developments.

Design Language

We established the visual language to set a foundation and provide continuity between each product. This fosters consistency and creates an impactful brand experience.

Vizient Components for the Web

The Toolkit system includes the resources needed to create user interfaces consistent with the Vizient’s product principles, design language, and best practices. Rather than focusing on pixels, developers can focus on the application logic, while designers can focus on user experiences, interactions, and flows.

Vizient Components for the Web

Angular Material comprises a range of components which implement common interaction patterns according to the Material Design specification. Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

Leveraged by multiple applications

We were able to apply the new framework to both new and in flight Vizient products. Over a dozen different services integrated with the Toolkit through close collaboration and an established handoff process with their development team.

Style guide

Typeface

Soleto is a fresh, modern sans serif font family. Optimised for text environments it performs well at large sizes and its seven weights range evenly from Thin through to Black in both upright and italic.

Color

We worked closely with Vizient’s Marketing team to ensure their brand guidelines extended to the Toolkit library. The color system uses an organized approach to applying color to Vizient UI. In this system, a primary and a secondary color are typically selected to represent Vizient brand. Dark and light variants of each color can then be applied to the UI in different ways.

Key Learnings

This project highlighted the importance of

User-centric design

Understanding user needs and pain points is crucial for creating a platform that truly serves its audience.

Flexibility and scalability

Building a platform with the ability to adapt and grow is essential to accommodate future needs and expansion.

Community focus

A streamlined sFostering a sense of community and collaboration is key to creating a platform that truly empowers and inspires its users.ystem for donations, crowdfunding, and financial tracking was crucial.