Wayfair
Design System
Duration
-
January-June.2023
My Role
-
Product Design Intern
Team
-
WFDN-Transportation XD
Introduction
I’m so glad to be part of a project that started from scratch
Normally, numerous interns may find themselves assigned to projects that are already in progress or have existing context, much like my first project at Wayfair.
I felt incredibly fortunate to collaborate with my manager on a project that began from scratch, offering me a unique opportunity to see how the design project get started. And I also received a lot of meaningful things from this special experience, which was pretty fun, and learned a lot.
👥
COLLABORATION
Attended lots of meetings with different stakeholders and co-workers and sharing our opinions, insights, ideas
👩🏻💻
IMPACT
Did preliminary work and potential designs to help the team find direction towards this project
📝
LEARNING
Observed how experienced designers work on the projects at the very beginning stage
Project Context
This project is about building the new internal design system for internal platforms at Wayfair. Presently, Wayfair already possesses a design system called HomeBase meant for use by all designers across the company, regardless of whether they are working on 2C products like Wayfair's website and mobile web or internal platforms such as product order management tools.
Despite the existence of an impressive design system, our team recognizes the need to develop an internal-specific design system that offers enhanced accessibility for designers focused on internal products.
Challenges
-
Since this project is at a very early stage as the potential project for our team to get more impact, we did not have any roadmap and timeline. So how can we get started and get buy-in from stakeholders?
-
As an intern, it's not an easy thing for me to find direction for the potential project to get started, finding out what I can do and contribute is another challenge for me.
But I'm a person who loves challenges, so in order to drive and be involved in this project, I moved by understanding the project deeply, doing design system audits, creating potential designs, and receiving feedback and insights from my team and other teams, which helps my team better understand the current situation of the design system in our team and find out the way to get buy-in.
Problems
-
Internal products are inconsistent with different UI libraries/patterns.
-
Waste of design and implementation time and resources, resulting in no cost savings.
Goals
-
Centralized internal UI library/pattern from different teams into one internal design system.
Design System Audits
The best way to find out the direction to build the new internal design system is to understand its current situation and existing problems. Firstly we want to focus on web-based platforms, so I came across all the web-based platforms in our team and did design system audits to help teams understand the current situation of it.
Atomic Design Methodology
What are the user cases used in components?
As previously mentioned, the internal platform design system created various UI libraries, resulting in each team having its own set of components. Regardless of whether they are utilized for similar or distinct user cases. Centralizing these components could enhance consistency and reduce development efforts.
A vital step in achieving this centralized component solution is to compile a comprehensive summary of all the user cases used in those components. This process will let us gain insights into when, where, and how designers utilize these components so that we can improve components to meet their needs.
Components Audits Process
I reviewed all the web-based platforms within our team to summarize the list of currently utilized components. Moreover, I categorized them based on the platforms that use each component and identified the specific use cases where these components are used. This analysis enables me to determine which components are frequently utilized with less effort to create and should be given priority in the creation process.
Color/Theme, Icons and Typography Audits Process
Besides summarizing components, I also compared the color/theme, Icons, and Typography of all the web-based platforms from our team to find gaps and opportunities to centralize in one style.
Final Solution - Components (Sidebar)
-
To get started without being overwhelmed by scattered variants, simply copy and paste the component.
-
The variants offer effortless customization, allowing easy modifications as needed.
-
By implementing smart components, we can significantly enhance design consistency while simultaneously reducing development time
-
Provide a variant view that displays all the component variations as optional information. This view will serve as a helpful example, guiding designers on the available variants and demonstrating how this component can match different needs.
My impact and the next step of this project…
Although the project has a long journey ahead, I'm grateful to have played a role in its early development. Currently, as this project is in its beginning stage and my intern journey at Wayfair spans only 6 months, I won't be able to witness its full growth alongside the team.
In addition to that, our team collaborated closely with other internal design teams to identify gaps and opportunities for centralizing all internal UI libraries into a comprehensive design system. Meanwhile, my skip manager plans to prepare a compelling presentation for stakeholders, aiming to secure further support and buy-in for this project. While we acknowledge the challenges in building this internal design system, our team is determined to keep pushing forward to achieve our goal!
Reflection
Throughout this project, I've gained invaluable knowledge and experience, taking ownership of a design system audit and improving my Figma skills through the creation of smart components. However, the most remarkable aspect was learning to navigate the project without a clear roadmap and communicating with team members.
To be honest, when I was initially assigned to this project, I felt unsure about where to begin. However, I proactively sought guidance by scheduling multiple meetings with my manager to gain more insights. This experience taught me a valuable lesson: when faced with challenges, it's essential to ask questions if I get stuck. I realized the importance of seeking assistance from various individuals, regardless of their role – whether they were managers, designers, or developers. I always have insightful feedback from them which was incredibly helpful in gradually finding the right direction for my work.
So in a project that lacks a clear roadmap or is still in its early stages, stepping out of my comfort zone and engaging in discussions with others becomes a valuable way to identify gaps and discover new opportunities. Good communication and collaboration can navigate me through uncertainty to the best path forward. Don't be shy to ask questions and talk to others!
More Projects
CampGem
Streamlines property management and rental processes for landlords and tenants alike
SensiWatch
Improved and redesigned the main product's NO.1 feature, adding more flexible functionality to help different user groups work efficiently when handling emergency problems
