INTRO

Marcus by Goldman Sachs

ASSOCIATE CREATIVE DIRECTOR - R/GA

In the midst of a global brand redesign, Goldman Sachs and R/GA partnered to update the Marcus Design System. This effort included consolidating multiple design systems to build a single global foundation that will inform their brand expression across products and platforms through a unified and cohesive user experience.

As a design lead on the project, my role was to make decisions about how the new brand expression would come to life across both web and mobile platforms, and oversee the building of the components and handoff to developers.

[Due to company reprioritization, this work is yet to be produced.]

Process

To start, we conducted a three-week audit to get acquainted with the existing design libraries and identify discrepancies across the three different existing libraries being used. We met and collaborated with web, iOS and Android developers from Goldman Sachs to resolve inconsistent naming patterns, identify and find solutions to update components that didn't flex with content needs, and pinpoint any components that simply were not being used in the platform that we could eliminate from our updated library.

PROBLEMS IDENTIFIED

There were a few main problems with the existing systems that we needed to solve:

Inconsistent naming conventions between designers and developers caused confusion. Example: A component called “step tracker” was also known as “progress bar” or colors names like “marcus blue” were not descriptive enough for designs to know what their role was.
Components were built in Figma in a way that hid all customizations and variants under one component. This slowed the design process down since designers would have to search fairly deep to grab what they needed. Breaking up component variants would help designers visually see the different component types.
Very similar components were design slightly differently across web and iOS creating inconsistencies for no obvious reasons.
We needed to identify any components that didn’t end up getting used on the platform. Example: A button style that included an icon on both the left and right side was in the component library but never actually used in application.

New Goldman Sachs rebrand, created by Jones Knowles Ritchie design agency

APPLYING A NEW BRAND

In addition to optimizing their existing library, we also had to create a new UI language based on the rebranding of Goldman Sachs, which was created by another agency. Building off of the updated color palette and new fonts, we began exploring how we could bring this to life on Marcus with the vision of “Accessible Luxury” acting as our north star. Creating a spectrum of approaches ranging from low-touch effort to a complete revamp, we worked with both teams to define the desired prominence of this new brand identity within the end product.

We achieved this desired 'Accessible Luxury' position through intentional applications of our warm color palette and rich, welcoming photography. This sense of modern elegance was further reinforced by dark backgrounds and product UI imagery that communicates a balance of both sophistication and approachability.

Our explorations allowed a more informed and intentional application of color and style across every element within our system. Using consistent design patterns kept universally-known elements clear and simple, which allowed them to seamlessly deliver micro-movements and animations that bring energy and sophistication into the experience.

FOUNDATIONAL ELEMNETS

A key to any successful design system depends heavily on the fundamental foundations on which every component, page template, and prototype is built on. After landing on a visual direction, foundational elements were created and set up as system elements in Figma. This included a color palette, typography stack, grids, spacing specs and icons. Our team of designs were all able to build our component library from this universal system, ensuring consistency across styling and structure.

components

Building upon the foundational system and the system audit that we performed at the start, we put together a sprint plan to design and build the 40+ components that would make up our final library. Each sprint consisted of visual design, building the component and its variants, testing, and documentation. To simplify the Figma system, we reduced the number of variants from thousands to hundreds, each built to solve a wider ranges of content needs. We’ve documented the details of every component for both developers and designers to ensure that the purpose and flexibility of each variant is easy to understand.

Outcome

Our final deliverable was one universal design system that could flex across both web and mobile platforms. Every component was built in both light mode and dark mode and rebuilt with Figma best practices in place. This resulted in a 40% reduction in build time, and an 80% reduction in file size. Our collaboration with the development team helped create one language that designers and developers could both speak, speeding up time to launch. Finally, we’ve helped Goldman Sachs launch a new company-wide rebrand across the Marcus platform, solidifying their position as a leading financial firm.

“We have much more thoughtful unification across our platforms now. This will help make our interfaces and journeys so much more consistent.”

- Goldman Sachs Design System Lead

This work was created at R/GA in the Fall of 2022 under the leadership of Leen Al-Bassam, with my team Tom Varacchi, Esther Koh, Marina Tavares, Mellina Passi, and Kate Jones.