Connection is built in small moments

A self-directed concept scenario that puts a new barista behind the till. Research on frontline service says connection is made in brief personal moments, so I designed practice at those moments rather than a course about service standards.

Role: Sole designer
Sector: Retail & hospitality
Format: Branching scenario
Tools: Storyline · Illustrator · Generative AI

Try the scenario

The scenario open on a laptop in a café: a customer at the till and three replies to choose between

The problem

Coffeehouses train their baristas on service standards and still collect reviews that say the service was fine, and nothing more. The behaviors that turn a transaction into a relationship are well known and unevenly used.

Most training answers this with more information: policies, values, a refreshed module on customer-centricity. That treats it as a knowledge gap. My own frontline experience suggested a different problem: this was not a knowledge gap.

Baristas know what good service looks like. The opportunity to use it passes in seconds.

Digging deeper

Two sources shaped this: published research on frontline service behavior, and my own years working in the sector. Three findings mattered.

Small interpersonal behaviors can build rapport and influence how customers experience a service interaction.¹

Personalization is context-dependent. Even something as simple as using a customer’s name can strengthen rapport when it feels appropriate, but can have the opposite effect when it does not.²

Research into contextual decision-making also supports giving learners opportunities to notice and use relevant cues within a simulated environment.³

The gap was recognition, not recall.

For a new barista, knowing the behaviors wasn’t enough. They needed to recognize the opportunity to use them while serving a customer. That insight changed the design: instead of explaining good customer service and testing recall, I recreated the moment in which the decision happens.

Action map. The goal, customer connection will strengthen as baristas employ customer-centric practices, branches into observable behaviors: say the customer's name, say thank you after purchases, tell customers about the rewards program, tell customers about special and new offers, say regulars’ orders, say yes to customizations, offer a free drink during birthday month, and engage customers in conversation. Three are highlighted: offer to sign customers up for a rewards account, say the customer's name, and offer the free birthday drink. — **Action map.** I selected the three behaviors — using the customer’s name, acknowledging birthdays and introducing the loyalty program when appropriate — by synthesising the research, my own frontline experience and action mapping.

Into the design

The Storyline scenario recreates the counter. Customers approach the till, transaction information appears on screen and the cues sit inside that environment: scanning a rewards card reveals the customer’s name, a birthday notification appears when relevant. The learner has to notice and decide how to respond.

Those decisions accumulate. At the end, customer reviews reflect their performance — consistently effective choices earn five stars, missed opportunities earn fewer.

What I designed

A shift at the till, told through three customers. Each design decision follows from the finding above.

Three behaviors

Action mapping reduced customer-centricity to three things a barista does: say the name, offer the reward, mark the birthday. Everything else was cut.

Decisions, not questions

Every screen asks what you say next to the person in front of you. No knowledge checks, because the knowledge was never the problem.

The cue in view

The customer profile on the till shows the name and eligible rewards. Learners practice reading the cue, not remembering that one exists.

Help at the counter

The tip sheet is a job aid pinned to the till, available at any point. It models what support looks like in the real setting rather than front-loading it as content.

Consequence you can see

Badges mark each behavior as it is used, and the shift ends in the customer reviews you earned. Miss the moments and the stars say so.

On AI

I used generative AI to draft dialogue variations and to write the JavaScript behind the celebration animation — work I could specify but not hand-code. The behaviors, the branching and the feedback logic were design decisions I made from the map.

Process

From map to storyboard to a built, tested scenario.

Storyboard document with slide-by-slide prompts, visual notes and programming notes — **Storyboard.** Every slide specified as prompt, visual notes and programming notes, so the build was a matter of execution.

Mood board of café interiors, warm neutral palette and type samples — **Mood board.** The setting had to feel like a real independent coffeehouse, not a stock training environment.

Style guide showing the color palette with hex codes, button states, type scale and the three badge designs — **Style guide.** Palette, type scale, button states and badges fixed before building, so every screen stayed consistent.

The tip sheet job aid: three badges with short explanations of each behavior — **Job aid.** Three behaviors, one screen, downloadable and reachable from anywhere in the scenario.

The cue in view. The customer is present and the till shows his name and eligible rewards. Noticing that is the skill being practiced.

Grid of slide iterations from gray wireframes through to finished illustrated screens — **Iteration.** Wireframes first, then layout, then visual design — each row a screen resolved in stages.

The closing screen: three customer reviews with star ratings reflecting the learner's choices — **The payoff.** The shift closes on the reviews you earned. Missed moments show up in the stars, which is the whole argument of the piece in one screen.

The Storyline JavaScript editor with the confetti burst code — **Beyond the tool.** Custom JavaScript where the authoring tool stopped, specified by me and written with AI.

The badge celebration animation firing when a behavior is used correctly — **Earned feedback.** The badge lands at the moment the behavior is used, not only in a score at the end.

How I would evaluate it

This is a self-directed piece, so there are no deployment figures to report. In a live implementation I would not measure completion or quiz scores. I would look at the counter.

Concretely, I would compare observed use of the three target behaviors before and after the intervention, supported by customer feedback where available.

Are baristas recognizing and acting on opportunities to make an interaction personal?

Try the scenario

Reflection

Connection happens in small moments, not through more information.

I learned how much design work happens before anything is built. The action map did the hard thinking: once the goal was reduced to three observable behaviors, the scenario, the job aid and the feedback all followed from it.

It also changed how I treat authoring tools. Specifying what I needed and using AI to write the code got me past the tool's limits, which is now how I approach anything the software will not do on its own.

Sources

1 Lindsey-Hall, K. K., Jaramillo, S., Baker, T. L. & Bachrach, D. G. (2023). An examination of frontline employee–customer incidental similarities in service failure and recovery contexts. Psychology & Marketing, 40(6), 1047–1060. DOI
2 Srinivasa Raja, S. V., Cheng, Y. & Danaher, T. S. (2026). Call me by my name: The effects of addressing customers by their names, the underlying mechanisms, and the boundary conditions. Journal of Retailing. DOI
3 Chien, C. C., Ho, Y. T. & Hou, H. T. (2024). Integrating immersive scenes and interactive contextual clue scaffolding into decision-making analysis ability training game. Journal of Educational Computing Research, 62(1), 376–405. DOI