Design Thinking & UX Fundamentals — How to Solve Problems with a User-Centered Approach

Introduction

"The feature works perfectly, but no one uses it." If you are a developer, you have probably heard this before. The most common reason technically excellent products fail in the market is a failure to understand the user.

Design Thinking is a systematic methodology for discovering real user problems and rapidly validating creative solutions. This article covers the 5 stages of design thinking, UX research, UI design principles, accessibility, prototyping, and practical UX tips that developers can apply immediately.

This is not designer-exclusive knowledge. It is a fundamental skill for everyone who builds good software.

Part 1: Design Thinking

1. What Is Design Thinking

Origin and Definition

Design thinking originated in the 1960s in architecture and industrial design, then spread to business and technology through IDEO and the Stanford d.school. It is a human-centered problem-solving methodology.

The core philosophy is simple:

• Start with the actual needs of users
• Redefine the problem from diverse perspectives
• Validate hypotheses through rapid experimentation
• Treat failure as a learning opportunity

Unlike traditional linear problem-solving (define -> analyze -> solve), design thinking makes iteration and feedback central.

Why It Matters for Developers

Developers typically focus on "How to build it." Design thinking asks "Why are we building it?" and "Who is it for?" first. This shift in perspective creates practical differences:

2. The 5 Stages of Design Thinking

The Stanford d.school 5-stage framework is the most widely recognized model of design thinking.

Stage 1: Empathize

Deeply understand what users actually experience, feel, and struggle with.

Key Activities

• Contextual Inquiry: Observe user behavior in their actual environment
• Empathy Interviews: Discover hidden needs through open-ended questions
• Immersion: Experience the user's situation firsthand
• Empathy Map: Visually organize what users say, think, feel, and do

Common Mistakes

• Asking users "What do you want?" directly is ineffective. Users struggle to articulate their own needs accurately
• Be careful not to mistake internal team assumptions for the user's voice

Stage 2: Define

Analyze data collected during the empathy stage to clearly define the core problem to solve.

Writing a Point of View (POV) Statement

• Format: "User (who) needs ... because ..."
• Example: "A remote team lead needs an intuitive way to understand team progress in asynchronous environments, because current text-based reporting easily loses context."

Criteria for a Good Problem Definition

• Specific but does not constrain the solution
• Written from the user's perspective
• Implies measurable success criteria

Stage 3: Ideate

Generate as many solution ideas as possible for the defined problem.

Key Techniques

• Brainstorming: Defer judgment and prioritize quantity. Apply the "Yes, and..." rule
• Mind Mapping: Expand ideas radially from a central topic
• SCAMPER: Substitute, Combine, Adapt, Modify, Put to other uses, Eliminate, Reverse
• Crazy 8s: Sketch 8 different ideas in 8 minutes

Effective Idea Selection Criteria

• Technical Feasibility
• Business Viability
• User Desirability

The sweet spot for innovation is where these three circles overlap.

Stage 4: Prototype

Quickly and cheaply materialize selected ideas into testable forms.

Prototyping Principles

• It does not need to be perfect. It just needs to be good enough to validate your core hypothesis
• Faster is better. You should be able to build it in hours, not days
• It should be easy to discard. Attachment leads to ignoring feedback

Prototyping tools and techniques are covered in detail in Part 3 of this article.

Stage 5: Test

Show the prototype to real users and validate whether your hypotheses are correct.

Core Testing Principles

• Observe, do not explain. Hand the prototype to the user and watch quietly
• Test the hypothesis, not the prototype. Not "Is this design pretty?" but "Can the user find the next action within 3 seconds?"
• 5 participants are enough. According to Nielsen Norman Group research, about 85% of usability problems can be discovered with just 5 test participants

Post-Test Actions

• If the problem definition was wrong, go back to Stage 2
• If ideas are insufficient, go back to Stage 3
• If it is a prototype detail issue, repeat Stage 4

This iterative loop is the essence of design thinking.

Part 2: User Research

3. UX Research Methods

Qualitative vs Quantitative Research

In practice, combining both is most effective. Use qualitative research to discover "why" and quantitative research to validate "how much."

User Interviews

Interview Preparation

• Define research questions first (these differ from interview questions)
• Compose open-ended questions: "How do you...?", "Tell me about the last time you..."
• Avoid leading questions: "Didn't you find this feature inconvenient?" (X) vs "What was your experience using this feature?" (O)

Interview Tips

• 5-Second Rule: Maintain at least 5 seconds of silence after asking a question. Awkward silences draw out authentic answers
• Ask "Why?" 5 times (5 Whys). Discover the real motivation beneath surface-level answers
• Observe behavior, not words. A user may say "it's easy" while struggling for 3 minutes

Personas

Personas are fictional representative user profiles created from research data.

Components of a Good Persona

• Demographics (age, occupation, tech proficiency)
• Goals and motivations (what they want to achieve)
• Pain points (what is currently frustrating)
• Behavior patterns (how they seek information, how they make decisions)
• Context (where, on what device, under what circumstances they use the product)

Caution: Creating personas from "imagination" is meaningless. They must be grounded in actual research data. Unfounded personas become a tool for justifying the team's biases.

Customer Journey Map

A visual representation of the entire process a user goes through when interacting with a product or service.

Components of a Journey Map

1. Stages: Awareness -> Consideration -> Decision -> Use -> Advocacy/Churn
2. Actions: What the user does at each stage
3. Thoughts: The user's internal monologue at that moment
4. Emotions: Positive-neutral-negative emotion curve
5. Touchpoints: Points where the user and product meet
6. Opportunities: Points for improvement

Journey Mapping Tips

• Create the "As-Is" (current state) map first, then the "To-Be" (target state) map
• The lowest point on the emotion curve (pain point) is the biggest opportunity
• When the entire team creates it together, it breaks down cross-departmental silos

Usability Testing

Ask users to perform specific tasks and observe the process to discover usability issues.

Types of Usability Tests

• Moderated: A facilitator is present to observe and ask questions in real time
• Unmoderated: Users independently complete tasks through remote tools
• Guerrilla: Request 5-minute tests from passersby in cafes or public spaces

Writing Task Scenarios

• "Click the search button" (X) - Do not dictate actions
• "Try to reorder the product you ordered last month" (O) - Present a goal

Part 3: UX Principles and Laws

4. Nielsen's 10 Usability Heuristics

The 10 heuristics defined by Jakob Nielsen in 1994 remain the standard for UX evaluation three decades later.

1) Visibility of System Status

The system should always keep users informed about what is happening through appropriate feedback in a timely manner.

• Good: File upload progress bar, save confirmation message
• Bad: Pressing a button with no visible response

2) Match Between System and the Real World

The system should use language, concepts, and sequences familiar to the user.

• Use everyday language instead of technical jargon
• Follow real-world conventions (e.g., the "shopping cart" metaphor in e-commerce)

3) User Control and Freedom

Users should be able to easily undo mistakes.

• Provide undo functionality
• Offer confirmation dialogs like "Are you sure you want to delete?"
• Provide clear "emergency exits"

4) Consistency and Standards

The same words, situations, and actions should always mean the same thing.

• Follow platform conventions (e.g., back button in the top-left on iOS)
• Internal consistency: The same function behaves the same way throughout the app

5) Error Prevention

Designing to prevent errors is more important than writing good error messages.

• Add confirmation steps before dangerous actions
• Communicate input constraints upfront (e.g., real-time password requirement display)

6) Recognition Rather Than Recall

Minimize what users need to remember and make choices visible.

• Show recent searches
• Use step indicators (steppers)
• Provide examples in input field placeholders

7) Flexibility and Efficiency of Use

Provide design that satisfies both beginners and experts.

• Offer both keyboard shortcuts (for experts) and menus (for beginners)
• Allow customization of frequently used features

8) Aesthetic and Minimalist Design

Every screen should contain only essential information. Unnecessary information reduces the visibility of necessary information.

9) Help Users Recognize, Diagnose, and Recover from Errors

Error messages should be written in plain language, not error codes, and clearly explain the cause and solution.

• "Error 500" (X)
• "The server encountered a temporary problem. Please try again shortly." (O)

10) Help and Documentation

Ideally the system is intuitive enough that help is unnecessary, but when needed, help should be easy to find and specific.

5. Core UX Laws

Fitts's Law

"The shorter the distance to a target and the larger its size, the easier it is to click."

Practical application:

• Make CTA (Call to Action) buttons large and prominent
• Place frequently used features where the hand can easily reach
• Group related items close together

Hick's Law

"The more choices there are, the longer it takes to make a decision."

Practical application:

• Limit options to 5-7 or fewer
• Group into categories for stepwise selection
• Highlight a recommended option (e.g., "Popular" badge on a pricing plan)

Miller's Law

"The average person can hold approximately 7 (plus or minus 2) items in working memory."

Practical application:

• Keep navigation menu items to 7 or fewer
• Break long information into meaningful chunks
• Grouping phone numbers like "010-1234-5678" is a classic example

Jakob's Law

"Users spend most of their time on other sites. They expect your site to work like all the other sites they already know."

Practical application:

• Place the logo in the top-left, search in the top-center, cart in the top-right
• Follow established design patterns
• Innovation is only justified when it sufficiently offsets the user's learning cost

Part 4: UI Design Fundamentals

6. Visual Hierarchy

A design principle that naturally guides the user's gaze from the most important to the least important elements.

Tools of Visual Hierarchy

Size: Larger elements catch the eye first. Communicate information priority through size differences among headings, subheadings, and body text.

Color: High-contrast colors increase prominence. Using an accent color for CTA buttons is a classic example.

Whitespace: Empty space is not waste. The more whitespace around an element, the more that element stands out. Apple's website is famous for dramatic use of whitespace.

Position: The F-pattern (text-heavy) and Z-pattern (image-heavy) are well-known eye-tracking patterns.

7. Typography

Fundamental Principles

Font Pairing: Generally, 2-3 font combinations are appropriate. Use different typefaces for headings and body text to create contrast.

Readability Metrics

• Body font size: minimum 16px (comfortable reading even on mobile)
• Line Height: 1.4-1.8 times the font size
• Line Length: 45-75 characters per line is optimal
• Paragraph spacing: 1.5-2 times the line height

Web Typography Tips

• Consider system fonts first (performance advantage)
• Pay attention to baseline alignment when mixing CJK and Latin characters
• Use font-display: swap to prevent invisible text during font loading (FOIT)

8. Color Theory

Psychological Effects of Color

Building a Color System

60-30-10 Rule

• 60%: Primary color - background, large areas
• 30%: Secondary color - cards, section dividers
• 10%: Accent color - CTAs, important links

Contrast Ratio

WCAG 2.1 standards:

• Normal text: minimum 4.5:1
• Large text (18px+ or 14px bold): minimum 3:1
• UI components: minimum 3:1

9. Grid Systems

Why Use Grids

• Ensures consistent layout and alignment
• Provides the foundation for responsive design
• Facilitates communication between designers and developers

12-Column Grid

The most widely used system. 12 divides evenly by 2, 3, 4, and 6, enabling flexible layout combinations.

| 1 column  | = all 12 columns
| 2 columns | = 6 + 6
| 3 columns | = 4 + 4 + 4
| 4 columns | = 3 + 3 + 3 + 3
| Asymmetric | = 8 + 4 (content + sidebar)

Responsive Breakpoints

Typical breakpoint ranges:

• Mobile: 320px-767px (1-2 columns)
• Tablet: 768px-1023px (2-3 columns)
• Desktop: 1024px-1439px (3-4 columns)
• Large display: 1440px+ (max-width constraint recommended)

Part 5: Information Architecture

10. What Is Information Architecture (IA)

The discipline of structuring and organizing content so users can easily find the information they need.

Card Sorting

Let users group and label content themselves to design information structures aligned with users' mental models.

Types

• Open Card Sorting: Users freely create groups and name them
• Closed Card Sorting: Users sort cards into predefined categories
• Hybrid: Provide predefined categories but allow creation of new ones

Sitemaps

Documents that visualize information structure in tree form.

Sitemap Principles

• Prioritize breadth over depth (3 levels or fewer recommended)
• Use category names that match users' mental models
• Important pages should be reachable with minimal clicks

Navigation Patterns

Global Navigation: The main menu accessible from all pages (top bar, sidebar)

Local Navigation: Sub-menus within the current section

Breadcrumbs: A path indicator showing the current location (Home > Category > Subcategory > Current Page)

Search: A complement to navigation. About 50% of users try search first

Faceted Navigation: Filter by multiple criteria simultaneously. Price/brand/color filters in e-commerce are a classic example

Part 3: Prototyping

11. Types of Prototypes

Lo-fi (Low-Fidelity) Prototypes

Paper Prototypes

• Draw screens on paper and manually "play" through them
• Costs almost nothing and can be made in 5 minutes
• Ideal for early idea validation

Wireframes

• Blueprints showing layout and information structure
• Intentionally exclude color, images, and branding
• A tool for getting feedback on structure and flow

Hi-fi (High-Fidelity) Prototypes

Interactive Prototypes

• Have look and feel nearly identical to the actual product
• Include interactions such as clicks, transitions, and animations
• Suitable for usability testing and stakeholder presentations

Choosing the Right Fidelity

12. Figma in Practice

Why Figma

• Browser-based with no installation required
• Real-time collaboration (designers, developers, PMs working simultaneously)
• Systematic design systems with Auto Layout, Components, and Variables
• Dev Mode for developers to inspect specs directly

How Developers Can Use Figma

1. Dev Mode: Directly check CSS code, spacing, and color values
2. Inspect Panel: Convert selected element properties to code
3. Prototype Links: Check screen transitions and interaction specs
4. Comments: Leave implementation-related questions for designers

Part 4: Accessibility (A11y)

13. Why Web Accessibility Matters

Accessibility by the Numbers

• Approximately 15% of the global population (about 1 billion people) have some form of disability
• Color vision deficiency affects about 8% of men and about 0.5% of women
• In aging societies, declining vision and motor ability are universal issues
• Temporary disabilities (broken arm, bright sunlight) can happen to anyone

Accessibility Is a Legal Obligation

• South Korea: Anti-Disability Discrimination Act, Web Accessibility Certification
• United States: ADA (Americans with Disabilities Act), Section 508
• Europe: European Accessibility Act (effective 2025)

14. WCAG 2.1 Core Principles

The POUR Principles

Perceivable

• Provide alt text for all images
• Provide captions and audio descriptions for video
• Do not convey information through color alone (use color + icon/text)

Operable

• All functionality must be usable with keyboard alone
• Time-limited content must be adjustable or extendable
• Flashing content must not exceed 3 flashes per second

Understandable

• Write text at an easy-to-read level
• Pages and UI should behave in predictable ways
• Provide guidance on how to correct errors

Robust

• Works reliably across various user agents (browsers, assistive technologies)
• Use standard HTML and apply ARIA appropriately

15. Keyboard Navigation

Core Keyboard Interactions

Development Checklist

• Does focus order match visual order
• Are focus indicators clearly visible (do not remove outline!)
• Are there no keyboard traps (not getting stuck in modals)
• Is there a skip navigation link

16. Screen Readers and ARIA

Semantic HTML Comes First

Before using ARIA (Accessible Rich Internet Applications), use the correct HTML elements.

<!-- Bad -->
<div onclick="handleClick()">A div that looks like a button</div>

<!-- Good -->
<button onclick="handleClick()">A real button</button>

Key ARIA Roles

• role: Specifies the element's role (navigation, alert, dialog, etc.)
• aria-label: Provides an accessible name for elements without visible text
• aria-live: Notifies screen readers of dynamically changing content
• aria-hidden: Hides decorative elements from screen readers

ARIA Usage Principles

1. Do not use ARIA if native HTML is sufficient
2. Do not change semantic meaning
3. All interactive elements must have an accessible name
4. If you add ARIA, always implement keyboard support as well

17. Color Contrast and Visual Accessibility

Contrast Checking Tools

• Chrome DevTools color contrast checker
• WebAIM Contrast Checker (online tool)
• Figma plugins: Stark, Contrast

Designing for Color Vision Deficiency

• Avoid red-green combinations (the most common type of color blindness)
• Provide additional cues beyond color: shapes, patterns, text
• Test with Chrome DevTools color vision simulation

Part 5: Mobile UX

18. Thumb Zone

Smartphone Usage Patterns

According to Steven Hoober's research, about 75% of users operate their smartphones with one hand. This divides the screen into three zones:

• Easy Zone: Bottom-center to bottom of screen - place frequent primary actions
• Ok Zone: Center portion of screen - general content
• Hard Zone: Top corners of screen - place infrequently used features

Mobile UX Guidelines

• Minimum touch target size: 44x44pt (Apple) / 48x48dp (Google)
• Minimum spacing between touch targets: 8px+
• Place primary CTAs at the bottom of the screen (e.g., fixed bottom buttons)
• Placing navigation bars at the bottom is an expanding trend

19. Gestures and Interactions

Common Mobile Gestures

Gesture Design Principles

• Gestures are hard to discover. Always provide alternative UI alongside them
• Do not override habitual gestures (swipe-to-go-back, etc.)
• Show a preview of the gesture's result (e.g., revealing a delete button underneath during swipe)

20. Responsive Design

Mobile-First Approach

Why Mobile First

• Starting with a constrained environment forces focus on the essentials
• Using min-width in CSS media queries makes progressive enhancement easier
• About 60% of global web traffic comes from mobile

Core Responsive Design Techniques

• Flexible grids: Use %, fr, vw units instead of fixed px
• Flexible images: Adjust to containers with max-width: 100%
• Media queries: Change layout according to screen size
• Container queries: Apply styles based on parent element size (latest technique)

Part 6: UX Metrics and UX for Developers

21. UX Metrics

SUS (System Usability Scale)

Evaluates system usability on a 0-100 scale using 10 standardized questions.

• Average score: 68
• 80+: Excellent
• Below 50: Needs improvement

The advantage of SUS is that it is quick, simple, and benchmarkable against industry averages.

NPS (Net Promoter Score)

"Would you recommend this product to a friend or colleague?" (0-10 scale)

• Promoters: 9-10
• Passives: 7-8
• Detractors: 0-6
• NPS = % Promoters - % Detractors

Task Success Rate

The percentage of participants who successfully complete a given task in usability testing.

• Binary success (complete/fail)
• Can include partial success (e.g., completed with assistance)
• Industry average: approximately 78%

Other Key Metrics

• Task Completion Time: Time taken for a user to complete a task
• Error Rate: Frequency of errors during task execution
• First Click Accuracy: Percentage of first clicks on the correct path (correct first click boosts final success rate to about 87%)
• Bounce Rate: Percentage of visitors who leave without further interaction

22. Practical UX Guide for Developers

UX Checks in Code Review

Add the following UX checklist to functional code reviews:

Loading States

• Is a skeleton UI or spinner displayed during loading
• Is a clear message shown to the user on error
• Is the empty state handled appropriately

Form Handling

• Is validation performed in real time
• Are error messages displayed near the relevant field
• Is the submit button disabled during submission (preventing duplicate submissions)
• Is appropriate feedback provided after success

Accessibility

• Is semantic HTML used
• Do images have alt text
• Can all features be used with keyboard
• Is focus management appropriate (when opening/closing modals)

Performance

• Are images properly optimized
• Are there unnecessary re-renders
• Does layout shift (CLS) occur

Using Design Systems

A design system is a collection of reusable components and guidelines for building consistent UI efficiently.

Core Components of a Design System

1. Design Tokens: Manage values like color, spacing, typography, and shadows as variables

/* Example: Managing design tokens with CSS Custom Properties */
:root {
  --color-primary: #2563eb;
  --color-error: #dc2626;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --font-size-body: 16px;
  --font-size-heading: 24px;
  --border-radius-md: 8px;
}

2. Component Library: Reusable UI blocks like buttons, input fields, cards, modals
3. Pattern Library: Recurring UI patterns like login forms, search, table filters
4. Guidelines Documentation: Usage, Do/Don't, accessibility notes for each component

Popular Open-Source Design Systems

• Material Design (Google)
• Ant Design (Alibaba)
• Chakra UI
• Radix UI
• shadcn/ui

23. UX and Development Collaboration

Design Handoff Checklist

Items to verify when receiving designs from a designer:

1. Are all states defined: Default, hover, active, disabled, error, loading, empty state
2. Are responsive specs provided: Layouts for mobile, tablet, desktop
3. Are interaction specs provided: Transition animations, gestures, micro-interactions
4. Edge cases: Very long text, no data, insufficient permissions

How Developers Can Contribute to UX

• Share technical constraints early: "This animation could cause performance issues"
• Propose alternatives: "Instead of this approach, this method achieves the same effect more efficiently"
• Optimize frontend performance: Speed is at the heart of user experience
• Include accessibility naturally: Adding it later doubles the cost
• Leverage user data: Suggest UX improvements using error logs and funnel analysis

Conclusion

Design thinking and UX are not "designer territory." If the ultimate goal of every developer is to build software that delivers value to users, understanding UX is not optional but essential.

A one-line summary of everything covered in this article:

Observe users, define the problem, try quickly, learn, and try again.

Three things you can do starting today:

1. Evaluate your current project with Nielsen's 10 Heuristics - the easiest first step
2. Use your app with keyboard only - accessibility issues will immediately surface
3. Add a UX checklist to your code reviews - it raises the entire team's UX awareness

Good UX is not grand innovation but an accumulation of small considerations.

References

• Don Norman, "The Design of Everyday Things"
• Steve Krug, "Don't Make Me Think"
• Jakob Nielsen's Usability Heuristics (Nielsen Norman Group)
• WCAG 2.1 Guidelines (W3C)
• Google Material Design Guidelines
• Apple Human Interface Guidelines
• Laws of UX (lawsofux.com)
• Stanford d.school Resources
• IDEO Design Thinking Resources