A Complete UI Standard Design Process: From Requirement Analysis to Implementation Tracking

1. Requirement Analysis

When a design request arrives, the first step is to analyze and define the design goals, including background analysis, user analysis, competitor analysis, requirement evaluation, and goal alignment.

Background Analysis

Purpose: uncover underlying factors to quickly understand the product and formulate persuasive design strategies.

Actions: learn product positioning, value, current status, and any existing data or experience.

User Analysis

Purpose: help UI designers grasp the product and provide direction for visual design.

Actions: understand user personas, needs, behaviors, and journeys.

Competitor Analysis

Purpose: gain industry best practices, reduce blind spots, and provide quantifiable standards.

Actions: examine competitor positioning, main features, iteration trends, structure, layout, interactions, visual design, and strengths/weaknesses.

Requirement Evaluation

Purpose: decide the approach and strategy after gathering general information.

Actions: classify requests into new product, redesign, or feature addition, and assess with five questions (falsifiability, clear goals, ROI, better solutions, foreseeable risks).

Goal Alignment

Purpose: ensure design serves the goal and provides a benchmark for design value.

Actions: translate design goals (data‑driven, problem‑solving, experience optimization, innovation) into strategies and monitor outcomes.

2. Interaction Design

Interaction design organizes information architecture to produce smooth interface prototypes.

Design Principles

Purpose: provide effective guidelines and insights for design support.

Actions: study common guidelines (iOS, Material, UWP) and principles such as Fitts' Law and Gestalt theory.

Process Sorting

Purpose: quickly understand and diagnose workflow logic before visual design.

Actions: check completeness, flow smoothness, redundancy, and understandability.

Prototype Optimization

Purpose: avoid rework after visual review by optimizing interaction prototypes.

Actions: ensure architecture matches goals, hierarchy is concise, information is accurate, and states are complete.

3. Visual Design

Visual design connects product and user; high‑quality visuals greatly enhance product appeal.

Mood Board

Purpose: provide visual references for design language and achieve early consensus.

Actions: derive design keywords, map visual elements, and determine direction.

Design Language

Purpose: concretize the mood board into visual perception for users.

Actions: define primary visuals, colors, typography, icons, graphics, and motion.

Typical Pages

Purpose: illustrate design language in concrete scenarios to form design specifications.

Actions: design home, channel, and other exemplar pages, standardizing spacing, cards, visual variables, and graphics.

4. Design System

Organizing design specifications and components into a system improves consistency and iteration efficiency.

Basic Specs

Purpose: lay the foundation of design language and visual variables.

Actions: define colors, typography, spacing, layout, breakpoints, hierarchy, radius, opacity, and shadow.

Icon Library

Purpose: enable rapid, accurate icon creation and improve output efficiency.

Actions: set styles, grid, stroke, radius, and consolidate common graphics.

Component Library

Purpose: provide reusable, composable components to ensure design quality and boost productivity.

Actions: include general, layout, navigation, data entry, data display, feedback, and business‑specific components.

5. Implementation Tracking

After design completion, conduct review, acceptance, and data tracking to ensure high‑quality delivery and iterative improvement.

Design Review

Purpose: examine usability issues in interaction and visual design.

Actions: annotate interaction logic, anticipate problems, confirm goals, data points, and implementation details with development.

Design Acceptance

Purpose: verify requirement fulfillment, smooth experience, and high‑quality implementation.

Actions: visual designers check detail fidelity, anticipate development adaptation, and document for future follow‑up.

Data Validation

Purpose: analyze post‑launch data to refine design and summarize lessons.

Actions: filter and analyze data to measure design impact, reflect on issues, and consolidate successful practices.

Design Retrospective

Purpose: evaluate design strategy value, identify process gaps, and plan improvements.

Actions: state goals, verify value, summarize highlights and shortcomings, and record experience for future use.

Although this UI standard design process targets UI designers, it also benefits interaction and experience designers in delivering business‑oriented solutions.