UI/UX Design Thinking Process and Artifacts
Fundamentals of UI/UX and Human-Centered Design
- User Experience (UX): The comprehensive feeling, satisfaction, and ease of use experienced by an individual while operating an application.
- User Interface (UI): The visible, front-facing interactive layer of a system—including buttons, menus, layouts, and colors—through which a user engages with the product.
- Interface Impact: UI directly dictates UX; establishing a high-quality user experience requires designing an intuitive, well-structured interface.
- Human-Centered Design: A design methodology focused fundamentally on identifying and solving specific, real-world problems faced by people.
Nielsen Norman Group (NNG) Design Thinking Process
- Six Process Stages: Empathize, Define, Ideate, Prototype, Test, and Implement.
- Core Examination Focus: Concentrates entirely on the first four phases: Empathize, Define, Ideate, and Prototype.
- Artifacts: Tangible deliverables or outputs generated at the completion of each stage to guide the subsequent phase.
Stage 1: Empathize
- Objective: Understanding and adopting the user's perspective to discover their actual pain points.
- Research Methods:
- Behavioral vs. Attitudinal research.
- Quantitative methods (evaluating "how many" and "how much" via A/B testing and clickstream analysis).
- Qualitative methods (evaluating "why" and "how to fix" via contextual inquiry, concept testing, and diary studies).
- Affinity Mapping: The process of gathering, analyzing, and grouping interview keywords and observations into visual clusters to identify user habits and needs.
- Key Artifact (Persona): A representative profile of the target user constructed strictly from the user's point of view, containing eight core components:
- Demographics/Background: Name, profile photo, age, occupation, and living location.
- Pain Points: A minimum of three specific difficulties encountered prior to using the application.
- Gain Points: A minimum of three explicit benefits achieved after using the application.
- Goals: Exactly one primary end objective for using the system.
Stage 2: Define
- Objective: Analyzing findings from the empathize stage to clearly articulate the core problem.
- Key Artifacts: User journey map and problem statement.
- Problem Statement Formula: Structured as
User + Need + Goal (e.g., "As a busy working adult, I want to spend less time thinking about my food so that I can spend my time on other things"). - SWOT Analysis Structure:
- Internal Factors: Strengths (distinct advantages and proficiencies) and Weaknesses (internal deficiencies or high costs).
- External Factors: Opportunities (market events or trends that provide an advantage) and Threats (external market risks, competitors, or local challenges).
- Assumptions: Inferences must be documented explicitly when contextual elements are not directly provided in the case description.
Stage 3: Ideate
- Objective: Generating and prioritizing potential solutions to address the defined user problems.
- Use Case Diagram Specifications:
- Must include an explicit boundary box representing the system.
- Use cases must be depicted strictly using oval shapes.
- Actor figures must feature connection lines that physically touch their hands and link directly to the target use case oval.
- Role Orientation: Customer/user actors are placed exclusively on the left side; administrative and management actors are placed on the right side.
- Ideation Models: Crazy 8, Mind Mapping, and SCAMPER (Substitute, Combine, Adapt, Modify, Put to another use, Eliminate, Rearrange).
- Prioritization Model: MoSCoW Method (Must have, Should have, Could have, Won't have).
Stage 4: Prototype
- Objective: Translating conceptual ideas into tangible visual representations.
- Fidelity Levels:
- Low Fidelity: Crazy 8 sketches and preliminary paper wireframes.
- Mid Fidelity: Structural, barebone wireframes created in digital software such as Figma.
- High Fidelity: Polished, high-detail UI screens without functional interactivity.
- Task Flow Rules:
- Represents user flows derived directly from defined use cases.
- Must follow a single-path user perspective without branching under standard conditions.
- Requires directional arrows between each sequential step (e.g., Open App -> Login/Sign in -> Main Menu -> Specific Feature).
- Sketching Requirements: Crazy 8 wireframes should occupy a single dedicated page, drawn in pencil without mandatory coloring, using simple horizontal placeholder lines in place of full text or lorem ipsum.
Questions & Discussion
- Question: Does the user persona require a fully detailed profile photo?
- Response: The photo does not require intricate facial details; a minimalist avatar, outline silhouette, or basic smiley face indicating general attributes (such as hair) is completely sufficient.