While each digital product in the expansive Mercedes-Benz USA ecosystem functioned well individually, the broader user journey was inconsistent in navigation, interface and branding. With 20+ digital touchpoints attracting millions of monthly visitors, unifying the experience became critical. As a seasoned product designer well-versed in implementing cohesive design systems, I was brought in to spearhead this initiative for Mercedes-Benz USA.

My role was to conduct in-depth analysis of the pain points, develop an overarching design language, components and guidelines, as well as collaborate with development teams across the organization on adopting and applying the design system effectively. The goal was to provide visual and UI consistency so that regardless of which platform or app a user engages with, there is a streamlined Mercedes-Benz digital experience.

I developed a three-phase approach to build Mercedes-Benz USA's design system. Initially, I audited digital products to refine UI patterns and establish design principles. Next, I created a centralized Sketch library with Abstract for version control and a token library for better designer-developer collaboration. The final phase involved developing an online style guide with InVision DSM integration, establishing workflows, and ensuring system scalability. This approach led to a cohesive, adaptable design system for Mercedes-Benz's digital needs.

I started with a thorough audit of Mercedes-Benz's digital assets, revealing complexities and inconsistencies in design elements. To streamline, I narrowed down thousands of UI components to essential, accessible color palettes, flexible fonts, and structured layouts. Guided by industry insights, I established cohesive design fundamentals like an 8px grid, modular typography, and WCAG-compliant colors, creating a versatile and durable foundation for Mercedes-Benz's evolving digital ecosystem.

Armed with the core foundations of typography, color, grid and iconography, I set out to centralize Mercedes-Benz's UI language into an accessible, reusable component library using Sketch.

Leveraging Sketch's robust symbol and shared style systems, I structured a master file with all elements numerically indexed and annotated for ease of update management down the line. This included categorizing atomic elements like color palettes, text styles and spacing presets.

I then mapped these fundamentals to overhaul complex components at the molecular level - input fields, buttons, dropdowns, accordions. This addressed inconsistencies and allowed syncing interactive states, validating accessibility needs like color contrast were met.

With the atoms and molecules shored up, higher order templated components fell into place - section headers and footers, cards and flyouts, navigation systems, data tables. Anything repetitive across products and services could now stem from this unified library of 150+ symbols.

The end result is a living UI library - cloud-synced for our distributed digital product teams to build upon with speed and consistency. Streamlining these atomic to molecular to compositional building blocks brought Mercedes-Benz one step closer to an optimized user experience.

To truly unify Mercedes-Benz's distributed teams, I needed to tightly couple our design language with development. Instrumental to this was implementing InVision's Design System Manager (DSM).

With UI components already centralized in a Sketch library, I systematically ported these over to DSM - organizing symbols and presets based on atomic design principles. This created a single source bridging critical data like hex codes, spacing rules and type scales.

I worked closely with dev to sync DSM APIs with their corresponding Storybook UI tokens. This meant whenever designers retrieved Mercedes-styled buttons or cards from DSM, developers could in parallel access the matched React code.The end-to-end integration enabled powerful workflows - designers can drag-and-drop Mercedes components right from Sketch while developers receive all necessary props and styles automatically synced via DSM. Rapid prototyping fueling aligned implementation.

Getting the team rallied around this unified design-dev ecosystem was pivotal. I focused heavily not just on the technical pipeline, but cultivating the collaboration and communication rhythms to support it long-term. Equipped with a scalable system and aligned stakeholders, Mercedes-Benz’s digital experiences can continue evolving while remaining on-brand.

To extend the design system beyond developers and designers, crafting a comprehensive yet understandable style guide was essential. This resource needed to provide clear direction across fundamentals like color, typography and icons while also guiding diverse users on tone of voice, imagery rules, animation, and more.

Seeking a solution to publish standards quickly without engineering headaches, I built the style guide as a custom site using Webflow CMS. This empowered me to translate our fledgling guidelines into an interactive hub for all contributors – with the guardrails to evolve the content over time without reliance on dev resources.

Collaborating closely with our talented Art Director, I worked to structure our research and principles into a sleek, cohesive online brand book. With their visionary designs in hand, I focused fully on systematically constructing pages, laying in navigational logic, and wiring up widgets and reusable elements using Webflow’s no-code environment.

The finished result is an immersive living hub scaled for any team member to dive into specifics like logo usage and harmonious type scales or easily retrieve the assets and code snippets needed to apply the standards first-hand. This self-serve portal removes friction for distributed teams by bringing Mercedes-Benz branding guardrails and resources together in one authoritative, accessible place – primed to grow as our ecosystem does.

Leading the design system initiative for Mercedes-Benz USA was deeply rewarding. The fragmented digital landscape was hindered by siloed teams and outdated legacy systems. Through collaboration, research and standardization, we transformed disconnected experiences into a unified digital brand.

As a product designer, my role involved much more than UI deliverables. By facilitating transparency between teams, I fostered processes and tools to keep cross-functional harmony centered on consumer needs as we scale. There is always room for improvement, but the system and spirit forged have equipped Mercedes-Benz to build consistently enjoyable journeys moving forward.