The TV Sales Enablement Simulator

An agile onboarding lesson that takes new associates from learning to live-floor practice

Portfolio concept · HTML lesson with a Figma blueprint, built to move into Rise 360

Audience: New TV-department sales associates at a big-box electronics store, and the leads who onboard them.
Problem: Onboarding taught every TV spec but never let associates practice matching a TV to a real customer.
My role: Sole designer: sprint plan, Figma blueprint and prototype, scenario writing, assessments, visuals and the HTML build.
Constraint: Four look-alike technologies to tell apart without a spec dump, in a format that moves into Rise 360 one-to-one.
Outcome: A 10-section lesson with a pre-check, five practice customers and a 10-question exit assessment that shows growth by topic.

Display Tech Essentials is a scrolling onboarding lesson that takes new TV associates from knowing the specs to choosing the right TV for a real customer. Associates start with an ungraded pre-check, learn the four TV technologies on the floor (OLED, Mini-LED, QLED and Crystal LED) through side-by-side visuals, practice with five customers who each bring a different room and need, and finish with a 10-question exit assessment that shows how far they've come.

Audience

New sales associates in the TV department of a big-box electronics store, and the leads who onboard them.

Responsibilities

Instructional Design Tasks (Turning my own first weeks on the sales floor into a learning need, Planning four agile sprints from knowledge to practice, Writing a pre-check, five customer scenarios and a 10-question exit assessment, Designing feedback for every wrong answer, Applying UDL and Mayer's principles to limit cognitive load), Visual Design, Figma Prototyping, Web Development.

Tools Used

Figma, Figma AI, Claude, HTML, CSS, JavaScript, GitHub Pages. Built to move into Articulate Rise 360.

Start the lesson

My process

From problem to prototype

Sprint 1 · Core knowledge

Turned my own first weeks on the Best Buy floor into a learning need, then built the core: four TV technologies, five specs and an ungraded pre-check.

See it Sprint 2 · Visual layers

Added same-scene TV screens, light-layer diagrams and at-a-glance meters, then made the screens far more distinct after feedback.

See it Sprint 3 · Practice

Wrote five customer scenarios with feedback for every wrong pick and a Take Again loop, plus a photo-led guide and the three moments of the sale.

See it Sprint 4 · Polish & measure

One question at a time, three choices everywhere, keyboard and phone support, and a 10-question exit assessment.

See it

The Problem

When I started as a sales associate at Best Buy, I completed the training modules and learned the details of every TV technology, but I never got to practice selling one. On the sales floor there was too much to sort out in my head: panel types, room conditions, installation, and add-on services. Even though I was comfortable with technology, I struggled to match the right TV to the right customer. A wrong match leads to a return, which costs the store and frustrates a customer who trusted my advice.

The Solution

I designed an onboarding lesson in two halves: learn, then practice. Information is revealed one piece at a time, so new associates aren't flooded with specs, and every TV is shown on the same night-sky scene, so learners can see the difference in black level, brightness, color and glow before they read about it. Then they apply it with five customers, each with a different room and need. Every wrong pick explains why, and a Take Again loop lets them try until they get it right. A pre-check and an exit assessment bookend the lesson, so growth is easy to see.

Learning objectives

What learners will be able to do

Given a customer's room, viewing habits and budget, a new TV associate will:

01
Explain how OLED, Mini-LED, QLED and Crystal LED each make light, and each one's main trade-off.
Measured by: the Specs and Technologies questions on the exit assessment.
02
Recommend the technology that fits the customer's room and needs, and explain why the alternatives fall short.
Practiced with five customer scenarios; measured by the Matching customers questions.
03
Run the sale in three moments: welcome and discover, demo and recommend, then close.
Measured by: The sale questions. Mastery target: 80% or higher on the exit assessment.

Every question has three choices, and every wrong answer explains why.

Full Development

I planned the build as four agile sprints in Figma: core knowledge, visual layers, customer practice, then polish and measurement. The Figma file holds the sprint board, a component library, a user-flow map, and a Rise-style scrolling prototype with every section tagged to its matching Articulate Rise block, so the lesson can move into Rise 360 one-to-one.

I built the working lesson with Claude in HTML, CSS and JavaScript and published it on GitHub Pages. I generated the scene art with Figma AI in one consistent navy-and-slate style. For the three moments of the sale, I generated all three scenes as a single storyboard, so the same associate and customer appear in every step.

Feedback shaped the design along the way. My first TV screen visuals were realistic but too subtle; at thumbnail size they all looked the same, so I rebuilt them to exaggerate one signature trait per TV. The pre-check first showed four questions at once and took up too much space, so it became one question at a time with a results screen, the way a Rise quiz works. I also made every question three-choice for consistency, and replaced a single final scenario with a full exit assessment that reports results by topic.

Start the lesson

Accessibility & UDL

Designed so more learners can get in

Built in

Information is revealed one piece at a time through accordions, flip cards and tabs, so new associates aren't flooded with specs.
Every visual sits next to the words it explains, and all four TVs show the same scene, so there's only one picture to learn (Mayer's contiguity and signaling principles).
Feedback never relies on color alone: every result has an icon and a word, and the meters show scores as text.
Keyboard friendly, with arrow-key tabs, a visible focus ring, 44 px click targets and a written description for every image.
An ungraded pre-check and a Take Again loop make mistakes safe practice. It also respects reduced-motion settings and works on a phone.

Next accessibility pass

Run a full WCAG 2.2 AA audit, including screen-reader testing with VoiceOver and NVDA.
Pilot it with new associates and add a short confidence rating before and after.
Add narrated audio for each section as a second way in.
Rebuild the exit assessment as a Rise Quiz lesson so scores report to the LMS automatically.

Results & evaluation

The lesson already captures the clearest learning signal: each associate's pre-check score next to their exit score, broken down by topic. Here's how I'd evaluate it with a real onboarding class, using Kirkpatrick's four levels.

LevelWhat I look forHow it's measuredStatus

1 · Reaction

Associates feel ready for their first sale.

Confidence rating before and after (1–5).

Planned

2 · Learning

Associates can explain and match all four technologies.

Pre-check vs. exit score by topic, with 80% to pass and a downloadable results file.

Built into the lesson

3 · Behavior

Associates run the three moments of the sale on the real floor.

A lead observes one live sale with a Welcome → Demo → Close checklist.

Planned

4 · Results

Fewer returns and more attached services.

Return rate and service attach rate vs. the previous new-hire class.

Planned

Honest scope. This is a portfolio concept and hasn't been delivered to a real onboarding class yet. It was shaped by feedback during the build, and I documented the changes. See how the TV visuals evolved

← Previous projectPip's Number Garden Next project →Schedule a Patient Follow-Up