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.
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.
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
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