Mastering the 5‑Layer Design Process: From Strategy to Surface

Alibaba went public, but even if you haven’t joined a big company yet, don’t lose hope. Here’s a valuable article on the design process used by a well‑known domestic UED team, offering insights you can learn now to work faster and become more professional.

Good processes are assets; poor ones are obstacles.

Design exists within a design process, and designers work based on that process. Different countries, industries, companies, and even business units have varying processes, making it hard to generalize.

A typical designer‑related workflow includes product requirements, interaction design, visual design, and front‑end development. A more detailed version adds market analysis, ideation, user research, concept design, component presets, interaction demos, user testing, visual research, visual design, design demos, validation testing, front‑end development, demos, iteration, data collection, gray‑scale rollout, full rollout, project summary, standards, component libraries, and user feedback tracking.

The order of these steps can be rearranged flexibly according to agile needs, even combined randomly.

In practice, many companies have a standard, complete framework, but actual projects may simplify it based on size and speed requirements.

Design processes are hard to control because design isn’t fully rational or engineering‑driven. Unlike assembling a car, ideas and designs can’t be guaranteed to produce a masterpiece by following a strict step‑by‑step process.

The author has worked on design processes in the US, China, and Germany, finding that while specifics differ, the thinking dimensions are similar.

Using Jesse James Garrett’s five‑layer model from his book “The Elements of User Experience” , the article maps these layers to the design workflow.

1. Strategy Layer

Understanding what the business wants (commercial needs) and what users want (user needs) is essential. Many designers grasp user needs but may lack insight into commercial value, leading to communication gaps and limited product ownership.

Key strategic questions include the product’s three‑year outlook, its competitive advantages, and its true differentiators.

2. Scope Layer

This defines the product’s required features and functions. Early internet products tried to pack everything, but now focus on 1‑3 killer features (e.g., Facebook Likes, Foursquare Check‑ins, Yo, WeChat voice chat).

Designers must balance abundant ideas with execution constraints, especially during redesigns.

3. Structure Layer

Focuses on information architecture and interaction flow, determining layout logic, navigation principles, and overall usability.

Effective interaction design ensures smooth processes, clear prompts, error tolerance, natural operations, visual consistency, and efficiency.

4. Skeleton Layer

Involves detailed interface design—precise placement of text, images, pixel‑perfect layouts, and interaction annotations. Two critical aspects are:

Detail: Precise element positioning, pixel accuracy, and clear interaction logic improve design quality and aid visual designers and developers.

Innovation: This stage offers opportunities for micro‑innovations, UI innovations, and motion effects, as seen in Apple’s iOS and Google’s design guidelines.

5. Surface Layer

The final visual presentation, where 80% of the user’s perception comes from visual design, motion, and branding.

Outstanding visual, motion, and brand designers can fully express their skills at this stage.

The five layers are not role‑specific; designers should engage across all layers to become product owners.

Interaction designers should understand all five layers to grasp the product’s story and essence.

Visual designers benefit from understanding earlier layers to enhance their work.

User research engineers bridge users and business, applying methods like expert testing, user testing, personas, surveys, and data analysis throughout all layers.

Front‑end developers now need to innovate, not just implement, combining technical expertise with business and design understanding.

Hope this five‑layer design process analysis helps deepen your design comprehension.