Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 35

Effective Presentations: Data & Visuals

Recommended resources

Introduction

In the previous lesson, we built the skeleton of your client-winning case study—a Figma template structured around the core narrative of Problem -> Solution -> Impact. You learned to frame your work not as a design exercise, but as a sales asset engineered to convince a founder or product manager of your value.

This lesson is about putting flesh on those bones. We will focus on the most critical part of your case study: presenting your findings and recommendations. Simply showing a "before" and "after" screenshot is not enough. To command a $5k project fee and justify your value, you must present your findings with such compelling data and visuals that inaction becomes more expensive for the client than hiring you.

By the end of this lesson, you will be able to transform a simple usability issue into a quantified "money leak" and present your design recommendation as a high-ROI business investment.

1. Visualizing the Problem: From Screenshot to Annotated Evidence

Your client is busy. They won't spend time trying to decipher what's wrong with a screenshot. Your job is to guide their eye and immediately connect a visual flaw to a business problem. This is done through annotation.

An effective annotation doesn't just say "this is bad." It identifies the issue, explains why it's an issue from a user's perspective, and assigns a severity level.

Mobile App Settings Page Design Audit Report Example
This example shows how to use numbered annotations with a clear, color-coded legend (e.g., Needs Improvement, Needs to be Fixed). This is a professional and highly efficient way to communicate multiple findings on a single screen. Notice how the comments are concise and actionable.

While visual annotations show what is wrong, you still need to prove why it matters. The most compelling way to do this is to attach a dollar value to the problem.

Prioritization of Issues by Economic Impact
This table is the bridge between a UX finding and a business problem. It categorizes issues by impact (High, Medium, Low) and, most importantly, assigns an estimated monthly economic impact to them. A "High" impact issue isn't just a critical usability flaw; it's an "$83,300/month problem."

Your task is to combine these two concepts. For each major finding in your case study, you will present an annotated screenshot immediately followed by its estimated financial cost.

2. Presenting Recommendations as High-ROI Solutions

Once you have established a problem and its cost, your recommendation is no longer a subjective design suggestion; it is a proposed solution to a quantified business liability. The most effective way to frame this is by calculating the potential Return on Investment (ROI).

Let's break down the formula for calculating the financial impact of your UX work. This isn't complex accounting; it's a straightforward estimation that frames your value in the language of business.

Calculating ROI for Design Projects

The NNgroup video 'Calculating ROI for Design Projects' provides a simple, four-step method to turn a UX metric into a financial KPI. This is the core skill for justifying your audit fee.

Watch the entire video (3 minutes). Pay close attention to the example of the health insurance website: Collect UX Metric: They identify the number of support tickets for registration. Choose a KPI: They select 'cost savings' as the business goal. Convert Metric to KPI: They multiply the reduction in tickets by the cost per ticket to get the total monthly savings. Report Responsibly: They emphasize that these are estimates, which manages expectations and maintains your credibility.

This framework gives you a defensible way to project the value of your recommendations. For example:

  • Metric: 30% of users drop off on the confusing pricing page.
  • KPI: Increased conversion rate and revenue.
  • Calculation: Fixing the pricing page could recover 10% of those users. If 1,000 users visit the page per month and the LTV is $500, recovering 10% (100 users) represents a potential gain of $50,000.

When you present your recommendations, you should do so using a clear "Problem-Solution" or "Problem-Prioritization" format, as you'll see in the following resource. Since you are building your report in Figma, these examples are directly applicable.

UX Audit Report Examples: Structure, Best Practices, and Tools

The Eleken article 'UX Audit Report Examples' demonstrates several excellent, Figma-based report structures. We'll focus on the formats that are most effective for client communication.

Review these sections, focusing on the visual structure: 'Create UX audit report': Note the key recommendations: use annotated screenshots, prioritize issues by severity and business impact, and provide recommendations with alternatives. 'Example 2: Problem-solution UX audit report': This is a powerful format. A dedicated slide explains the problem, and the next slide proposes the solution. This is great for clarity. 'Example 3: Problem-prioritization UX audit report': This format explicitly ranks issues by user impact, which helps clients decide where to invest their resources first. It directly aligns with the Impact/Effort matrix you learned about in Module 2.

Your case study should feature your top 1-3 recommendations, presented as "Before/After" comparisons. Each "After" shot should be accompanied by a projected ROI calculation.

3. Crafting a Compelling Presentation Narrative

Having strong data and visuals is essential, but they must be woven into a compelling story to be effective. A list of findings is forgettable; a story of overcoming a costly challenge is persuasive.

Your case study presentation should follow a classic three-act structure:

  1. Act I: The Setup. Introduce the client and the problem, immediately establishing the financial stakes (e.g., "Company X was losing $20k/month due to a broken onboarding flow").
  2. Act II: The Confrontation. This is where you present your key findings. Show the annotated screenshots of the flawed interface. This is the "challenge" or "confrontation" your design must overcome.
  3. Act III: The Resolution. Present your "after" designs as the solution. Show the positive results and the ROI calculation. This is the successful outcome and happy ending.

How to Present a UX Case Study in a Job Interview (Download Template)

While this video from Mizko is framed for job interviews, its core principles on storytelling are directly applicable to presenting a case study to a client. Focus on how he structures the narrative.

Watch the section from 08:12 to 10:32. Pay attention to these four key takeaways for effective presentation: It's about the narrative, not the process: Don't just list steps. Explain the why behind your actions. The three-act structure: Use the Setup -> Confrontation -> Resolution model to create a compelling story. The rule of thirds: Avoid overwhelming your audience. Focus on the three most impactful findings or takeaways. Make insights interesting: Your findings should be presented as 'wow' moments that make the client see their product in a new, and more profitable, light.

By applying this narrative structure, you transform your audit report from a technical document into a persuasive argument for change.

Your Deliverable: Populate Your Case Study Template

Now, let's apply these principles. Your task is to take the Figma template you created in the last lesson and populate the core sections with compelling, data-driven content for one hypothetical finding.

Task (30 minutes):

  1. Find a Target: Go to a SaaS product's website and find one screen in their signup or onboarding flow that has clear usability issues (e.g., a confusing form, unclear pricing, a convoluted step).
  2. Populate the "Problem" Slide:
    • Take a screenshot of the flawed screen and place it on your 03_The Problem slide.
    • Using Figma's design tools, create annotations like in the LINK example. Highlight 2-3 specific flaws (e.g., poor labeling, lack of hierarchy, confusing CTA).
    • Create a text box titled "Financial Impact". Invent a plausible "money leak" using the ROI formula from the NNgroup video.
      • Example: "Hypothesis: This confusing form causes a 40% user drop-off. With 1,000 signups/month and a $300 LTV, this represents a $12,000/month potential revenue leak."
  3. Populate the "Solution" Slide:
    • On your 04_The Solution slide, create a quick, clean "After" mockup of how you would fix the screen. Focus on clarity and best practices.
    • Present it side-by-side with the "Before" screenshot.
    • Add a brief caption: "Recommendation: Redesigned the form with a single-column layout and clear field labels to reduce cognitive load by an estimated 50%."
  4. Populate the "Business Impact" Slide:
    • On your 05_The Business Impact slide, present the hypothetical positive outcome.
    • Create a large, bold metric: "+15% Onboarding Completion Rate".
    • Add a simple ROI table:
      • Investment (Audit Fee): $5,000
      • Projected Annual Gain: $54,000 (from reduced drop-off)
      • Projected ROI: 10.8x
    • Optional: Create a simple bar chart comparing "Old Flow Completion %" vs. "New Flow Completion %".

This exercise gives you a tangible, reusable asset. You can now swap out the screenshots and data for any real project, rapidly generating a client-winning case study.

Conclusion

You now know how to present audit findings and recommendations not just as a designer, but as a business consultant. By connecting every visual flaw to a quantifiable financial metric, you elevate your work from a "nice-to-have" to a "must-have" investment.

Key Takeaways:

  • Annotate, Don't Just Show: Use visual callouts to guide your client's attention to specific UX flaws.
  • Quantify Everything: Every significant finding should have an estimated dollar value attached to it, framed as a "money leak."
  • Sell Solutions, Not Designs: Present your recommendations as high-ROI investments that solve expensive problems.
  • Tell a Story: Use the three-act structure (Setup, Confrontation, Resolution) to create a narrative that is both memorable and persuasive.

Preview of the Next Lesson:

You have now built all the core assets for your audit service: the pitch, the Loom audit, the report structure, and now the compelling content to fill it. In our final module, From Audit to Retainer: Advanced Tactics, we will move beyond securing the first project. You'll learn how to distinguish technical debt from design flaws, align your recommendations with a client's development roadmap, and strategically convert your one-off audit into a recurring, high-value retainer relationship.