How does a large eCommerce company implement a new visual language to create a more cohesive user experience? Contributors: Jessie Rogers, Neva Corbo-Hudak, Stephanie Cenatiempo, Karissa Woodward-Hobson Over the course of a single calendar year, our experience design team went from using out-of-date sticker sheets to implementing a mature design system – enabling us to roll out a new look and feel across multiple eCommerce brands and create a new, more cohesive experience for our users. Learn how we partnered with dozens of separate product teams, measured design system adoption over time, optimized our communication model, and rebuilt our whole platform in the process.

1. From Sticker Sheet to
Mature Design System:
Improving User Experiences while Scaling an Org

2. Agenda
1. Introduction
2. Timeline to Maturity
3. Summary & Key Takeaways
4. Q&A

3. Introduction
Who we are, what we do, and why we do it.

4. Who We Are
Jessie
Rogers
Senior Content
Strategy Manager
Karissa
Woodward-Hobson
Senior Product Design
Manager
Neva
Corbo-Hudak
Product Design
Lead
Stephanie
Cenatiempo
Senior Product
Design Lead

5. Who Our Team Is
Our design system team is internally known as
Homebase, which is also the name of the design system
itself!
We are a healthy mix of product designers, content
strategists, engineers, and product managers.
We’ve found that it’s important to build a team with a
broad mix of skills and strengths:
● Leadership
● Visual Design
● UX, System Architecture,
and Tooling
● IA
● UX Writing
● User Research

6. What Our Team & System Does
Our team manages the design system on behalf of
the greater org.
We do this by providing foundational guidelines and
reusable components, styles, and patterns that can
be assembled to build any number of experiences and
applications across the Wayfair universe!
In short, Homebase enables teams to ship better
products faster.

7. Who Our Team & System Supports
The Homebase Design System is used by the Storefront
org, which is made of of several teams (called pods) that
focus on a specific site pages and experiences.

8. Timeline to Maturity
And how we actually did the darned thing.

9. Assess &
Take Stock
Pre 2019 2019, Q1 2020, Q1
2019, Q2 2019, Q3 2019, Q4
Establish a
Strong POV
Communicate &
Educate
Pursue
Partnerships
Make it
Meaningful
Spread Your
Wings & Fly

10. Pre 2019 2019, Q1 2020, Q1
2019, Q2 2019, Q3 2019, Q4
● Code and design assets were maintained separately
and often did not match.
● UI was outdated and lacking a clear, consistent vision.
● Design assets were formatted as a sticker sheet with
high maintenance and poor versioning control.
● Lack of dedicated resources and true ownership meant
loose governance.
Assess & Take Stock

11. Pre 2019 2019, Q1 2020, Q1
2019, Q2 2019, Q3 2019, Q4
● Homebase team was formally established as part of
the Wayfair Storefront org.
● Designers and engineers united to establish Homebase
as the single source of truth.
● We paused new feature work to build a strong foundations
● We hit the campaign trail to get high-level buy-in
and support.
Establish a Strong POV

12. Establish a Strong POV:
How’d We Actually Do It!?
Set a Foundation
Define and publish design principles and
governance process
Establish version control, distribution, and
transparency
Update design assets to reflect code assets
and establish a shared taxonomy and naming
Create usage guidelines for all existing
components
Make accessibility a priority

13. Establish a Strong POV:
How’d We Actually Do It!?
Set a Foundation
Define and publish design principles and
governance process
Establish version control, distribution, and
transparency
Update design assets to reflect code assets
and establish a shared taxonomy and naming
Create usage guidelines for all existing
components
Make accessibility a priority

14. Establish a Strong POV:
How’d We Actually Do It!?
Set a Foundation
Define and publish design principles and
governance process
Establish version control, distribution, and
transparency
Update design assets to reflect code assets
and establish a shared taxonomy and naming
Create usage guidelines for all existing
components
Make accessibility a priority

15. Establish a Strong POV:
How’d We Actually Do It!?
Set a Foundation
Define and publish design principles and
governance process
Establish version control, distribution, and
transparency
Update design assets to reflect code assets
and establish a shared taxonomy and naming
Create usage guidelines for all existing
components
Make accessibility a priority

16. Establish a Strong POV:
How’d We Actually Do It!?
Set a Foundation
Define and publish design principles and
governance process
Establish version control, distribution, and
transparency
Update design assets to reflect code assets
and establish a shared taxonomy and naming
Create usage guidelines for all existing
components
Make accessibility a priority

17. Identify key stakeholders – C-suite, VPs, PMs
Make clear requests – Provide specific results
Have an incentive! – Build excitement toward
a shared goal
Establish a Strong POV:
How’d We Actually Do It!?
Make a Case for Leadership Buy-In

18. Cultural change is really, really hard
Expect a lot of ups and downs
It’s challenging because it’s important
Establish a Strong POV:
How’d We Actually Do It!?
Don’t Give Up!!!

19. ● Created a multi-channel communication plan.
● Piloted a three-part onboarding program.
● Kicked off a series of workshops and briefings to educate
the broader org on the foundations of our system.
● Created a measurement framework and rolled it out across the
org.
Communicate & Educate
Pre 2019 2019, Q1 2020, Q1
2019, Q2 2019, Q3 2019, Q4

20. Newsletter – A monthly email outlining everything
done the previous month and our plans for the
next.
Release notes – Biweekly notices about system
upgrades, additions, and bug fixes.
Slack – A space for real-time updates.
Show & tell – Biweekly presentations to
the broader Experience Design team.
Communicate & Educate:
How’d We Actually Do It!?
Create a Comms Plan

21. Communicate & Educate:
How’d We Actually Do It!?
Create a Comms Plan
Newsletter – A monthly email outlining everything
done the previous month and our plans for the
next.
Release notes – Biweekly notices about system
upgrades, additions, and bug fixes.
Slack – A space for real-time updates.
Show & tell – Biweekly presentations to
the broader Experience Design team.

22. Communicate & Educate:
How’d We Actually Do It!?
Create a Comms Plan
Newsletter – A monthly email outlining everything
done the previous month and our plans for the
next.
Release notes – Biweekly notices about system
upgrades, additions, and bug fixes.
Slack – A space for real-time updates.
Show & tell – Biweekly presentations to
the broader Experience Design team.

23. Communicate & Educate:
How’d We Actually Do It!?
Create a Comms Plan
Newsletter – A monthly email outlining everything
done the previous month and our plans for the
next.
Release notes – Biweekly notices about system
upgrades, additions, and bug fixes.
Slack – A space for real-time updates.
Show & tell – Biweekly presentations to
broader Experience Design team.

24. Communicate & Educate:
How’d We Actually Do It!?
Outreach
Onboarding – A presentation series that
explains the what and how of Homebase to
new employees.
Briefings – Educational talks aimed at
specific partners to raise awareness of
principles or updates to the design system.
Workshops – Hands-on programming to
teach systems principles or to quickly gather
insights and feedback.

25. Onboarding – A presentation series that
explains the what and how of Homebase to
new employees
Briefings – Educational talks aimed at
specific partners to raise awareness of
principles or updates to the design system.
Workshops – Hands-on programming to
teach systems principles or to quickly gather
insights and feedback.
Communicate & Educate:
How’d We Actually Do It!?
Outreach

26. Communicate & Educate:
How’d We Actually Do It!?
Outreach
Onboarding – A presentation series that
explains the what and how of Homebase to
new employees
Briefings – Educational talks aimed at
specific partners to raise awareness of
principles or updates to the design system.
Workshops – Hands-on programming to
teach systems principles or to quickly gather
insights and feedback

27. Measuring adoption – Design system
adoption metrics were shared to the entire
Storefront organization.
Celebrate your successes! – The short-term
benefit of design system adoption enabled
Wayfair to roll out a massive redesign to all of
the sites that we support.
Long-term impact of adoption – Adoption of
the design system resulted in less CSS
commits over time and reduced the effort
required to build an MVP.
Communicate & Educate:
How’d We Actually Do It!?
Measurement Framework

28. Measuring adoption – Design system
adoption metrics were shared to the entire
Storefront organization.
Celebrate your successes! – The short-term
benefit of design system adoption enabled
Wayfair to roll out a massive redesign to all of
the sites that we support.
Long-term impact of adoption – Adoption of
the design system resulted in less CSS
commits over time and reduced the effort
required to build an MVP.
Communicate & Educate:
How’d We Actually Do It!?
Measurement Framework

29. Measuring adoption – Design system
adoption metrics were shared to the entire
Storefront organization
Celebrate your successes! – The short term
benefit of design system adoption enabled
Wayfair to roll out a massive redesign to all of
the sites that we support
Long-term impact of adoption – Adoption
of the design system resulted in less CSS
commits over time and reduced the effort
required to build an MVP.
Communicate & Educate:
How’d We Actually Do It!?
Measurement Framework
GitHub CSS commits over time as the adoption rate of the Homebase
design system increased.

30. ● Embraced early adopters and power users.
● Held layout assessments, parity measurements,
and co-creation sessions.
● Scheduled weekly office hours.
● Created Ambassadors programs for both design and engineering.
● Introduced Study Abroad program.
Pursue Partnerships
Pre 2019 2019, Q1 2020, Q1
2019, Q2 2019, Q3 2019, Q4

31. Find partners to use and
evangelize the system.
Focus on successes.
Share and celebrate wins!
Pursue Partnerships:
How’d We Actually Do It!?
Embrace Early Adopters
& Power Users

32. Layout/parity assessments – Opt-in layout
assessments with pods to measure design
system adoption.
Co-creation sessions – Hands-on workshops
to create a single, consistent user experience.
Pursue Partnerships:
How’d We Actually Do It!?
Collaboration Sessions

33. Layout/parity assessments – Opt-in layout
assessments with pods to measure design
system adoption.
Co-creation sessions – Hands-on workshops
to create a single, consistent user experience.
Pursue Partnerships:
How’d We Actually Do It!?
Collaboration Sessions

34. Slack help channel – for quick questions.
Office hours – Brief conversations about system
contributions or usage.
Study abroad – Join Homebase for 1–4 weeks to
contribute to the backlog or work on a proposal.
Visual Ambassadors – A cross-functional group
celebrating and supporting great design.
Engineering Ambassadors – Engineering
partners who provide feedback, contribute, and
advocate for Homebase.
Pursue Partnerships:
How’d We Actually Do It!?
Create a Continuous
Feedback Cycle

35. Slack help channel – for quick questions.
Office hours – Brief conversations about system
contributions or usage.
Study abroad – Join Homebase for 1–4 weeks to
contribute to the backlog or work on a proposal.
Visual Ambassadors – A cross-functional group
celebrating and supporting great design.
Engineering Ambassadors – Engineering
partners who provide feedback, contribute, and
advocate for Homebase.
Pursue Partnerships:
How’d We Actually Do It!?
Create a Continuous
Feedback Cycle

36. Slack help channel – for quick questions.
Office hours – Brief conversations about system
contributions or usage.
Study abroad – Join Homebase for 1–4 weeks to
contribute to the backlog or work on a proposal.
Visual Ambassadors – A cross-functional group
celebrating and supporting great design.
Engineering Ambassadors – Engineering
partners who provide feedback, contribute, and
advocate for Homebase.
Pursue Partnerships:
How’d We Actually Do It!?
Create a Continuous
Feedback Cycle

37. Slack help channel – for quick questions.
Office hours – Brief conversations about system
contributions or usage.
Study abroad – Join Homebase for 1–4 weeks to
contribute to the backlog or work on a proposal.
Visual Ambassadors – A cross-functional group
celebrating and supporting great design.
Engineering Ambassadors – Engineering
partners who provide feedback, contribute, and
advocate for Homebase.
Pursue Partnerships:
How’d We Actually Do It!?
Create a Continuous
Feedback Cycle

38. Slack help channel – for quick questions.
Office hours – Brief conversations about system
contributions or usage.
Study abroad – Join Homebase for 1–4 weeks to
contribute to the backlog or work on a proposal.
Visual Ambassadors – A cross-functional group
celebrating and supporting great design.
Engineering Ambassadors – Engineering
partners who provide feedback, contribute, and
advocate for Homebase.
Pursue Partnerships:
How’d We Actually Do It!?
Create a Continuous
Feedback Cycle

39. Pre 2019 2019, Q1 2020, Q1
2019, Q2 2019, Q3 2019, Q4
● Defined our Visual Language to add meaning and
intent to our UI.
● Created scalable systems for UI elements with
multi-brand/geo considerations.
● Optimized UI to support accessibility at the
component and system level.
Make It Meaningful

40. Introduced the Feng Shui Philosophy with
an emphasis on making meaningful design
decisions.
Developed guiding principles to support
our new philosophy.
Published Visual Language guidelines for
each design element to clearly document the
reasoning and intent behind our decisions.
Make It Meaningful:
How’d We Actually Do It!?
Defined Our Visual
Language

41. Introduced the Feng Shui Philosophy with
an emphasis on making meaningful design
decisions.
Developed guiding principles to support
our new philosophy.
Published Visual Language guidelines for
each design element to clearly document the
reasoning and intent behind our decisions.
Make It Meaningful:
How’d We Actually Do It!?
Defined Our Visual
Language
Clutter-Free Approachable
Scalable Memorable

42. Introduced the Feng Shui Philosophy with
an emphasis on making meaningful design
decisions.
Developed guiding principles to support
our new philosophy.
Published Visual Language guidelines for
each design element to clearly document the
reasoning and intent behind our decisions.
Make It Meaningful:
How’d We Actually Do It!?
Defined Our Visual
Language
Before
After

43. Introduced the Feng Shui Philosophy with
an emphasis on making meaningful design
decisions.
Developed guiding principles to support
our new philosophy.
Published Visual Language guidelines for
each design element to clearly document the
reasoning and intent behind our decisions.
Make It Meaningful:
How’d We Actually Do It!?
Defined Our Visual
Language
Before
After

44. Introduced the Feng Shui Philosophy with
an emphasis on making meaningful design
decisions.
Developed guiding principles to support
our new philosophy.
Published Visual Language guidelines for
each design element to clearly document the
reasoning and intent behind our decisions.
Make It Meaningful:
How’d We Actually Do It!?
Defined Our Visual
Language

45. Instituted universal naming and sizing for UI
elements across brands for easier code
maintenance.
Enabled automation via a modular type scale.
Allowed for better regulation of color usage
with a new color scale.
Make It Meaningful:
How’d We Actually Do It!?
Created Systems for
Scalability

46. Make It Meaningful:
How’d We Actually Do It!?
Created Systems for
Scalability
Instituted universal naming and sizing for UI
elements across brands for easier code
maintenance.
Enabled automation via a modular type scale.
Allowed for better regulation of color usage
with a new color scale.

47. Make It Meaningful:
How’d We Actually Do It!?
Created Systems for
Scalability
Instituted universal naming and sizing for UI
elements across brands for easier code
maintenance.
Enabled automation via a modular type scale.
Allowed for better regulation of color usage
with a new color scale.

48. Make It Meaningful:
How’d We Actually Do It!?
Created Systems for
Scalability
Instituted universal naming and sizing for UI
elements across brands for easier code
maintenance.
Enabled automation via a modular type scale.
Allowed for better regulation of color usage
with a new color scale.

49. Make It Meaningful:
How’d We Actually Do It!?
Created Systems for
Scalability
Instituted universal naming and sizing for UI
elements across brands for easier code
maintenance.
Enabled automation via a modular type scale.
Allowed for better regulation of color usage
with a new color scale.

50. Make It Meaningful:
How’d We Actually Do It!?
Pre 2019
Created Systems for
Scalability
Instituted universal naming and sizing for UI
elements across brands for easier code
maintenance.
Enabled automation via a modular type scale.
Allowed for better regulation of color usage
with a new color scale.

51. Make It Meaningful:
How’d We Actually Do It!?
Created Systems for
Scalability
Instituted universal naming and sizing for UI
elements across brands for easier code
maintenance.
Enabled automation via a modular type scale.
Allowed for better regulation of color usage
with a new color scale.

52. Pursued high accessibility standard for
component states.
Published accessibility guidelines at system
and component level.
Supported accessibility measurement efforts
and created channels for feedback.
Make It Meaningful:
How’d We Actually Do It!?
Supported Accessibility

53. Pursued high accessibility standard for
component states.
Published accessibility guidelines at system
and component level.
Supported accessibility measurement efforts
and created channels for feedback.
Make It Meaningful:
How’d We Actually Do It!?
Supported Accessibility

54. Pursued high accessibility standard for
component states.
Published accessibility guidelines at system
and component level.
Supported accessibility measurement efforts
and created channels for feedback.
Make It Meaningful:
How’d We Actually Do It!?
Supported Accessibility

55. Pre 2019 2019, Q1 2020, Q1
2019, Q2 2019, Q3 2019, Q4
● Rolled out and celebrated the site redesign
● Upgraded the Homebase experience.
● Had a moment for reflection.
● ...What are we going to do next!?
Spread Your Wings & Fly

56. Strong communication and collaboration
allowed us to roll out the redesign with full
support and no surprises.
High parity allowed us to make large,
sweeping changes site wide, across 5 brands
and 4 geos, solely through updates to the
system.
With a “no harm” approach, we rolled out
with neutral to positive impact on site
metrics.
Celebrated with sticker swag and custom
cupcakes!
Spread Your Wings & Fly:
How’d We Actually Do It!?
Rolled Out Site Redesign

57. Spread Your Wings & Fly:
How’d We Actually Do It!?

58. Spread Your Wings & Fly:
How’d We Actually Do It!?

59. Released a new version that represented true
collaboration between design & engineering,
with an advanced IA.
Now host code assets, documentation, and
guidelines for ~80 components.
Published a robust set of guidelines for
accessibility, content writing, and our visual
language.
Supporting tooling experiences.
Spread Your Wings & Fly:
How’d We Actually Do It!?
Upgraded the Homebase
Experience
~ 2017

60. Released a new version that represented true
collaboration between design & engineering,
with an advanced IA.
Now host code assets, documentation, and
guidelines for ~80 components.
Published a robust set of guidelines for
accessibility, content writing, and our visual
language.
Supporting tooling experiences.
Spread Your Wings & Fly:
How’d We Actually Do It!?
Upgraded the Homebase
Experience

61. Released a new version that represented true
collaboration between design & engineering,
with an advanced IA.
Now host code assets, documentation, and
guidelines for ~80 components.
Published a robust set of guidelines for
accessibility, content writing, and our visual
language.
Supporting tooling experiences.
Spread Your Wings & Fly:
How’d We Actually Do It!?
Upgraded the Homebase
Experience

62. Released a new version that represented true
collaboration between design & engineering,
with an advanced IA.
Now host code assets, documentation, and
guidelines for ~80 components.
Published a robust set of guidelines for
accessibility, content writing, and our visual
language.
Supporting tooling experiences.
Spread Your Wings & Fly:
How’d We Actually Do It!?
Upgraded the Homebase
Experience

63. Released a new version that represented true
collaboration between design & engineering,
with an advanced IA.
Now host code assets, documentation, and
guidelines for ~80 components.
Published a robust set of guidelines for
accessibility, content writing, and our visual
language.
Supporting tooling experiences.
Spread Your Wings & Fly:
How’d We Actually Do It!?
Upgraded the Homebase
Experience

64. And the cycle begins anew...
Tracked maturity through an annual
Homebase Survey.
Took stock of what went well and areas of
opportunity.
Spread Your Wings & Fly:
How’d We Actually Do It!?
Have a Moment to Reflect

65. We’re joining forces with our Enterprise
partners and evolving our system even more!
Can we build a single system that’s smart
enough to support all of our experiences?
We’ll let you know at next year’s UXPA 😉
Spread Your Wings & Fly:
How’d We Actually Do It!?
What’s Next?!

66. Summary & Key Takeaways
Incase we lost you at some point or you just weren’t paying attention until now...

67. Assess & Take Stock
● How are your teams currently working?
● Do you have a single source of truth?
● Do you have the dedicated resources needed
to efficiently maintain and grow a system?

68. Establish a Strong POV
● Set a strong foundation
● Get that top-down support
● Mentally prepare for the ups and downs

69. Communicate & Educate
● Create a solid comms plan
● Educate the broader org through
outreach programs
● Create a measurement framework

70. Pursue Partnerships
● Embrace and celebrate early adopters
and power users
● Collaborate with the broader org –
systems belong to everyone!
● Create channels for continuous feedback

71. Make It Meaningful
● Define a clear direction for your Visual
Language and UI
● Build a smart, scalable system that’s
easy to maintain
● Design inclusively and build your system
to support accessibility

72. Spread Your Wings & Fly
● Celebrate your accomplishments!
● Reflect on your journey. What went well?
What could have gone better?
● The work is never done!
Time to plan for what’s next

73. Assess &
Take Stock
Pre 2019 2019, Q1 2020, Q1
2019, Q2 2019, Q3 2019, Q4
Establish a
Strong POV
Communicate &
Educate
Pursue
Partnerships
Make it
Meaningful
Spread Your
Wings & Fly

74. The Remote
Design Sprint
Toolkit
UXPA Boston 2020
Norman Wozniak
Lauren Lamperski
Emily Thompson

75. Q&A
Thanks for sticking with us on a Friday afternoon!