The HEART Framework: Measuring What Truly Matters in Product Design
In product development, teams often rely on a handful of familiar metrics to judge success. Retention rates, click-through rates, or conversion percentages frequently become the primary signals guiding product decisions. While these metrics can be useful, they rarely capture the full picture of how people actually experience a product. This is where the HEART framework offers a more human-centred approach to measurement. Developed at Google by UX researchers Kerry Rodden, Hillary Hutchinson and Xin Fu, the HEART framework was introduced in the paper “Measuring the User Experience on a Large Scale: User-Centered Metrics for Web Applications.” (Link to paper here) It was presented at the CHI Conference on Human Factors in Computing Systems and has since become one of the most widely used models for measuring user experience in digital products. The framework helps teams connect product metrics with actual user experience, rather than focusing purely on behavioural numbers. What HEART stands for HEART is an acronym representing five categories of user-centred metrics: • Happiness• Engagement• Adoption• Retention• Task Success Each category represents a different aspect of how users experience a product. Together they provide a more complete picture than traditional product metrics alone. Happiness Happiness measures how satisfied users feel when interacting with a product. This is typically captured through: Rather than asking only what users do, this metric asks how they feel about doing it. Engagement Engagement measures how actively users interact with the product. Typical indicators include: Engagement focuses on whether users find the product valuable enough to repeatedly interact with it. Adoption Adoption measures how many new users start using a product or feature. For example: Adoption helps teams understand whether new functionality is successfully entering the user’s workflow. Retention Retention measures whether users return over time. Examples include: Retention is often already measured in many organisations, but within HEART it becomes one component of a broader experience model rather than the single definition of success. Task Success Task Success measures how effectively users can complete their intended goals. Common indicators include: This category focuses directly on usability and efficiency, making it particularly valuable when designing complex tools or workflows. Do you need to use all five HEART metrics? One of the strengths of the HEART framework is its flexibility. It is not always necessary to measure all five categories at the same time. In practice, teams often select two or three metrics that best reflect the goal of a specific project or feature. For example: • A new feature launch may focus primarily on Adoption and Engagement• A workflow redesign may prioritise Task Success and Happiness• A subscription product may emphasise Retention and Engagement Using all five categories can provide a comprehensive view of the user experience, but it is often more practical to focus on the metrics that are most relevant to the problem you are trying to solve. The key idea behind HEART is not to track more metrics, but to ensure that at least some of them reflect the quality of the user experience, not just behavioural activity. How the HEART framework is used in practice The strength of HEART lies in how it translates abstract user experience goals into measurable signals. Example 1: Improving a checkout experience A team redesigning an e-commerce checkout flow might measure: This allows the team to understand whether improvements actually make the experience easier and more satisfying, not just whether users clicked a button. Example 2: Designing tools for financial decision-making In financial software, users often work with complex data, high stakes decisions and fragmented workflows. A product designed for credit assessors, for instance, might track: In environments where accuracy and trust are essential, task success and confidence often matter more than raw click metrics. Why HEART is better than relying on single metrics Many product teams rely heavily on simple indicators such as click-through rate or retention. While useful, these metrics can be misleading when interpreted in isolation. A high click rate does not necessarily mean users understand a product.A high retention rate does not guarantee the experience is enjoyable. Users may return simply because they have no alternative, not because the product serves them well. The HEART framework improves measurement in three important ways. 1. It balances behaviour and perception Traditional analytics measure behaviour. HEART combines behaviour with user sentiment and satisfaction, giving a more complete view of experience quality. 2. It focuses on user goals Rather than optimising superficial metrics, HEART encourages teams to measure whether users successfully achieve their intended tasks. 3. It aligns teams around experience outcomes Because HEART connects metrics to experience categories, it becomes easier for designers, product managers and engineers to discuss what success actually means for users. Measuring what matters In complex digital products, especially those involving decision-making, analysis or professional workflows, success cannot be reduced to a single number. The HEART framework reminds us that a good product is not simply one that is used frequently. It is one that users understand, trust and succeed with. By combining satisfaction, engagement, adoption, retention and task success, teams can move beyond surface-level metrics and begin measuring something far more meaningful: the quality of the user experience itself. The HEART Framework: Measuring What Truly Matters in Product Design In product development, teams often rely on a handful of familiar metrics to judge success. Retention rates, click-through rates, or conversion percentages frequently become the primary signals guiding product decisions. While these metrics can be useful, they rarely capture the full picture of how people actually experience a product. This is where the HEART framework offers a more human-centred approach to measurement. Developed at Google by UX researchers Kerry Rodden, Hillary Hutchinson and Xin Fu, the HEART framework was introduced in the paper “Measuring the User Experience on a Large Scale: User-Centered Metrics for Web Applications.” It was presented at the CHI Conference on Human Factors in Computing Systems and has since become one of the most widely used models for measuring user experience in digital products. The framework helps
How to Recreate an AI Prototype from Claude or Figma Make into a Figma Design File
🔁 Workflow between Claude and Figma Note: This document is based on my experience and trials/errors but summarised with AI From Claude to Figma (Prototype → Design) From a Claude TXM prototype → Rebuild to HTML If your prototype in Claude was created in another format (e.g. TXM or non-HTML text output): From Figma to Claude (Design → Functional Prototype) ⚙️ Figma Make (AI Design Assistant) Workflows From a regular Figma design → Figma Make 💡 Pro Tips
From Clicks to Customers: UX and Product Design That Drives Conversions
Why Aren’t Your Website Visitors Becoming Customers? Your business is already working. You’re profitable. You’re getting traffic.But visitors land on your site, skim a few pages — and leave.No contact. No sign-up. No next step. So what’s stopping them? As a UX designer, I work with established, growth-minded companies to identify the invisible blockers that quietly stall conversions. In most cases, it comes down to one (or more) of these seven challenges: 1. Search intent mismatch They were looking for something specific — but your site didn’t reflect it. If your landing page doesn’t meet their expectations within seconds, they’re gone. 2. Unmet expectations The visitor expected more — clearer value, stronger credibility, or a smoother experience. A competitor might simply feel easier to trust or understand. 3. Unanswered questions What’s the price? Is this relevant for my business size? How do I get started? If key questions aren’t addressed clearly and early, visitors hesitate. 4. Unclear messaging Even great products fall flat with vague headlines or jargon-heavy content. Your site should communicate what you offer, who it’s for, and why it matters — in under 10 seconds. 5. Lack of trust signals No testimonials, case studies, or proof of results? An outdated look or unclear positioning can make even a solid offer feel risky. 6. No clear next step “Contact us” isn’t enough. Effective sites guide visitors through a confident journey — with timely CTAs, options, and relevance. 7. Poor performance Slow load times, clunky mobile layout, or accessibility issues can silently kill conversion. People judge fast — and rarely give second chances. What Happens When You Address the Right Problems? Improving your site’s UX isn’t about trends or aesthetics — it’s about turning attention into action. The role your website plays depends on where your product sits in the buyer’s mind.Think of it like Maslow’s hierarchy: If you’re already generating traffic and sales, but conversions are lower than they should be — there may be a huge upside in fixing just a few friction points. Through smart, user-centered design and strategic messaging, I help medium-sized businesses like yours turn silent interest into qualified leads and measurable growth. Let’s explore what’s possible. Contact: hello(a)uxdesignpath.com
How to Create a GIF in Figma: A Simple and Fast Guide
Looking to create a fun GIF animation in Figma quickly and without complications? This guide will walk you through the easiest way to design and export your GIF in just a few steps. Whether you’re a beginner or a seasoned designer, these instructions will help you create smooth animations without the risk of failure. Step 1: Set Up Your Project in Figma 💡 Tip: Keeping your frame dimensions small ensures a faster workflow and an optimised GIF file size. Step 2: Design and Maintain Consistency in Movement To create smooth animations, consistency in your elements is crucial. Here are two approaches: Option 1: Duplicate Entire Frames Option 2: Copy and Paste Elements Across Frames 💡 Tip: Organise your layers and frames clearly to avoid confusion during animation. Step 3: Export Frames from Figma 💭 Why not WebP? Currently, Figma doesn’t support WebP exports, but we hope this feature comes soon, as it’s an excellent format for web animations. 🙏 Step 4: Create the GIF with an Online Tool Now it’s time to combine your exported images into a GIF. Here’s how: Step 5: Adjust GIF Settings and Effects (Optional) GIF Effects: Step 6: Preview and Save Your GIF 🎉 Congratulations! You’ve created your GIF in Figma. Time to share it and impress your audience! FAQs: Creating GIFs in Figma Can I Create a GIF Directly in Figma? No, Figma doesn’t currently support exporting GIFs directly. However, by exporting frames and using tools like ezGIF, you can easily create high-quality animations. How Do I Ensure Smooth Animation? Use small, incremental changes between frames and ensure all elements maintain consistency across frames. Are There Plugins for Creating GIFs in Figma? Yes! Plugins like Figmotion can help with animations directly in Figma. However, they may still require exporting frames for GIF generation. Final Thoughts Creating GIFs in Figma is a straightforward process when you break it down into clear steps. From designing frames to generating animations with tools like ezGIF, you have all the resources to create stunning, professional-looking GIFs. If you found this tutorial helpful or have any questions, feel free to drop a comment below! 🌈👏 Here is a example I made for this post:
UX Meetups i Stockholm 🌈
Stockholm är en levande stad för UX-entusiaster! Här finns det gott om meetups där du kan träffa likasinnade, utbyta erfarenheter och lära dig av branschens bästa. Oavsett om du är nybörjare eller erfaren UX-designer, finns det något för alla. Håll utkik efter populära event på plattformar som Meetup.com eller LinkedIn, där grupperegelbundet arrangerar träffar. Var inte blyg – dessa meetups är kända för sin öppna och välkomnande atmosfär! Mina favorit UX grupper STHLM UX Design Open Space “This is a Stockholm-based-community for professional UX/service designers and writers to make connection & have discussions around design. We have off-line meetups (e.g. AfterWork, brunch). Join the group and make sure you RSVP for the event you’re going.” Länk till deras LinkedIN: https://www.linkedin.com/groups/9393080/Länk till deras event: https://www.meetup.com/sthlm-ux-design-open-space/ Har själv inte besökt STHLM UX design Open Space men det finns på min lista eftersom de verkar ha väldigt trevliga events. Ladies the UX “Welcome to Ladies that UX Stockholm, the first chapter in Sweden! 🇸🇪 We are a community of women in UX who support each other, push the UX boundaries, and promote female skill and talent across the globe.” Hemsida: https://ladiesthatux.com/stockholmLänk till deras event: https://www.meetup.com/ladies-that-ux-stockholm/ Har själv besökt deras event som är mer internationellt och väldigt välkomnande. De talks och event jag har varit på har varit mycket professionella med bra möjligheter att mingla och skaffa nya kontakter. FUX – Femmes in UX “A group and a network for those who identify themselves as women or non-binary within the field of UX. A platform for sharing experiences, events, questions etc. And of course, attend amazing meetups! <3” Länk till deras LinkedIn: https://www.linkedin.com/company/femmesinux/about/ Länk till deras event: https://femmesinux.confetti.events/ Personligen är detta min favorit arrangör om du som mig identifierar dig som kvinna. Det är alltid väldigt seriösa och hög kvalitet på talks med många seniora designers involverade. Observera att platserna på deras event ofta bokar slut inom några dagar så va beredd när de har event! Hoppas denna post va till hjälp för dig som vill skaffa kontakter inom UX och utveckla dig i din roll! 💖 UX Meetups i Stockholm 🌈 (In English) Stockholm is a vibrant city for UX enthusiasts! There are plenty of meetups where you can meet like-minded people, exchange experiences, and learn from the best in the industry. Whether you’re a beginner or an experienced UX designer, there’s something for everyone. Keep an eye out for popular events on platforms like Meetup.com or LinkedIn, where groups regularly organize gatherings. Don’t be shy – these meetups are known for their open and welcoming atmosphere! My favorite UX groups STHLM UX Design Open Space “This is a Stockholm-based-community for professional UX/service designers and writers to make connection & have discussions around design. We have off-line meetups (e.g. AfterWork, brunch). Join the group and make sure you RSVP for the event you’re going.” LinkedIN: https://www.linkedin.com/groups/9393080/Link to events: https://www.meetup.com/sthlm-ux-design-open-space/ I haven’t personally attended STHLM UX Design Open Space yet, but it’s on my list because they seem to have really enjoyable events. Ladies the UX “Welcome to Ladies that UX Stockholm, the first chapter in Sweden! 🇸🇪 We are a community of women in UX who support each other, push the UX boundaries, and promote female skill and talent across the globe.” Website: https://ladiesthatux.com/stockholmLink to events: https://www.meetup.com/ladies-that-ux-stockholm/ I’ve attended their events, which are more international and very welcoming. The talks and events I’ve participated in have been highly professional, with great opportunities to mingle and make new connections. FUX – Femmes in UX “A group and a network for those who identify themselves as women or non-binary within the field of UX. A platform for sharing experiences, events, questions etc. And of course, attend amazing meetups! <3” LinkedIn: https://www.linkedin.com/company/femmesinux/about/ Link to events: https://femmesinux.confetti.events/ Personally, this is my favorite organiser if, like me, you identify as a woman. The talks are always very serious and of high quality, with many senior designers involved. Keep in mind that their events often fill up within a few days, so be ready when they announce one! I hope this post was helpful for those of you looking to make connections in UX and grow in your role! 💖
Different design process and approach to UX. The design process for start-up and internal product
When considering design processes, it’s essential to tailor them to your company’s unique needs. Before diving into design implementations or interface updates, it’s crucial to understand the two primary approaches available. The first approach is more agile and fast-paced. It involves adopting a straightforward, focused perspective, allowing for quick iterations and rapid deployment. This method is ideal for companies that need to move swiftly and are comfortable with a narrower focus in their design process. On the other hand, a more cautious and holistic approach takes time but offers a deeper understanding of the broader context. By taking this slower route, you can better grasp the “how” and “why” behind user interactions, which can lead to more effective long-term outcomes. Deciding whether to dive deeply into user experience design for your product depends largely on the product’s role in your company’s success. If your product is a secondary, “nice-to-have” feature, investing an additional 10% of effort may not yield significant results. However, for products where user engagement is critical—like Instagram—implementing new features without a comprehensive understanding of user experience can be detrimental. For instance, in my own experience working with two different products at the same company—an internal tool (a complex core-banking platform) and a SaaS credit insight tool for the European market—the approach to UX and design varies significantly. The value of one product lies in its usability and the service it provides, while the other is tied to our internal productivity and processes. As a result, our strategies for improving these two products and how we approach the design process differ greatly. While both products aim to follow design thinking principles and the triple diamond diagram, the way we implement these methodologies is distinct for each product, reflecting their specific needs and objectives.
10-Step guide to boost your design maturity and champion UX excellence
Design maturity reflects an organization’s proficiency in incorporating customer and user feedback into its design processes. High design maturity means design teams rely on concrete customer and business-centric metrics rather than gut instincts. These metrics guide the creation of experiences that enhance both customer satisfaction and the company’s bottom line. Regular communication of customer feedback and a commitment to delivering exceptional experiences characterize such organizations. Continuous collection of fresh input ensures that all design elements, from engagement touchpoints to physical products, effectively meet customer needs. 10-Step Guide to Boost Your Design Maturity 1. Take Stock of Where You Are Start by looking at how you currently design things. Do you listen to your customers? Let’s figure out where you’re at and how we can level up. 2. Set Clear Goals That Matter Define what success looks like in terms of making customers happy and boosting the business. These goals will be your guiding stars. 3. Create Feedback Channels Set up ways to constantly gather feedback from customers, like surveys or user interviews. Make it easy and regular. 4. Share Feedback with Everyone Don’t keep valuable feedback locked away. Spread it across the team so everyone knows what’s working and what’s not. 5. Learn to Love Data Train your team to use data to inform their designs. Move away from gut feelings and embrace a more strategic approach. 6. Put Customers First Make sure everything you do is about delivering an amazing experience for your customers. This should be a top priority. 7. Keep Iterating Always be on the lookout for fresh feedback and new insights. Use this to continually refine and improve your designs. 8. Get Customers Involved Bring customers into the design process. Their input is gold, and it helps ensure you’re meeting their needs from the get-go. 9. Measure Your Impact Regularly check how your design changes are affecting customer satisfaction and business results. Use this info to keep getting better. 10. Champion Design Excellence Foster a culture that strives for design excellence. Celebrate your wins and learn from your challenges to keep growing. I hope this list can help you in your UX journey! Feel free share if you found it interesting 💖 Good luck 🏆
Bättre kodkvalitet med bra design
Vem vill inte minskad risk för misstag, förbättrad kodstruktur och en organisation som sparad tid och resurser? Detta är några av de fördelar som en UX designer kan ha på ditt projekt. Det vanligaste bilden jag märker att de i min omgivning har om “bra design” är att design säljer och det ger en viss fördel framför konkurrenter, många företag har inte en fullständig förståelse för vad UX design är och nyttan en en ux designer ger till användargränsnaitt för appar, system, hemsidor mm.. och hur det kan gynna deras verksamhet på flera sett. Företag med låg designmognad ser det som en onödig extra kostnad eller som något som kan hanteras av interna resurser, ofta en utvecklare som får lösa skisser som instruktion som den ska genomföra direkt i koden. Större företag som kan investera i sina produkter har en högre designmognad, och man kan generellt säga att de riktigt stora företagen investerar väldigt mycket i design som fyller en central roll. Ett projekt får starka rötter under designprocessen och detta leder inte bara till ett ‘snyggt interface’, det kan även leda till en bättre kodkvalitet och en högre produktivitet i hela teamet. Låg designmognad är roten till många problem När jag har jobbat med företag med låg designmognad har jag sett många projekt bryta ut i fullständig kaos när designen hanteras som en ‘on the fly’ feature som man kan spara in tid eller resurser genom att hasta igenom med minsta möjliga effort. Med en önskan att spara pengar så blir slutprodukten istället bristande i kvaliten på flera sätt. Du kan läsa min post om hur man kan öka designmognaden här Bättre motivation, effektiviet, kodkvalitet och stolthet Jag har märkt en stark relation mellan utvecklares motivation och väldefinierad, bra design. När design saknas, blir saker otydlig vilket leder till oklara direktiv som slukar motivation, tid och effektiviet. Något som man inte heller brukar prata om är hur man känner inför ett projekt, med en bra design upplever man en annan typ av stolthet över sin produkt, detta innebär även självklart att anställda som är involverade blir mer motiverade när designen finns på plats och har en viss nivå av kvalitet. Detta kan även påverka säljare och hur de upplever att det känns att presentera produkten på ett möte med potentiell kund. En välutformad designskiss ger en tydlig struktur för programmets layout och funktionalitet. Detta kan leda till en mer strukturerad och organiserad kod, vilket i sin tur kan leda till en förbättrad kodkvalitet.En UX designer kan samarbeta med Utvecklaren för att skapa en design som underlättar kodning och förbättrar kodens struktur och organisation. Designen är kompassen som leder vägen mjukt och tidseffektivt En genomtänkt design handlar inte bara om att presentera några ‘frames’ för utvecklare eller ha ett designsystem som man följer. Att ha en genomtänkt design handlar om att man redan innan projektets gång har lagt ut hela pusslet, studerat det, lagt om vissa bitar för att man inser att det kortsiktigt inte krävs viss funktion för att uppnå de affärsmål man satt eller för att man inser att man kan dela upp projektet i 2 faser. En initial fas där man bygger upp kärnvärdet av en produkt som kan snabbt generera inkomster, och en annan fas där man lägger in “nice to have” funktioner som kan planeras in lite beroende på den kundgrupp man förskaffat sig eller vill nå ut till. Man brukar även kalla denna approach lean design, vilket är något jag förespråkar mycket. Fördelar med Lean Design: Effektivitet: Kvalitet: Innovation: Samarbete: Flexibilitet: Några specifika exempel på fördelar: Det är dock viktigt att notera att Lean design inte är en garanti för framgång. Det kräver engagemang från ledningen, en väldefinierad process och en kultur av kontinuerlig förbättring.
Framgångsrik Utveckling av Företagsappar: Från Idé till Verklighet
Att ha en vision och massor av idéer för ett företag är en fantastisk utgångspunkt. Men när det kommer till att förvandla dessa idéer till verklighet, särskilt när det gäller att skapa en app eller ett system, är det avgörande att följa en välgenomtänkt process. Här är stegen från research till en färdig design och hur du kan optimera varje steg för att säkerställa framgång.