Design System Evolution - PayPal UI 0-3

The story of making a big idea real, with many small steps from zero to version 3

The challenge

Establishing a system from chaos

  • No design system or pattern library existed for PayPal experiences

  • Feature teams designed experiences in silos

  • Very little code was reused across features/teams

Iterating the system

  • Improving design libraries and documentation

  • Establishing service rituals to support teams using the system

  • Iterating styles for big product changes and Brand updates

Starting from zero

The UX design org culture was suffering

  • Teams were learning a new tool - Sketch

  • Designers worked on features, siloed by platform (web/native)

  • Poor coordination across team lines

  • Teams didn’t understand how a design system could help

Our products revealed this mess to our customers

  • Customers could see our org chart in our products

  • Lack of consistency between products and platforms eroded customer trust

  • Features were fragmented and difficult to discover

Design leaders wanted to build alignment and improve team collaboration

  • Our small team was setup with a vision to unify design org and revise its workflows

  • It was a monumental challenge to build the plane while flying

Blue sky concepts

Our first attempt was to define a future looking visual language

  • We created high definition design system concepts to compare various visual treatments

  • Designers and leaders enjoyed critiquing the work, refining concepts felt natural

  • We were energized by our first attempts to collaborate, soliciting feedback from the wider design org



What went wrong?

  • We had built a concept car, but it didn’t function as a car, it was style only.

  • Alignment in design was not enough. Product and engineering was not interested. They didn’t get value out of design ideas.

  • Without engineering support, it wasn’t a real design system, it was just a design concept.

V0 Beta - Show value instead of ideas

Pivot to practical

  • Started with a concept but then pivoted to aligning current design styles and components

  • Better to show tangible value instead of big ideas

  • To get to a future design language we had to start with a foundation based on the current reality

  • Partnered with existing code library used by several feature teams

  • Focus on consumer app and web, area with most attention from leaders



Engineering boost

  • Instead of building new code we could reuse the library and iterate the design

  • Existing momentum from the engineering team sped up our efforts

  • Now we had a foundation to build on, and value to provide to feature teams

V1 - Releasing a first iteration (2018)

Results

  • First official pattern library / design system

  • First documentation (custom site, later Confluence)

  • First code libraries: web CSS/JS, later expanded to native

  • Early tokens structure with Theo, json

Early lessons

  • System setup takes close relationship with engineering team and key leaders

  • Details are hard work, not celebrated like exiting design concepts

  • I loved the challenge of designing systems :)

My part

Starting from scratch

  • I crafted visual style and pattern concepts

  • I managed design reviews and coaching of in-house contractor staff to multiply our efforts

  • I helped prepare and deliver design work to leadership at share outs

  • I led on design library tooling efforts (Sketch, Figma)

Iterating the system

  • As the team grew we divided responsibilities for better focus

  • I led iteration of the design library files, component variants

  • Partnered with teams to build template/assembly libraries for their product areas

  • Day to day support for adopting teams on Slack channels, Office Hours

  • Led new UX employee onboarding to the DS, collaborated with UX Ops to provide design tool training and support

Evolving the team

More success = more dedicated staff

  • Upgraded to a multi-discipline "Triad" product team for greater impact on product roadmaps

  • New product owner position to lead planning, adoption, strategy efforts

  • New engineering roles for each library platform (web, iOS, Android)

  • Additional designers to scale efforts

V2 - New visual language (2020)

Product driven redesign

  • Consumer team contracted Ueno agency for a new digital wallet concept design

    • This concept became the foundation for the next version of our DS

    • Extensive app redesign Figma files provided with a skeleton library

  • Our team had to elaborate this concept into a full design system

    • Worked closely with app feature teams to identify patterns and components

    • New model: Assembly libraries provided teams templates for applying the system to their content conditions

    • New asset (icon, illustration) creation process

V3 - Rebranded (2022)

Branding changes drove our third version of our DS

  • Gretel agency work with internal Brand team to “refresh” the brand

  • New typography, colors, logos, icons, illustrations

  • Minimal changes to components

  • Special UI highlights

Reflections

Starting from scratch

  • Provide value to product teams, instead of concepts

  • Focus on most needed components for our products

  • Collaborate across team for best alignment

  • DS have many layers other than the atomic parts

Iterating the system

  • The growing team and evolving system taught me lessons in collaboration, workflow, and community support

  • The iterations refreshed my motivation to refine and improve our DS product

Let's connect :)

I can share more about this project when we meet.