Principles of UX / UI (Product Design): HEART Framework (Happiness, Engagement, Adoption, Retention, Task Success)

HEART Framework (Happiness, Engagement, Adoption, Retention, Task Success)

HEART Framework Study Guide

A portfolio-ready breakdown for aspiring product designers, UX newcomers, and bootcamp students

What This Is

The HEART Framework is a Google-developed method for measuring user experience at scale. It helps teams quantify how well a product performs across five key dimensions: Happiness, Engagement, Adoption, Retention, and Task Success. Unlike vague metrics like "user satisfaction," HEART provides actionable data to guide design decisions—e.g., reducing frustration in a hospital patient portal’s appointment booking (Task Success) or increasing weekly active users in a fitness app (Engagement).

Concrete example:
A redesign of a checkout flow might track: - Happiness: Post-purchase survey scores.
- Engagement: Clicks on upsell recommendations.
- Adoption: % of users who enable one-click checkout.
- Retention: Returning customers within 30 days.
- Task Success: % of users who complete checkout without errors.

Key Terms & Principles

• Happiness (Attitudinal Metrics):
  Measures user sentiment (e.g., satisfaction, ease of use). Example: A 5-star rating prompt after using a food delivery app’s new "group order" feature.

• Engagement (Behavioral Metrics):
  Tracks how often users interact with a product. Example: Daily active users (DAU) in a language-learning app or time spent on a news site’s article page.

• Adoption (New User Metrics):
  Measures how many users start using a new feature. Example: % of users who enable dark mode in a productivity app after launch.

• Retention (Loyalty Metrics):
  Tracks if users return over time. Example: % of e-commerce shoppers who make a second purchase within 90 days.

• Task Success (Efficiency Metrics):
  Measures if users complete key tasks without errors. Example: % of users who successfully reset their password on the first try.

• Signal vs. Metric:

• Signal: A qualitative observation (e.g., "Users abandon checkout at the payment step").

• Metric: A quantitative measure (e.g., "30% drop-off at payment screen").
  HEART helps turn signals into trackable metrics.

• Jakob’s Law:
  Users expect your product to work like others they’ve used. Example: Placing a search bar in the top-right corner (like Google) instead of hiding it in a menu.

• Hick’s Law:
  More choices = slower decisions. Example: A flight-booking app limiting filter options to 3–5 at a time.

• Progressive Disclosure:
  Show only essential info upfront; reveal details as needed. Example: A banking app hiding advanced transfer options behind a "Show more" button.

• Micro-interactions:
  Small animations/feedback that improve usability. Example: A like button that briefly scales up when tapped (Happiness + Engagement).

• A/B Testing:
  Comparing two versions of a design to see which performs better. Example: Testing a green vs. blue "Subscribe" button to see which gets more clicks (Engagement).

• Guerrilla Testing:
  Quick, informal usability tests with 5–10 users. Example: Asking café patrons to try a prototype of a new coffee-ordering app (Task Success).

Step-by-Step / Process Flow

How to apply HEART in a real project (e.g., redesigning a meditation app’s onboarding flow):

1. Define Goals & Signals
2. Action: List 1–2 key goals per HEART category.
   • Happiness: Users feel the app is "calming" (post-onboarding survey).
   • Engagement: Users complete 3+ sessions in their first week.
   • Adoption: 70% of users enable notifications.
   • Retention: 40% return after 7 days.
   • Task Success: 90% complete onboarding without errors.

3. Figma Tip: Create a sticky note board in Figma to map these goals.

4. Choose Metrics

5. Action: Pick 1–2 quantifiable metrics per goal.
   • Happiness: Net Promoter Score (NPS) after onboarding.
   • Engagement: Average sessions per user in Week 1.
   • Adoption: % of users who enable notifications.
   • Retention: Day-7 retention rate.
   • Task Success: % of users who complete onboarding in <2 minutes.

6. Tool: Use Google Analytics or Mixpanel to track these.

7. Design for Metrics

8. Action: Sketch wireframes that optimize for your metrics.
   • Happiness: Add a short welcome video (increases perceived value).
   • Engagement: Include a "7-day streak" tracker (gamification).
   • Adoption: Make notifications opt-out (default = enabled).
   • Retention: Send a personalized "Day 3" email with a free session.
   • Task Success: Simplify onboarding to 3 steps (Hick’s Law).

9. Figma Tip: Use auto-layout to test different onboarding flows quickly.

10. Prototype & Test

11. Action: Build a low-fidelity prototype in Figma and test with 5 users.
    • Task: "Complete onboarding and start your first meditation."
    • Observe: Where do users hesitate? (Task Success)
    • Ask: "How did this feel?" (Happiness)

12. Tool: Use Figma’s prototyping mode + Maze for unmoderated testing.

13. Analyze & Iterate

14. Action: Compare pre- and post-redesign metrics.
    • Example: If Adoption (notifications) is low, test a modal popup instead of a subtle toggle.

15. Figma Tip: Create a design system component for the notification toggle to iterate faster.

16. Present to Stakeholders

17. Action: Show a before/after dashboard with HEART metrics.
    • Example: "Retention improved by 15% after simplifying onboarding."
18. Tip: Use Google Data Studio or Figma’s chart plugins to visualize data.

Common Mistakes

• Mistake: Tracking too many metrics.
• Correction: Focus on 1–2 metrics per HEART category. Too many dilute insights.

• Rationale: HEART is about focused measurement, not data overload.

• Mistake: Ignoring qualitative data (e.g., user feedback).

• Correction: Pair metrics with user quotes (e.g., "I hated the long onboarding" = low Happiness).

• Rationale: Numbers tell you what happened; feedback tells you why.

• Mistake: Assuming correlation = causation.

• Correction: Use A/B tests to confirm changes drive metrics (e.g., "Did the new onboarding cause higher retention?").

• Rationale: A spike in Engagement might be due to a marketing campaign, not your design.

• Mistake: Measuring only "vanity metrics" (e.g., app downloads).

• Correction: Focus on behavioral metrics (e.g., "users who complete onboarding").

• Rationale: Downloads ≠ success; active usage = success.

• Mistake: Not aligning metrics with business goals.

• Correction: Tie HEART metrics to KPIs (e.g., "Higher Retention = higher LTV").
• Rationale: Stakeholders care about business impact, not just UX.

Design Interview / Portfolio Tips

• What Interviewers Look For:
• Clarity: Can you explain HEART in plain language? (Avoid jargon like "north star metrics.")
• Problem-Solving: Can you map a real-world problem to HEART? (e.g., "Low Retention in a dating app? Track matches per user.")
• Data Literacy: Can you interpret metrics? (e.g., "A 20% drop in Task Success means users are struggling with X.")

• Collaboration: Can you work with PMs/data teams to define metrics?

• Portfolio Tip:

• Include a case study where you used HEART. Example:
  > "Redesigned a fitness app’s onboarding flow using HEART. Increased Adoption (notifications) by 40% and Retention by 15%."

• Show before/after metrics in a simple table or graph.

• Tricky Distinctions:

• HEART vs. AARRR (Pirate Metrics):
  • HEART = user experience (qualitative + quantitative).
  • AARRR = business growth (Acquisition, Activation, Revenue, etc.).
• Usability Testing vs. HEART:
  • Usability testing = qualitative (finds problems).
  • HEART = quantitative (measures impact).

Quick Check Questions

1. Scenario: A stakeholder says, "Our app’s NPS (Happiness) is high, but Retention is low. What’s going on?"

2. Answer: High NPS means users like the app, but low Retention suggests they’re not finding ongoing value. Investigate Engagement (e.g., "Are users completing key tasks?") or Adoption (e.g., "Are they using new features?").

3. Scenario: You’re designing a recipe app. How would you measure Task Success for the "save recipe" feature?

4. Answer: Track the % of users who successfully save a recipe on the first try (e.g., no errors, no accidental taps). Use usability testing to observe pain points.

5. Scenario: A PM wants to add a chatbot to a banking app to improve Engagement. How do you use HEART to evaluate this?

6. Answer: Define metrics first:
   • Engagement: % of users who interact with the chatbot weekly.
   • Task Success: % of users who resolve their issue via chatbot.
   • Happiness: Post-chat survey scores.
     Then A/B test the chatbot vs. no chatbot to measure impact.

Last-Minute Cram Sheet

1. HEART = Happiness, Engagement, Adoption, Retention, Task Success.
2. Happiness = Attitudinal (surveys, NPS); Engagement = Behavioral (DAU, session length).
3. Adoption = New users (feature usage); Retention = Returning users (churn rate).
4. Task Success = Efficiency (% of users who complete a task without errors).
5. ⚠️ HEART ≠ AARRR (HEART = UX; AARRR = business growth).
6. Jakob’s Law: Users expect your product to work like others (e.g., search bar top-right).
7. Hick’s Law: More choices = slower decisions (limit options).
8. Progressive Disclosure: Show only essential info upfront.
9. A/B Test: Compare two versions to see which performs better.
10. ⚠️ Vanity metrics (e.g., downloads) ≠ success. Track behavior (e.g., active users).