Mastering User Experience: The 5 Essential Elements Every Product Designer Needs

The article introduces Jesse James Garrett’s “Elements of User Experience” framework, which consists of five layers—Strategy, Scope, Structure, Skeleton, and Surface—providing a systematic approach to designing digital products.

Strategy Layer – Why?

This layer addresses the purpose of building a product, asking “Why are we developing this product?” It emphasizes defining business goals, user goals, product objectives, brand identity, and success criteria to align strategy with user needs.

Product goals : commercial objectives, brand recognition, and measurable success standards.

User needs : user segmentation, research, and persona creation.

Scope Layer – What?

This layer translates strategic goals into concrete product features and content, answering “What should the product do?” It produces functional specifications and content requirements, often documented as requirement sheets.

Functional specs : detailed description of product functions and workflows.

Content needs : information that must be supplied by operations, such as news articles for a news app.

Structure Layer – How (Interaction & Information Architecture)

This layer designs the user’s behavior flow and the organization of information. It covers interaction design—focusing on task‑oriented navigation—and information architecture, which determines how content is categorized.

Interaction design : defines task flows and transition logic.

Information architecture : includes tree (hierarchical), matrix, and linear structures.

Skeleton Layer – Interface, Navigation, Information Design

This layer makes the design concrete by selecting appropriate interface elements, arranging them for clarity, designing navigation to give users a sense of location, and organizing information for easy consumption.

Interface design : choosing controls/components and positioning them for intuitive use.

Navigation design : menus, breadcrumbs, tabs, drawers, etc., to prevent users from getting lost.

Information design : ordering and categorizing content, highlighting important information, and grouping related items.

Surface Layer – Visual Design

The final layer translates the skeleton into a perceptual experience, focusing on visual cues, contrast, consistency, color, and typography to guide the user’s eye and reinforce brand identity.

Eye‑tracking principles : smooth visual paths and effective guidance.

Contrast & consistency : clear differences to attract attention and uniformity across internal and external product lines.

Color & typography : brand colors, contrast, and Gestalt‑based layout for efficient information delivery.