Design System Evolution - PayPal UI 0-3
The story of taking our big idea and making it real with many small steps
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.
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 teamsesign concept.
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.
