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.