Case study: enterprise app
Designing contextual commerce for mobile video
interaction systems for immersive media + shopping
Confidentiality Notice:
Due to confidentiality agreements, internal product codenames, design system references, proprietary tokens, document versioning, and system-specific implementation details have been removed or redacted. The materials shown focus on interaction thinking, state modeling, and architectural decisions. Additional implementation details are available for discussion upon request.
Context & problem
CAPTION 1
CAPTION 2
CAPTION 3
SECTION A
This project focused on designing a video-first shopping experience within a large-scale e-commerce ecosystem [MASSIVE COMPANY X, which shall remain unnamed]. The goal was to enable customers watching creator-led book discussions to seamlessly discover, track, and purchase the books being discussed — without disrupting immersion.
The core tension was this: how do we layer commerce into an immersive video experience without overwhelming users or cluttering the interface?
- Crop the “North Star” slide to remove the top header (internal name + confidential footer).
- Keep only the three mobile screens showing tray behavior.
- Remove the green “FINAL” ribbon and section IDs.
- Add caption: “Challenge: Layer commerce into immersive video without disrupting flow.”
Defining the North Star
CAPTION 1
CAPTION 2
CAPTION 3
SECTION B
Our North Star was contextual commerce. As a creator transitions between books in a discussion, the currently referenced book should remain clearly visible and accessible to the viewer. The system needed to automatically highlight the active item and update the tray dynamically.
I designed a bottom “shopping tray” that responded to the creator’s sequence, ensuring continuity and clarity. Tapping or scrubbing the tray advanced the video to the relevant section: now a patented UI.
- Use the three progressive screen states from the first image.
- Crop out all small explanatory body text on the left.
- Keep only the transition sequence visuals.
- Annotate: “Dynamic contextual highlighting maintains continuity.”
Information architecture & layering
CAPTION 1
CAPTION 2
CAPTION 3
SECTION C
This experience required multiple simultaneous interface layers: playback controls, captions, creator info, shopping tray, and social actions. Each layer had to appear, fade, and reappear without competing for attention.
I structured the system into clear interaction zones and defined rules for fade timing, hierarchy, and reactivation on tap.
- From the IA slide, crop out the left column that references internal naming.
- Keep the simplified architecture diagram and one annotated screen.
- Relabel interaction zones generically (e.g., Secondary Controls, Creator Info, Shopping Tray).
- Remove “Amazon Confidential” footer.
State modeling & control systems
CAPTION 1
SECTION D
A major complexity — hopefully invisible to the customer — involved modeling and animating state transitions. Buttons needed consistent behavior across default, active, pressed, and disabled states. Certain controls, like follow or wishlist, required mid-sequence state awareness.
I defined state matrices to ensure consistent behavior across playback states and edge cases, and designed all UI animations.
- From the buttons/spec slide, crop the central state grid only.
- Remove any references to internal design systems.
- Remove exact CSS spec callout boxes.
- Add caption: “Consistent multi-state interaction logic.”
Creator panel & contextual overlays
CAPTION 1
SECTION E
I designed contextual overlays to preserve creator identity while keeping commerce accessible. The follow state required nuanced behavior across interaction states and playback modes.
The overlay had to fade gracefully, remain legible, and respond predictably to tap interactions.
- From the Creator Information slide, crop only the mobile screen showing the overlay panel.
- Remove the CSS spec sidebar entirely.
- Remove internal timestamps and footers.
- Add callout: “Contextual overlays with predictable state behavior.”
Constraints, outcomes, and impact
Design decisions were shaped by system constraints: performance considerations, accessibility requirements, and integration with an established design system.
The final system enabled contextual commerce without breaking immersion and established reusable interaction patterns across similar media-commerce experiences.
• Tested within a global e-commerce ecosystem
• Scalable interactive-video framework
• Multi-state and multi-layered component system
• Fan-driven interaction patterns with a massive database
I was the lead designer for [MASSIVE COMPANY X] on this project.