DJI OSMO
Capture everything. Miss nothing.
The Problem
Product landing pages for tech hardware often fail at one thing — making the product feel desirable before the user reads a single word. Most dump specs and features immediately, when the real job of a hero section is to stop the scroll and create want.
The challenge: design a landing page hero that sells the DJI Osmo Pocket 3 on feeling before facts.
Who I Designed For
Content creators, vloggers, and travellers who already know DJI as a brand but need a visual reason to choose this product over competitors. They make emotional purchase decisions and justify them with specs later.
The Design Decisions That Mattered
1. The product is the background. The Osmo Pocket 3 bleeds edge to edge on the right side no box, no shadow, no container. It dominates the viewport. The message this sends before any copy is read: this product is the main character.
2. Oversized ghost typography as texture. "OSMO" repeating large in the background creates depth and brand atmosphere without adding visual clutter. It reinforces the product name subconsciously while making the page feel designed, not assembled.
3. Muted blue-grey palette to let the product pop. The background is intentionally desaturated and cool-toned. This makes the dark hardware of the Osmo Pocket 3 and the warm, colorful image on its screen the most visually striking element on the page. The UI steps back so the product steps forward.
4. Two CTAs with clear hierarchy. "Buy Now" in solid black the primary action. "Get Info" in outline for users not ready to commit. This respects the two types of visitors on a product page without overwhelming either.
5. Badge before headline. "#1 Pocket Gimble Camera" sits above the product name as a trust signal. Users read it first, arrive at the headline already primed with social proof.
The Outcome
A high-fidelity Figma landing page hero section that demonstrates product-led design where layout, color, and typography all serve one goal: making someone want to own the product.
