Video Lookbooks
Bridging the gap between content and commerce - Making mobile video content seamlessly shoppable
Role
Product Designer
Company
Highstreet Mobile
Platforms
iOS & Android
Year
2018
The modern fashion and lifestyle customer lives on mobile, consuming rich, aspirational content across social platforms. For our high-end retailer clients, the traditional e-commerce mobile app experience often failed to capitalize on this trend. While brands produced beautiful video content—such as seasonal campaigns and styled 'Lookbooks'—these assets lived outside the transactional loop, forcing users to manually search for items after being inspired. Highstreet Mobile's platform was designed to deliver a modern, native experience. The Video Lookbooks feature was conceived as the next step in content-driven commerce: integrating high-fidelity video directly into the shopping flow, turning passive viewing into an immediate, frictionless path to purchase.
The Challenge: Inspiration vs. Transaction
When approaching the project, the fundamental problem was the friction between inspiration and conversion. Our initial discovery process revealed a clear disconnect:
Content Engagement: Video completion rates were very high. According to data published by Invesp (citing various studies), a consumer who views a product video is up to 144% more likely to add that product to their cart.
Transaction Rate: Conversion rates from the generic ad-like videos was low, because it required users to go to the category and manually search for the product.
User Insight: Users who viewed branded video content were highly motivated, but interruption of a manual search killed momentum. They didn't want to leave the aspirational immersive experience just to shop.
Goals
Frictionless Commerce | Immersive Experience | Scalable Integration |
|---|---|---|
Make videos instantly shoppable and decrease the total time needed for adding products to the cart, without blocking immersive content. | Maintain the premium, full-screen brand immersion, ensuring the UI supports, rather than distracts, from the content. | Design a backoffice functionality that could easily be managed by brand merchandisers and seamlessly deployed across dozens of locales. |
The Design Process
Context, Control, and Conversion
My initial research focused heavily on emerging social commerce trends. I studied platforms like Instagram Shopping and TikTok to understand user expectations for dynamic, shoppable videos. My approach centered on designing an interaction model that made the shopping experience feel like a natural extension of the viewing experience.
Key Insights
Video Orientation: While video content is traditionally oriented horizontally, there was now an overwhelming preference for full-screen vertical video consumption on mobile.
Non-Interruptive Shopping: Product details need to be accessible without pausing or obstructing the video.
Outfits: Videos naturally feature multiple products (an entire outfit f.e.). The experience needed to facilitate multi-product shopping and identifying each item of clothing from specific moments in the video.
User Insight: According to an research article by Covideo, vertical videos generated a 130% higher engagement rate compared to horizontal videos.
Defining the User Flow
I mapped the primary user journey, prioritizing efficiency, discoverability, and delight. Next to inspiring consumers, the goal was a low-friction path to purchase.
Discovery: User taps a Video Lookbook tile on the app's homepage or dedicated lookbooks section.
Engagement: Video plays automatically in full-screen with audio muted.
Interaction: Product carousel shows the items that can be seen in the video. The user can swipe on the video to go to the next item, the video will scrum to that point in the video timeline where the item is shown.
Conversion: User can add a product to their favorites or tap on the product thumbnail to see full details, select a size, and place the item directly in the cart.
Key Design Decisions
A. The Immersive Video Player
To prioritize the content, we opted for a gesture-driven, full-screen player that focuses on displaying the video and products.
UI Minimalism: Only essential elements (exit/close, mute/unmute) were visible by default.
Contextual Controls: Standard mobile gestures were implemented: tap once to pause/play, swipe left/right to navigate between products and jump in the timeline, swipe down to dismiss.
High-fidelity visualization of linking products to a video.
B. Product Carousel
The challenge now was how to present the products without interrupting the storytelling.
Interaction Model: The product carousel appears when the first product is triggered. The carousel moves with the video to create a seamless transition between items. The video continues to play unless triggered otherwise by the user.
Visual Design: Product information was limited to the thumbnail, name, and price. A favorite button allowed for quick saving without the need to leave the video immediately.
Visualization of linking images to the content of a video.
Final design of the home tile and lookbook overview previews.
C. Studio CMS (B2B)
A key part of my role was to ensure the feature was viable for our clients. This meant designing the CMS interface - Highstreet Studio - where client teams could link products to specific video timestamps.
Intuitive Linking: We designed an intuitive and visual interface where the users could select products and drop them on the video timeline. With a specific set of rules we made sure each product was shown for a minimum amount of time before moving to the next one, allowing enough time to view and interact with each product.
Automation: We automatically generated the video lookbook preview and the video stills for placing videos on the timeline. This limited the amount of manual work and back-and-forth between people for our clients.
Final design of the Studio CMS where our client could upload videos and link products to the timeline.
Impact & Learnings
The successful launch of Video Lookbooks across our client base demonstrated the power of strategically integrating content and commerce. By reducing the number of steps between inspiration and action, we turned existing brand content into a loved app feature that is still being used actively today.