Video components
This project covers my process and solution when crafting video components for Etsy’s design system, Collage. It will give you insights as to how I design, build, and distribute scaleable patterns for web and native product teams.
The problem.
Etsy’s Design System did not support video and teams began implementing one off solutions. Our team identified the need for standardizing UI elements to provide teams with confidence, and ensure an on-brand and inclusive video experience.
Without video components we are at risk of:
❌ Unique code which is difficult to maintain
❌ Inconsistent user experiences
❌ Not vetted through brand and accessibility
❌ Delayed time to launch and more…
Vision & strategy
I completed a UX Trend Report on Video in Ecommerce. A Trend Report is a deep-dive of UX patterns, insights, and innovation into topics that impact our marketplace. Trend Reports empower us to design more intentionally, holistically, and mindfully as we approach new experiences.
This report helped me to:
✅ Identify which metrics video can influence
✅ Understand how technology is evolving to support video
✅ Get product teams interested in experimenting with video
Why now?
As humans we have a need to feel connected. While our lives remain remote in many ways, video has become a core means of engaging and bonding with people, services, and goods.
It’s a prime time to evaluate the landscape and implement intentional support because the relationship between video and e-commerce is growing and evolving. As more social and extended reality platforms become shoppable, the way in which customers consume video is shifting. This advancement, along with others, is a signal that basic video integration is table stakes.
Why Etsy?
Etsy has a unique and creative inventory of products made with care by real people. Through video, we can highlight the craftsmanship that goes into each listing.
Video will emphasize what differentiates Etsy from other e-commerce, marketplace, and social shopping platforms by connecting the dots between our one-of-a-kind products and the sellers that create it.
By opening a portal to the talented people creating Etsy’s unique inventory, we can create inspiration. This fosters a more human and personal shopping experience fulfills our mission.
Business impact
Video encourages engagement
Average visitor session duration increases by 340% on product pages featuring videos
Video supports purchase decisioning
52% of shoppers say that watching product videos makes them more confident about their purchases.Video is expected
67% of consumers look for a product video at least once when considering an online purchase.Many consumers prefer video
4x as many consumers would rather watch a product video than read a product description.
Design & implementation
Bucketing use-cases of video into two main categories and identifying the building blocks helped me to map out the variants we needed to build into our design system.
Process
✅ Capture the current state of video at Etsy
✅ Meet with product teams interested in video
✅ Identify core video components
✅ Map out the user flows and set up variants
✅ Pair with engineering on documentation
✅ Test into components
Usability of Video
When designing for video I defined two main pillars—creation and viewing. A viewing experience should provide users with context and control. Setting up the right context and control means ensuring videos have meaningful titles, that we’re showing the length, offering closed captions, obeying global and native settings, and injecting video in a moment that isn’t unexpected.
I was thinking through the building blocks for creation, considering production and optimization needs. This includes how a video is filmed and edited, where it is shared, who can view it, if they can comment or like, how the author can analyze the success of that content, and more. Keeping these building blocks in mind helps us to foster a healthier relationship with video.
Stayed Tuned…
The remainder of this project will be added soon.