Turning pricing data into a self-service experience
Role
UX/UI Designer & Front-End Prototyper (independent)
Date
2024 — launched
Client
KFC franchisees via Converge for Restaurants
Platform
Deloitte Converge · Franchisee Portal
Sector
Restaurant / Enterprise
Challenge
How do you replace a slow, manual Excel reporting process with something that gives operators direct access to their own performance data — and actually changes how they explore it?
Background
Key Metrics Over Time is an interactive report within the KFC franchisee portal in Converge, Deloitte's pricing optimization platform. It allows franchise owners to explore the month-over-month performance of their six most critical business metrics — Total Sales, Margin, Guest Count, Food & Paper, Price Change, and Average Check — at whatever level of granularity they need.
Before this feature existed, Deloitte's price advisors assigned to KFC generated these reports manually from Excel files. The process was slow, error-prone, and entirely out of the franchisee's hands. Operators had no direct access to their own performance data.
The goal was straightforward: bring that report into the portal, make it self-service, and give franchisees the ability to explore their data on their own terms.
Process
The first step was a working session with the Deloitte price advisor assigned to KFC. As both a subject matter expert and a frequent user of the Excel report, they were the primary source for understanding which metrics mattered, how they were interpreted, and what the most common analysis patterns looked like.
This session defined the feature's scope: six key metrics expressed as month-over-month percentage variation, with the ability to combine different levels of geographic and channel filtering.
Rapid prototyping with AI
Rather than iterating slowly through static wireframes, I used Figma Make with Claude Sonnet to build a functional, high-fidelity prototype in a fraction of the usual time.
It's worth being precise about how AI was used here: the goal was not to delegate the solution to the model, but to use it as a speed tool. I provided the precise instructions — design system components, interaction logic, edge cases — and the AI executed the iterations. Design judgment, UX decisions, and product direction remained mine throughout.
This made it possible to build a prototype covering every possible filter combination and state before presenting it to the team — which turned out to be critical for stakeholder alignment.
The feedback that changed the feature
The problem was never the report itself — the report already existed in Excel. The real gap was that users couldn't maintain visual context when switching between metrics: they got lost, couldn't tell which element belonged to which line, couldn't track what was active and what wasn't.
The solution wasn't to reorganize the information. It was to redesign the sequence of attention: one metric active by default, with animations that turn each activation into a deliberate, visible event — both in the KPI card and in the line chart. Users enable metrics one at a time, and each activation gets its own moment.
The side effect was unexpected: instead of scanning the dashboard like a passive report, users shifted into exploration mode. The animations put them in a mindset of curiosity — discovering each metric combination with a sense of delight. That wasn't in the brief. It was a consequence of designing attention with intention.
Handoff with animation specifications
The Figma handoff file included not just designs, but detailed annotations on animations and transitions — because each one had a specific functional justification:
- Fade out → update → fade in on KPI cards when filters change, to signal unambiguously that the data has changed. An in-place update is too subtle and undermines confidence in the data.
- Lines drawing left to right on initial chart render, to guide temporal reading.
- 30ms stagger between cards to avoid a jarring pop-in and create a sense of progressive response.
Documenting this in the handoff ensures that the design intent reaches the final product — not just the visual appearance.
Key design decisions
One metric active by default. Not all metrics active from the start. Reduces initial cognitive load so users build context progressively instead of parsing everything at once.
Visible gap for missing data. Not connecting the points or showing zero. A 0% value and a missing data point are different interpretations — the chart had to communicate that clearly.
KPI cards show 12-month averages. Not the most recent month. Cards are a stable summary; the chart is for exploration. Mixing the two responsibilities would confuse both.
Accounting notation (5.2)% for negatives. Not standard -5.2%. Financial convention for business users — more readable in the context where franchisees are already used to accounting formats.
Fade out/in when filters change. Not in-place update. A clear signal that the data has changed builds trust in data freshness — critical when operators are making pricing decisions based on what they see.
Results and lessons learned
The feature was approved quickly because the prototype covered every possible state and interaction combination. This eliminated ambiguity in reviews with stakeholders and developers, significantly reducing the back-and-forth typical of approval cycles.
It launched and is currently in the user feedback collection phase. The foundation built — filter system, metrics architecture, animation logic — is designed to grow without starting from scratch.
- Attention is a design resource, not an assumption. The report had all the right information from the beginning. What was missing was a way to manage how users process it. Redesigning the sequence of attention — not the content — was what solved the real problem.
- Well-justified animation changes user behavior. Every transition had a function: building trust in the data, guiding attention, signaling state changes. Delight was the outcome, not the goal.
- AI as an iteration accelerator has a clear ROI. The value wasn't in generating the solution — it was in compressing the time between a design decision and its validation. Showing a complete, functional prototype changed the quality of every stakeholder conversation.