CASE STUDY
Apple
Responsive UI and production design for Apple.com product launches across desktop, tablet and mobile.
THE PROBLEM
WHAT I OWNED
THE OUTCOME
3 Apple.com experiences delivered across 2 launches in 3 months, each true to Apple’s design standards.
01 — CONTEXT
Apple
I designed responsive Apple.com homepage compositions featuring HomePod, iPhone X, iPhone 8, Apple Watch, iPad, iMac Pro, AirPods and Apple Music.
Working within Apple’s established design system, I turned approved copy, imagery and campaign assets into polished layouts for desktop, tablet and mobile.
My work covered composition, responsive adaptation, typography, spacing and image placement, through to asset slicing, developer handoff and implementation review.
02 — CHALLENGE
Precision at Every Breakpoint
01 — Changing Priorities
The homepage had to reorder around each new launch without losing balance or crowding other products.
02 — Long-Form Storytelling
HomePod’s narrative and technical illustrations had to read in order on a narrow phone screen.
03 — Campaign Meets Commerce
04 — Pixel-Level Standards
03 — APPROACH
Responsive by Design
01 — Compose
02 — Adapt per Breakpoint
03 — Prepare Assets
04 — Review the Build
04 — SOLUTION
Consistency Across Devices
05 — SELECTED WORK
Apple.com Experiences
EXPERIENCE 01 — APPLE.COM HOMEPAGE
Adapting Apple’s homepage for changing product priorities
I designed responsive Apple.com homepage compositions featuring HomePod, iPhone X, iPhone 8, Apple Watch, iPad, iMac Pro, AirPods and Apple Music.
Using the provided copy, imagery, and content sequencing, I composed hero sections and promotional tiles while maintaining clear hierarchy, consistent spacing, and strong product visibility across desktop, tablet, and mobile.
Key decision:
I rebalanced the hero and tile grid each time priorities changed, so the featured launch led without crowding out other products.
Desktop
Tablet
Mobile
EXPERIENCE 02 — HOMEPOD
Translating long-form product storytelling across devices
I designed responsive layouts for the HomePod product experience using approved copy, product imagery, technical illustrations and campaign assets.
Across desktop, tablet and mobile, I adapted typography, imagery, spacing, section proportions and content stacking to preserve the product narrative and visual impact at every breakpoint.
Key decision:
On mobile, I re-cropped technical illustrations and stacked sections so the audio story still read in order on a narrow screen.
Desktop
Tablet
Mobile
EXPERIENCE 03 — APPLE (PRODUCT)RED
Building a unified campaign and commerce experience
I designed responsive compositions for the Apple (PRODUCT)RED experience using approved campaign messaging, product imagery and accessory assets.
The experience brought together products across multiple Apple categories while maintaining a consistent visual rhythm between campaign storytelling, product imagery and commerce content.
Key decision:
I used one consistent tile rhythm across iPhone and accessory products, so campaign and commerce content felt like one page.
06 — SCALE & DELIVERY
Launch & Campaign Scale
Three Apple.com experiences delivered in three months, from the homepage to a cross-category campaign.