Principles of UX / UI (Product Design): Competitive Analysis in UX

Competitive Analysis in UX

Competitive Analysis in UX: A Portfolio-Ready Study Guide

What This Is

Competitive analysis in UX is a structured way to evaluate how similar products solve user problems—so you can spot gaps, borrow smart ideas, and avoid reinventing the wheel. Instead of guessing what works, you systematically compare features, flows, and usability to inform your own design decisions.

Example: If you’re redesigning a hospital patient portal, you might analyze how competitors (e.g., MyChart, Zocdoc) handle appointment booking. You’d note which ones use progressive disclosure (showing only essential fields first) to reduce cognitive load, or which ones bury critical info in nested menus (a heuristic violation of visibility of system status). Your redesign could then prioritize clarity and speed, leading to fewer abandoned bookings.

Key Terms & Principles

• Competitive Analysis (Comp Analysis): A structured comparison of direct/indirect competitors to identify strengths, weaknesses, and opportunities. Example: Comparing how Duolingo, Babbel, and Rosetta Stone onboard new users to see which one reduces early drop-off.
• Direct vs. Indirect Competitors:
• Direct: Products solving the same problem for the same audience (e.g., Spotify vs. Apple Music).
• Indirect: Products solving the same problem differently (e.g., Spotify vs. YouTube for music discovery).
• Feature Benchmarking: Listing and scoring competitors’ features (e.g., “Does X app have dark mode? How’s the onboarding flow?”). Example: A spreadsheet comparing 5 food-delivery apps on delivery speed, payment options, and customization.
• Heuristic Evaluation: A usability inspection using Nielsen’s 10 Heuristics (e.g., “Does the app provide clear error messages?”). Example: Noticing that DoorDash’s “reorder” button is tiny and violates Fitts’s Law, while Uber Eats’ is larger and thumb-friendly.
• SWOT Analysis: A framework to map Strengths, Weaknesses, Opportunities, Threats of competitors. Example: “Instagram’s strength is its algorithm, but its weakness is ad overload—an opportunity for a cleaner alternative.”
• User Flow Comparison: Mapping how competitors guide users through key tasks (e.g., checkout, sign-up). Example: Comparing Amazon’s 1-click checkout vs. Etsy’s multi-step flow to see which reduces friction.
• Visual Design Audit: Analyzing competitors’ UI patterns (e.g., button styles, typography, spacing). Example: Noticing that most fintech apps use high-contrast colors (WCAG 4.5:1) for CTAs, while your client’s app uses low-contrast gray buttons.
• Accessibility Check: Evaluating competitors’ compliance with WCAG (e.g., alt text, keyboard navigation). Example: Testing if a competitor’s app works with screen readers (e.g., VoiceOver) and noting where it fails.
• Guerrilla Usability Testing: Quick, informal tests with competitors’ products to spot pain points. Example: Asking 3 friends to book a flight on Delta vs. Southwest and observing where they get stuck.
• Design System Audit: Reviewing competitors’ consistency in components (e.g., buttons, modals). Example: Noticing that Airbnb’s buttons have rounded corners, while your client’s app uses sharp edges—creating inconsistency.
• Jobs to Be Done (JTBD): A framework to understand why users “hire” a product (e.g., “I need to split a bill quickly” → Venmo vs. Cash App). Example: Comparing how Venmo and PayPal handle group payments to see which one better fulfills the JTBD.

Step-by-Step Process Flow

1. Define Goals & Scope

• Action: Write 1–2 clear objectives (e.g., “Improve our checkout flow by analyzing competitors’ cart abandonment rates”).
• Figma/Tools: Create a competitor matrix (a table with competitors as columns, features as rows). Use Figma’s table component or a Google Sheet.
• Pro Tip: Limit to 3–5 competitors (direct + indirect) to avoid analysis paralysis.

2. Identify Competitors

• Action: List direct/indirect competitors. Use tools like:
• Google Search (“[Your product] alternatives”)
• SimilarWeb (traffic data)
• Product Hunt (trending alternatives)
• Example: If designing a meditation app, competitors might include Headspace (direct), Calm (direct), and YouTube (indirect).

3. Gather Data

• Action: Collect screenshots, user flows, and notes on:
• Key features (e.g., “Does X app have a ‘save for later’ button?”)
• Usability issues (e.g., “User gets stuck on payment screen”)
• Visual design (e.g., “Uses a 12px font—violates WCAG”)
• Figma/Tools:
• Use Figma’s prototyping tool to map competitors’ user flows.
• Take screenshots and annotate with Figma’s sticky notes or Miro.
• Pro Tip: Use heuristic evaluation to spot violations (e.g., “No error prevention on form submission”).

4. Analyze & Synthesize

• Action: Organize findings into themes (e.g., “All competitors use a 3-step checkout, but ours is 5 steps”).
• Figma/Tools:
• Create a SWOT analysis in Figma (use a 2x2 grid).
• Build a feature comparison table (e.g., “Which apps have dark mode?”).
• Example: If analyzing food-delivery apps, you might find:
• Strength: Uber Eats has a “reorder” button in the thumb zone.
• Weakness: DoorDash’s search bar is hard to find (violates visibility of system status).

5. Extract Insights & Opportunities

• Action: Turn data into actionable insights (e.g., “Users abandon carts when shipping costs appear late—we should show them upfront”).
• Figma/Tools:
• Use Figma’s “Insights” frame to highlight key takeaways.
• Create “How Might We” (HMW) statements (e.g., “HMW reduce checkout steps from 5 to 3?”).
• Pro Tip: Prioritize insights using impact/effort matrix (e.g., “High impact, low effort: Add a progress bar to checkout”).

6. Present Findings

• Action: Share results with stakeholders in a visual, digestible format.
• Figma/Tools:
• Create a competitive analysis report with:
  • Screenshots + annotations (use Figma’s auto-layout for consistency).
  • User flow comparisons (side-by-side wireframes).
  • SWOT/feature tables.
• Use Figma’s presentation mode to walk through findings.
• Example: A slide titled “Checkout Flow: Us vs. Competitors” with side-by-side screenshots and a red/green highlight for pain points.

Common Mistakes

Mistake 1: Only Looking at Direct Competitors

• Correction: Include indirect competitors (e.g., if designing a fitness app, analyze Peloton and Apple Fitness+ and YouTube workout channels). Why? Users often switch between unrelated products for the same job (e.g., “I need to relax” → Calm or a YouTube ASMR video).

Mistake 2: Focusing Only on Features, Not Usability

• Correction: Don’t just list features—test them! Use guerrilla usability testing to see where users struggle. Example: A competitor’s “smart search” might look cool, but if users can’t find it, it’s useless.

Mistake 3: Ignoring Accessibility

• Correction: Audit competitors for WCAG compliance (e.g., color contrast, keyboard navigation). Why? If your product is more accessible, it stands out. Example: Many banking apps fail at screen-reader compatibility—fixing this could be a competitive edge.

Mistake 4: Copying Without Context

• Correction: Don’t blindly copy a competitor’s design—ask why it works (or doesn’t). Example: If a competitor’s app has a dark mode, don’t add it just because—test if your users actually want it.

Mistake 5: Not Updating the Analysis

• Correction: Competitors evolve—schedule quarterly updates to your analysis. Why? A feature that was a weakness last year (e.g., “No dark mode”) might now be a strength.

Design Interview / Portfolio Tips

1. Show Your Process, Not Just Results

• Interviewers Look For: How you think, not just what you found.
• Portfolio Tip: Include a case study with:
• Before/after screenshots (e.g., “We reduced checkout steps from 5 to 3 after analyzing competitors”).
• A “Methodology” section (e.g., “I used heuristic evaluation to spot violations in competitors’ flows”).
• A “Key Insight” callout (e.g., “Users abandon carts when shipping costs appear late—we fixed this by showing them upfront”).

2. Highlight How You Used Findings

• Interviewers Look For: How you applied the analysis to your design.
• Portfolio Tip: Add a “Design Decisions” section explaining how competitor insights influenced your work. Example:

  “After seeing that all competitors buried their ‘help’ button in a menu, we moved ours to the bottom nav bar (following Fitts’s Law) and saw a 20% increase in support requests.”

  
  

3. Differentiate Between Competitive Analysis and Market Research

• Tricky Distinction:
• Competitive Analysis: Focuses on UX/UI (e.g., “How do competitors handle onboarding?”).
• Market Research: Focuses on business/marketing (e.g., “What’s the market size for meditation apps?”).
• Interview Tip: If asked, say:

  “Competitive analysis helps me understand how users interact with similar products, while market research tells me who the users are and what they need.”

  
  

4. Use Visuals to Tell the Story

• Interviewers Look For: Clear, scannable deliverables.
• Portfolio Tip: Include:
• Side-by-side comparisons (e.g., “Our app vs. Competitor X: Checkout Flow”).
• Annotated screenshots (e.g., “Competitor Y violates consistency with 3 different button styles”).
• SWOT diagrams (use Figma’s auto-layout for neat tables).

Quick Check Questions

1. A stakeholder says, “Let’s add a chatbot to our app—Competitor X has one!” How do you respond?

• Answer: Use Jobs to Be Done (JTBD) to ask: “Does our target user actually need a chatbot, or is it just a ‘me-too’ feature? Let’s test Competitor X’s chatbot with 5 users to see if it solves a real pain point.”
• Key Principle: Avoid feature bloat—just because a competitor has it doesn’t mean it’s useful.

2. You’re analyzing a competitor’s app and notice their buttons are inconsistently styled. What heuristic does this violate?

• Answer: Consistency and standards (Nielsen’s #4). Users expect similar actions to look similar—mixing button styles creates confusion.
• Portfolio Tip: Screenshot the inconsistency and note: “This violates consistency, making the UI harder to learn.”

3. A competitor’s app has a 10-step onboarding flow, but users complete it faster than your 5-step flow. Why?

• Answer: The competitor might be using progressive disclosure (showing only essential info at each step) or gamification (e.g., progress bars, rewards). Your 5-step flow might be overwhelming if it asks for too much info upfront.
• Key Principle: Cognitive load—users prefer gradual engagement over information overload.

Last-Minute Cram Sheet

1. Competitive analysis ≠ market research → Focus on UX/UI, not business metrics.
2. Direct competitors = same problem, same audience. Indirect competitors = same problem, different solution.
3. Heuristic evaluation = using Nielsen’s 10 principles to spot usability issues.
4. SWOT = Strengths, Weaknesses, Opportunities, Threats (use a 2x2 grid).
5. Fitts’s Law → Big, close buttons = faster clicks (e.g., mobile CTAs in thumb zone).
6. WCAG contrast ratio → 4.5:1 for text, 3:1 for large text.
7. Progressive disclosure → Show only what’s needed now (e.g., multi-step forms).
8. ⚠️ Don’t copy competitors blindly → Test why a feature works (or doesn’t).
9. Guerrilla testing = quick, informal usability tests with competitors’ products.
10. Portfolio tip: Show how you used competitor insights to improve your design (e.g., “We reduced steps from 5 to 3 after analyzing X”).