1. Introduction

While I was assigned to the Reporting applications, I realized that the applications have not been designed with design guidelines and they have critical UI misalignments between the applications within Prime Service, especially for the Grid UI which most Prime Service applications incorporate.

Prime Service applications are part of the Marquee which is a B2B application hub. They have 30+ Prime Service applications, and each application has its own grid UI styles. The mission here is to unify all these grid UI and make them reusable and iterative.

2. Understanding the Ecosystem

The core UX team is creating GS Design System and Figma Library, UITK is the corporate engineering library for GS Design System.

Marquee is the largest B2B application hub in Goldman Sachs and is supposed to incorporate the GS Design system as much as possible.

Prime Service is a part of Marquee that consists of 30+ applications, most of which incorporate Grid UI.

GS Design System does not have comprehensive Grid UI guidelines, but UITK has a comprehensive Grid UI library based on the AG-Grid (third party) default style without design review. Marquee has its own Grid UI patterns, but Prime Service application use cases were not considered.

Current Eco System

Currently, the shared engineering library that is available for everybody to use is only UITK. However, UITK managing team is outside of the Marquee business unit and none of Marquee engineering is allowed to update/edit the library. Also, Marquee does not have an engineering library of our own so most of the Marquee applications are built with a custom code.

For the design side, even though Marquee has Design Guide for Grid UI, it has not been considered Prime Service applications’ use cases, Prime Service applications were built without design guidelines and each application designer were designing their own Grid UI, even though they are the same use cases. Which was greatly harming branding and overall user experience since most of the users are cross-application users.

Target State

The scope was to update Marquee Design Guide and Library with Prime Service use cases so that Prime Service applications will be able to have standardized Grid UI components.
Also, store all Grid UI components in UITK so engineers will not need to hunt around/create components each time, and the components will be auto-updated if necessary.

3. Scope Target UI elements

After extensive research within 30+ applications, I detected the major and minor Grid UI that needs to be aligned. These UI components currently have “the same functionalities, different UI/experience” between applications.

• Grouping

• Row Actions

• Bulk Actions

• Column Config

• Sorting

• Global Filter

• View

• Column Actions

4. What we have and what we need

After the scope, I started to review the Marquee pattern and options with Prime Service SMEs to identify if current Marquee patterns are applicable or need enhancement and variations.

Marquee Components - Good to use as it is

Marquee Components - Need enhancement / Variation

Missing Components

4.5 Global Filter User Testing

After the SME review, I received strong feedback that Global Filter is not fit Prime Service use cases, so I decided to execute comprehensive user testing.

User Testing

User testing was executed with 11 users from all three business lines. I encountered some time-constrained, so I demonstrated prototypes and did Q&A with 3-5 user groups, then users filled out the questioners in the document later.

From the testing result, I identify specific use cases that need to be supported: which are search functionalities across filter columns and options for filter-heavy applications. Also, the majority of users express that the side filter is preferable for filter option visibility.

Research Engineering Feasibility

To create a new variation of the global filter, I researched the capability of AG-Grid with engineers along with actual use cases, then sort out the necessary/feasible variations and options.

Filter UI Variations

Based on the research above, I created the UI for all data types and options:

• Text

  • Free Text

  • Single Select

  • Multi Select

• Numeric

• Calendar

Each data type will have No-Operator, Operator, and Multiple Inputs.

5. Craft missing Elements

Enhancement / New Variation

New Components

6. Design Implementation

Most of the elements will go into the Design Guide but the Library is for design utility so most of the repeat Grid UI components do not need to detailed mock-up usually, as long as showing the CTA (sort, grouping, filter, etc) is shown.

Update Marquee Design Guide

Update Marquee Figma Library

I updated the Marquee Figma Library as well:

• Added the variation to the existing components

• Created New Components: such as Side Filter, and Prime Service Action Bar for designers’ utilities.

Prime Service Grid Application Template

Since most applications have corporate grid contents, I created the template with Grid UI to accelerate the design process and make sure to use the correct components for all Prime Service Designers utilities.

7. Engineering Imprementation

Prime Service Share Repository

I worked very closely with engineers throughout the whole process of unification, and engineers took some effort to create a “Shared repository” for Prime Service applications, and store all the Grid UI components there, so that all the engineers could access it, even for the Marquee engineers.

This will accelerate the engineering process and avoid UI misalignment between applications, as well as all the UI will be able to auto-updated whenever design iteration happens.

8. Conclusion and Next Step...

For large applications in a large organization, it is very easy to spread a part in terms of user experience, since a lot of times, the business unit is not perfectly correlated with product units. So it is vital for designers and engineers to communicate with each other and have a solution and system that ties all of us together. Also to create sustainable solutions not only for the designers but for engineers is key to success.

No unification design should be the final since new applications will be launched every quarter and most of the applications will go into the iteration phase etc, so establishing a sustainable system is very critical.

I could not push the shared repository above the Prime Service this time, because of the Marquee resources and budget. Still, for the bigger picture, we will have to consider that having the shared repository at the Marquee level, or merging to UITK would be ideal if the business unit would allow it.