Snatched plugin
A web plugin that helps viewers find and shop exact or similar clothing items from movies and TV shows.
Context
Early-stage startup
Timeline
4 weeks
Role
Product Designer
Deliverable
Web plugin
Tools
Figma, Notion, After Effects, Photoshop, Miro, Maze
What is Snatched?
Have you ever watched your favorite show and wondered: "Wow, that’s a cool outfit, where can I get it?". Me too.
Snatched is a web browser extension that helps streaming service viewers detect and shop exact or similar clothing items.
The idea is that users can easily find the products and improve their shopping experience, and brands gain direct access to clients interested in their specific product.
Problem
Gen Z and Millennials struggle to find and get outfits from their favorite shows, while brands are constantly looking for new ways to amplify their product visibility — we need a solution to bridge the gap.
User opportunity: design an intuitive tool that helps users find clothes seen on screen.
Business opportunity: earn a commission on referrals for relevant products.
Users
Fashion enthusiasts
Motivation: Keep up with the latest trends from mass culture.
Goal: Accurately identify and easily buy outfits seen on TV shows.
Pain: Thinks that finding clothes from TV is hard and searching for a specific item in Google is a waste of time.
Practical people
Motivation: Save time and money by streamlining the shopping process and finding inspiration in favorite content.
Goal: Easily find budget-friendly outfit alternatives.
Pain: Overwhelmed by the endless online choices, too much time and cognitive energy are needed for budget-conscious shopping.
Cosplayers
Motivation: Recreate outfits for themed events and conventions.
Goal: Discover distinct clothing items from particular iconic movies & TV shows.
Pain: Irritated by the time and effort it takes to find exact/similar outfits, especially when original items from TV shows are not available for sale.
How might we
How might we design a seamless tool that lets viewers easily identify, browse and buy clothing seen in movies and TV shows?
Design Goals
Seamless UI
We need to integrate browsing and viewing experiences by eliminating unnecessary distractions. We're aiming for a "transparent," nearly invisible interface that blends naturally into the viewing experience.
Clear on-demand user control
We want to make it easy for users to control the plugin, with a simple, accessible toggle to show or hide it as needed. This way, users can access/dismiss our tool without interrupting their main viewing experience.
Personalized search results
We need to introduce onboarding screens and simple filters to help users tailor search results to their unique goals, making sure that the user experience is optimized for their personal needs.
Prototype
I designed a high-fidelity "happy path" prototype to showcase our vision to potential investors. By focusing on this happy path, we risked overlooking alternative behaviors and edge cases, potentially leading to blaming users for errors, rather than focusing on refining our product.
However, the prototype was useful in articulating our vision to potential investors.
I conducted quick unmoderated usability testing for our existing hi-fi prototype via Maze. Users were asked to use the Snatched plugin to find a mint dress they spotted while watching an episode of Friends on Netflix.
A total of 14 users from multiple UX and fashion enthusiast communities participated in the testing.
Usability testing
Just 57% completed the task using the expected path, and only 72.4% succeeded overall.
Identified themes:
User feedback integration
Plugin icon visibility
Before: Users struggled to find the plugin's launch icon.
After: I enlarged the icon to make it more visible.
Confusing categories
Before: Users were confused by the category layout and felt lost when a single item card led to multiple product options.
After: I redesigned the UI and added labels to clearly separate the general detected item card from suggested matches.
I also added hover-based visual cues to highlight detected items, using natural mapping for easy identification.
Unclear actions
The prototype’s limited actions left users unclear about the plugin's potential capabilities, like using filters to find the dress. I added features to address this.
Filtering flexibility
Users can now sort by relevance or price and filter by size, brand, and color. There is an ability to enable saved preferences for more personalized search.
Saving search results
The Saved tab lets users bookmark items for later, reducing interruptions during watching, and skip in-app purchases, linking the items directly to e-commerce sites. This shift keeps our product focused on its main goal: make it easier to find iconic items.
Measuring impact
We developed Snatched in a unique niche at the intersection of entertainment and online shopping. A successful MVP launch could drive growth in this emerging sector, opening up new revenue opportunities.
Although Snatched wasn’t released, the key metrics I’d focus on to measure its success would be:
Onboarding completion rates
To indicate how effective the onboarding process is and determine how easy and engaging users find getting started with Snatched.
Adoption rates
To see how many users installed and used Snatched, especially since it's a new product in an emerging niche.
Conversion & click-through rates
To measure users' interest in the product and their likelihood of buying discovered clothes, thereby determining the accuracy of our suggestions.
Lessons learnt
Stay resourceful
Early-stage start-ups demand acting quickly and allocating the resources wisely. The right compromises can accelerate the success, while the wrong ones can slow or event kill it.
Validate before refining
Building a high-fidelity prototype helped us pitch to investors, but delayed essential user testing, revealing some features were unviable. Next time, I'd prioritize early validation to make sure designs meet user needs before working on details.
Communicate with purpose
Our team meetings often felt like casual chats without clear direction. We were missing key questions, like “Why this approach?” or “What’s next?”. A focus on clearer communication could have unified our vision, helped speed up progress, and build a stronger MVP.