JOHNNYMARTÍNEZ
IG·DRIBBBLE·BEHANCE
COACH TABBY
UI/UX
2020UX & UI DESIGN
designed with: paper · cursorwork type: web design
Coach Tabby landing page hero with product photography and campaign headline

About the project

I designed a landing experience for one of Coach's hero bags—the Tabby—with emphasis on fast comprehension: what the product is, why the details matter, and how to move toward purchase without visual noise. The page pairs editorial photography with tight product modules, clear typographic hierarchy, and breakpoint-specific layouts so the story reads as well on a phone as it does on desktop.

/01

Category

Web Design

/02

Role

UX & UI design

/03

Client

Coach

/04

Year

2020

Hero — campaign photography and first-read hierarchy

Product narrative — detail, craft, and signature hardware

This spread pulls shoppers into what makes the Tabby recognizable: proportion, leather texture, and hardware cues are labeled and sequenced so the eye travels headline → product truth → supporting proof. Callouts sit close to the imagery they explain, which keeps the story tight instead of turning into a long generic essay.

Product narrative — detail, craft, and signature hardware

A campaign landing page built around the Tabby—clear hierarchy, confident imagery, and commerce paths that stay on-brand.

The layout foregrounds product truth (silhouette, materials, signature hardware) before layering lifestyle context, so scanning customers get answers in the order they shop.

Category
Web Design
Role
UX & UI design
Client
Coach

Secondary story — lifestyle context on the right rail

With product facts established, the page widens into styling and context—how the bag reads in motion, styling angles, and emotional tone that matches Coach retail. The reverse layout alternates rhythm with the prior spread so the two-column story does not feel repetitive when you scroll.

Secondary story — lifestyle context on the right rail
Desktop pair — landing continuity across frames
Supporting frame — modules and continuation
Project phone mockup 1
Project phone mockup 2
Project phone mockup 3
Coach Tabby landing page closing frame with metallic Coach hardware and logo detail

Next project

HRHEALTH
JOHNNYMARTÍNEZ
IG·DRIBBBLE·BEHANCE
COACH TABBY
UI · UX · WEB · E-COMMERCE
UI/UX
2020UX & UI DESIGN
designed with: paper · cursorwork type: web design
Coach Tabby landing page hero with product photography and campaign headline

About the project

I designed a landing experience for one of Coach's hero bags—the Tabby—with emphasis on fast comprehension: what the product is, why the details matter, and how to move toward purchase without visual noise. The page pairs editorial photography with tight product modules, clear typographic hierarchy, and breakpoint-specific layouts so the story reads as well on a phone as it does on desktop.

/01

Category

Web Design

/02

Role

UX & UI design

/03

Client

Coach

/04

Year

2020

Hero — campaign photography and first-read hierarchy

Product narrative — detail, craft, and signature hardware

This spread pulls shoppers into what makes the Tabby recognizable: proportion, leather texture, and hardware cues are labeled and sequenced so the eye travels headline → product truth → supporting proof. Callouts sit close to the imagery they explain, which keeps the story tight instead of turning into a long generic essay.

Product narrative — detail, craft, and signature hardware

A campaign landing page built around the Tabby—clear hierarchy, confident imagery, and commerce paths that stay on-brand.

The layout foregrounds product truth (silhouette, materials, signature hardware) before layering lifestyle context, so scanning customers get answers in the order they shop.

Category
Web Design
Role
UX & UI design
Client
Coach

Secondary story — lifestyle context on the right rail

With product facts established, the page widens into styling and context—how the bag reads in motion, styling angles, and emotional tone that matches Coach retail. The reverse layout alternates rhythm with the prior spread so the two-column story does not feel repetitive when you scroll.

Secondary story — lifestyle context on the right rail
Desktop pair — landing continuity across frames
Supporting frame — modules and continuation
Project phone mockup 1
Project phone mockup 2
Project phone mockup 3
Coach Tabby landing page closing frame with metallic Coach hardware and logo detail

Next project

HRHEALTH
JOHNNYMARTÍNEZ
IG·DRIBBBLE·BEHANCE
COACH TABBY
UI · UX · WEB · E-COMMERCE
UI/UX
2020UX & UI DESIGN
designed with: paper · cursorwork type: web design
Coach Tabby landing page hero with product photography and campaign headline

About the project

I designed a landing experience for one of Coach's hero bags—the Tabby—with emphasis on fast comprehension: what the product is, why the details matter, and how to move toward purchase without visual noise. The page pairs editorial photography with tight product modules, clear typographic hierarchy, and breakpoint-specific layouts so the story reads as well on a phone as it does on desktop.

/01

Category

Web Design

/02

Role

UX & UI design

/03

Client

Coach

/04

Year

2020

Hero — campaign photography and first-read hierarchy

Product narrative — detail, craft, and signature hardware

This spread pulls shoppers into what makes the Tabby recognizable: proportion, leather texture, and hardware cues are labeled and sequenced so the eye travels headline → product truth → supporting proof. Callouts sit close to the imagery they explain, which keeps the story tight instead of turning into a long generic essay.

Product narrative — detail, craft, and signature hardware

A campaign landing page built around the Tabby—clear hierarchy, confident imagery, and commerce paths that stay on-brand.

The layout foregrounds product truth (silhouette, materials, signature hardware) before layering lifestyle context, so scanning customers get answers in the order they shop.

Category
Web Design
Role
UX & UI design
Client
Coach

Secondary story — lifestyle context on the right rail

With product facts established, the page widens into styling and context—how the bag reads in motion, styling angles, and emotional tone that matches Coach retail. The reverse layout alternates rhythm with the prior spread so the two-column story does not feel repetitive when you scroll.

Secondary story — lifestyle context on the right rail
Desktop pair — landing continuity across frames
Supporting frame — modules and continuation
Project phone mockup 1
Project phone mockup 2
Project phone mockup 3
Coach Tabby landing page closing frame with metallic Coach hardware and logo detail

Next project

HRHEALTH