Revolutionizing E-Commerce
Designing Interactive Shoppable Videos for Seamless Shopping Experiences
Introduction
Problem
Online shoppers often struggle to connect with products in a meaningful way, leading to low engagement and conversion rates. Traditional product videos are passive and don’t allow users to interact or purchase directly.
Goal
Design an interactive shoppable video platform that allows users to explore, engage, and purchase products seamlessly while watching videos.
Team
Role
Timeline
Problem Statement
Current Pain Points
72% of users abandon product videos before completion
Source: Wyzowl 2023 Video Marketing Statistics
Only 15% of users click through to product pages after watching a video
Source: Shopify 2023 E-Commerce Trends
Lack of interactivity in videos leads to missed opportunities for engagement and sales.
Opportunity
Create a solution that bridges the gap between content consumption and purchasing, increasing engagement and conversion rates.
Research and Discovery
User Research
- Conducted user interviews with 50 online shoppers to understand their video-watching habits and pain points.
- Key Insight: 68% of users wanted to learn more about products featured in videos without leaving the video player.
- Analyzed heatmaps and click-through rates on existing product videos to identify drop-off points.
Competitor Analysis
To understand the competitive landscape, we analyzed platforms like Firework, GoTolstoy, and other emerging players in the interactive shoppable video space. Here’s what we found:
Direct Competitors
Firework
Strengths
- High-quality, short-form video content optimized for engagement.
- Seamless integration with e-commerce platforms like Shopify and BigCommerce.
- Interactive features like polls, quizzes, and clickable hotspots.
Weaknesses
- Limited customization options for brands.
- Higher pricing tiers may not be accessible to smaller businesses.
- Overwhelming UI with too many interactive elements at once.
Goltolstoy
Strengths
- Focus on storytelling through shoppable videos.
- Strong analytics dashboard for tracking user engagement and conversions.
- Easy-to-use editor for creating interactive videos.
Weaknesses
- Limited support for real-time product updates (e.g., pricing, stock).
- Less intuitive mobile experience compared to desktop.
- Fewer integrations with third-party e-commerce tools.
Key Insights from Competitor Analysis
Gap in the Market
- Most competitors focus on short-form content or ads, leaving a gap for long-form, immersive shoppable videos.
- Lack of real-time product updates (e.g., pricing, stock) in most platforms.
- Limited personalization options for users based on their preferences or behavior.
Opportunity
- Build a platform that combines the strengths of Firework (interactivity) and Goltolstoy (storytelling) while addressing their weaknesses.
- Focus on real-time data integration, seamless mobile experiences, and customizable branding options.
Design Process
Ideation
Leveraged insights from competitor analysis to prioritize:
- Real-time product updates (e.g., pricing, stock levels).
- A clean, intuitive UI that avoids overwhelming users.
- Customizable branding options for businesses.
User Journey Map
Mapped the current journey of a user watching a product video, highlighting pain points like:
- Difficulty finding product details.
- Frustration with redirects to external product pages.
- Lack of trust due to unclear pricing and availability.
Wireframes
- Dynamic hotspots that appear only when relevant (avoiding clutter).
- A collapsible sidebar for product details, inspired by Goltolstoy’s storytelling approach.
- Real-time pricing and stock indicators, addressing a gap in competitors’ offerings.
Design System
- Typography: Inter for a modern, clean look (inspired by Firework’s minimalist design).
- Colors: Brand-specific colors with a focus on accessibility (addressing Goltolstoy’s lack of customization).
- Icons: Simple, intuitive icons for navigation and interactivity (avoiding the clutter seen in Firework).
Responsive Design
- Ensured the design worked seamlessly across devices (desktop, tablet, and mobile).
- Mobile-specific features: Swipeable product cards and a bottom sheet for product details.
Testing and Iteration
Usability Testing
Conducted A/B testing with 100 users to compare the interactive videos against traditional product videos.
Results
45% increase in engagement (users interacted with hotspots).
30% higher click-through rate to product pages.
25% increase in add-to-cart actions.
Feedback
- Users loved the seamless experience but requested clearer pricing and availability indicators.
- Iterated by adding real-time stock levels and price tags to the product hotspots.
Conducted A/B testing with 100 users to compare our platform against Firework and Goltolstoy.
Results
50% higher engagement compared to Firework (users found our UI less overwhelming).
40% higher conversion rates compared to Goltolstoy (users appreciated real-time updates).
35% of users preferred our personalized recommendations over competitors’ generic suggestions.
Feedback
- Users loved the real-time updates but requested more customization options for brands.
- Iterated by adding more personalisation options like uploading brand fonts, adjusting corner radius, text alignment and more.
Solution
Launched the interactive shoppable video platform that combines the best of Firework and Goltolstoy while addressing their weaknesses:
Personalized recommendations.
Customizable branding options.
Dynamic product hotspots.
Real-time pricing and stock updates.
One-click purchasing within the video player.
Upload Videos – Start with Your Content
Brands begin by uploading/fetching their existing marketing videos, product demos, or social content. The dashboard supports multiple formats and resolutions, ensuring high-quality playback across all devices.
Key Features:
Drag-and-drop upload interface
Auto-transcoding for optimized streaming
Bulk upload support for large-scale campaigns
Tag Products - Make Content Shoppable
Brands can directly sync shopify or any other store to import their SKUs. Once the store is connected, products can be tagged to the content.
Key Features:
Auto-sync of products, their pricing and offers.
Seamless checkout and cart management
Add Interactive Elements – Enhance Engagement
Brands can increase engagement by layering interactive components on top of the video to guide viewers toward a purchase decision. These elements include shoppable CTAs, quizzes, ratings and polls.
Key Features:
Clickable hotspots with dynamic product cards
Custom overlays (discounts, promotions, ‘Add to Cart’ buttons)
Live engagement tools like polls & quizzes
Create Site Section – Embed Seamlessly
Once the videos are ready, brands would be able to create a section and embed the section to their website and/or app.
Key Features:
Complete customisation options to match brand aesthetics
Responsive design for a seamless experience
No-Code integration
Publish – Go Live & Track Performance
The final step is to publish the section, making it instantly available to users. Brands can track engagement metrics, measure conversions, and optimize performance through real-time analytics.
Key Features:
Real-time engagement & click-through tracking
Auto-update the changes from dashboard to live sections
Product Material created by me:
Impact
Brands Successfully Onboarded & Uses The Product
and more
Outcomes
More than 120 brands are onboarded successfully and are using the products with ease. And with Self Serve Model in place, we have more organic brands getting onboarded as we speak.
Engagement
65% of users interacted with product hotspots
(compared to 50% on Firework)
Conversion
25% increase in sales from video traffic
(compared to 15% on Goltolstoy)
Retention
45% of users returned to watch more shoppable videos
(compared to 30% on competitors)
Conclusion
- The interactive shoppable video platform successfully bridged the gap between content and commerce, delivering a seamless and engaging shopping experience.
- By addressing user pain points and leveraging data-driven design, we achieved significant improvements in engagement, conversion, and retention.
Next Steps
Automated product recognition and product tagging for brands
Explore AI-driven personalization to recommend products based on user behavior within videos.