Component Library
Year
2024
Role
UX/ UI Designer
Team
Post-transaction at eBay
(Protections)
Building a Tailored Component Library for the Team
At eBay, I identified a critical gap in our existing Design System—it focused solely on basic components and didn’t address team-specific or flow-specific needs. Before initiating this project, I carefully reviewed existing resources from the Design System to ensure we didn’t duplicate efforts.
​
This library goes beyond design specifications. It includes:
​
-
Detailed Component Information: Comprehensive descriptions for each component.
-
Usage Guidelines: Clear instructions on when and how to use each component effectively.
-
Live Experience Examples: Demonstrations of how components function in real-world scenarios.​
​
This initiative not only streamlined the design and development process but also ensured consistency and clarity across the team’s unique flows.
Integrating Familiar Patterns for Better Usability
While developing the Protection team’s component library, I made a strategic decision to leverage elements from the existing Design System library. This ensured consistency and familiarity for anyone accessing the files, making it easier to understand and work with the components.
By aligning with established design patterns, I streamlined onboarding for new team members and reinforced a cohesive experience across eBay’s broader design ecosystem. This approach balanced customization for team-specific needs with usability for a wider audience.
Enhancing the Component Library with Essential Details
While building the Protection team’s component library, I didn’t just rely on existing Design System work. I expanded it by adding crucial details to meet eBay’s multi-platform needs, covering iOS, Android, and Web.
To make the library even more practical, I included live experience examples. These allow anyone accessing the file to quickly grab and adapt the ready-to-use mocks for their designs, saving time and ensuring consistency across projects.
This comprehensive approach ensured the library was not only user-friendly but also a valuable resource for streamlining the design process across platforms.
Adding Buyer and Seller Flows to the Component Library
To provide a comprehensive resource, I extended the Protection team’s component library by incorporating Buyer and Seller flows. These additions allow team members to understand how the components function within real-world scenarios and access the most recent mocks for reference.
By including these flows, I ensured the library not only serves as a design resource but also acts as a practical guide for teams working on related projects. This enhancement fosters a deeper understanding of the user journey and promotes consistency across designs.
