B2E Internal Platform · Retail Onboarding · 2024

AI Tutor

Reduced onboarding time and achieved 100% product knowledge retention by designing an AI-enabled retail training system for internal store teams.

Type

Sponsored Informatics Capstone project by Lululemon Athletica

Role

UX/UI Designer and Researcher

Team

1 UI/UX Designer, 1 Data Scientist, 1 Front-End, 1 Back-End Developer, 1 PM

Date

01/08/2024 - 05/31/2024

Description

Led mobile UX design, user testing, and research synthesis from low-fi to high-fi prototype.

AI Tutor is a mobile onboarding and learning platform that helps Lululemon educators retain and master product knowledge through interactive modules and scenario-based practice.

Check out the prototype here.

TL;DR 🧾

Lululemon's growing product catalog made it difficult for retail educators to retain product knowledge during onboarding.

I designed AI Tutor, a mobile learning system that helps educators retain product knowledge through interactive modules and GPT-4-powered scenario practice.

AT A GLANCE

100%

Product Knowledge Retention

Observed during usability testing after scenario-based training

Prototype Iterations

Lo-fi through hi-fi across two testing rounds

Product Preview

Background

When growth outpaces learning

Lululemon has expanded to more than 700 global stores. Retail educators must quickly learn and retain detailed product knowledge to deliver personalized guest experiences.

However, existing onboarding relied on static training materials that were difficult to retain and did not adapt to individual learning needs.

At Lululemon, "Educators" are retail associates responsible for delivering a world-class customer experience.

Problem Statement

Smarter learning, better recommendations

Educators struggled to retain large amounts of product knowledge during onboarding, making it difficult to confidently recommend products to guests. Without effective training, inconsistent product knowledge could negatively impact customer experience and sales performance across stores.

How might we help Lululemon educators retain product knowledge more effectively so they can confidently recommend products to guests?

Constraints & Tradeoffs

Several constraints shaped the direction of the AI Tutor

Time constraint ⏳ ⛓️

The project was developed within a four-month capstone timeline, requiring us to prioritize features that could realistically be prototyped and tested.

AI feasibility 🤖 ⚡

Real-time AI responses needed to remain lightweight to maintain a smooth mobile experience.

Brand alignment 🎨 ✅

The interface needed to match Lululemon's existing mobile app design to feel familiar to educators.

These constraints led us to focus on scenario-based learning and structured prompts rather than a fully open-ended AI tutor.

Solution

AI Tutor: a personalized learning companion that helps Lululemon associates keep pace with a rapidly expanding product line

AI Tutor helps educators retain product knowledge through interactive modules and scenario-based practice.

The system asks scenario questions, provides real-time feedback, and adapts learning paths based on each educator's performance.

Instead of passive training, educators actively apply product knowledge through simulated customer interactions.

Research 🔍

Qualitative and Quantitative Interviews

Learning from educators' training journeys

Research Purpose

To understand the current customer service training experience, identify the most helpful aspects, and explore desired changes, we conducted mixed-method research.

7 Survey Respondents6 Interviewees

Research Goals

Understand the current onboarding experience
Identify pain points in product knowledge training
Explore opportunities for AI-assisted learning

Survey and Interview Insights

🙋

Educators learn by doing, not by watching

Participants preferred hands-on training over hours of passive videos and reading materials.

Insight visualization - educators learn by doing

📋

Quizzes pass everyone through, regardless of knowledge gaps

The current format doesn't adapt to performance, educators move on whether they scored 4/10 or 10/10.

Quiz data visualization - knowledge gaps

Design Strategy ♟️

Learning through practice, not memorization

Research revealed that educators struggled to retain information from passive training materials.

Instead of static learning modules, we focused on experiences where educators actively practice recommending products through realistic scenarios.

AI scenario quizzes 🤖 💡

Adaptive learning modules 🧠 🕹️

Real-time feedback ⚡ 💬

Design 🎨

From wireframes to a low-fidelity prototype

First Wireframes

Initial wireframes translated research insights into the core product flows for the onboarding experience. The interface followed Lululemon's existing mobile design patterns to ensure the tool felt familiar to educators.

Design Concept

To feel like part of Lululemon, the AI Tutor stays true to the brand's visual identity

Because AI Tutor is designed for Lululemon employees, the interface follows the brand's existing mobile design language and visual system.

Low-fidelity Usability Testing

We conducted an initial round of usability testing to evaluate the clarity of the learning flow

Participants

2 Lululemon educators
1 project manager
1 Store Support Centre team member

The "Modules", "Progress", and "Scenario Quiz" pages received specific input that we focused on addressing in the next design iteration.

⚠️ Key issue

Users struggled to locate module details and understand learning progress.

🧩 Design change

• Added module descriptions, images, and search functionality to make content easier to find.
• Separated module completion statistics from quiz results to improve clarity of learning progress.

High-fidelity Usability Testing

After refining the wireframes, we conducted a second round of usability testing to validate the updated interface and AI features

After low-fidelity testing, we refined the wireframes based on user feedback and reviewed feature feasibility with the engineering team.

We prioritized AI-generated scenario questions after each module to create a more personalized learning experience that responds to educators' progress and knowledge gaps.

❤️ What Educators liked

• Landing page: Displays all key information at a glance
• User interface: Simple and intuitive
• Style guide: Strong alignment with Lululemon's brand identity

🧩 Improvements identified

• Clarify the difference between AI Chatbot and AI Scenario Quiz
• Add richer visual media to learning modules
• Improve feedback clarity on quiz results

Five decisions that shaped the product

Major Design Decision 📦

Decision 01

Guiding onboarding with pre-landing pages

Users were unsure where to begin and how the different features connected.

To improve orientation, I introduced pre-landing pages that briefly explain each feature and guide educators toward the recommended learning path.

Before

Educators landed directly on feature pages with no context, making it hard to understand what each section was for or where to start.

After

Pre-landing pages now introduce each feature and guide educators to the recommended starting point, reducing confusion from the first tap.

Decision 02

Making modules easier to learn from

Early testing showed that modules felt too text-heavy, which reduced engagement.

To address this, I introduced visual product images and short videos within modules so educators could learn through richer content.

Before

Module pages were dense walls of text. Educators found it hard to stay engaged and retain product knowledge presented this way.

After

Modules now include product images and embedded short videos, creating a more scannable, visual-first learning experience.

Decision 03

Reinforcing Lululemon's community culture with Kudos

Research and testing showed that learning at Lululemon is not only about knowledge retention, but also about feeling connected to the team culture.

To support that, I introduced a Kudos feature that lets educators celebrate each other's progress and achievements after completing modules.

This decision extended the product from a training tool into a more community-driven learning experience.

Educators can use this search feature to look up specific educators and check their achievements.

Educators can give kudos to other educators by using these emojis to react

Search feature to look up specific educators and check their achievements.

Give kudos to other educators by using emojis to react.

Decision 04

Clarifying AI learning tools

Educators initially confused the AI Chatbot with the AI Scenario Quiz. To resolve this:

The chatbot became a persistent assistant for quick questions
The scenario quiz became embedded within modules for practice

Before

Both AI tools were listed side-by-side on the same level, causing educators to mix up their distinct purposes and not know which to use.

After

The chatbot is now a floating persistent assistant available everywhere. The scenario quiz lives inside each module, making both roles unmistakably clear.

AI Scenario Quiz is only accessible after completing a module and is located within each module page.

Decision 05

AI Scenario Quiz: Improving quiz feedback clarity

Participants wanted clearer feedback on quiz results.

I redesigned the scenario quiz results page to show:

Why an answer was incorrect
Which topic to revisit
The specific module to review

Before

The results screen simply showed a score. Educators had no way to understand what they got wrong or how to improve their knowledge gaps.

After

The redesigned results page now explains each incorrect answer, links to the relevant topic, and surfaces the exact module to revisit, turning failure into a learning moment.

Each incorrect answer is now explained with the correct response shown

Direct link to the relevant module so educators can revisit the topic

success metrics

Impact 📈

Final prototype delivered to Lululemon's development team for potential implementation.

25–35%

Faster Onboarding (Estimated)

Interactive scenario practice reduces reliance on static training materials

100%

Product Knowledge Retention

Observed during usability testing after educators completed scenario-based learning modules

↑

Improved Educator Confidence

Educators reported greater confidence recommending products after practicing real customer scenarios

Reflection

Reflection 🪞

Throughout this project, I have dedicated significant effort and gained valuable insights, notably by leading as the sole UI/UX designer. I was in charge of user testing and finalizing the prototypes based on feedback from users and team members.

💬 User feedback is crucial for user-centric design

It's important to gather feedback from the main users, in this case, the Educators who will actually use the product. Understanding what they like about the current features and designing additional features based on their feedback is essential for creating an effective and engaging app.

🤝 Working cohesively with the development and data science teams

Collaborating closely with these teams throughout the project is vital as they provide feedback on the feasibility of implementing features within our tight timeline and offer suggestions for adjustments to make the development process smoother.

AI Tutor

TL;DR 🧾

Research 🔍

Design Strategy ♟️

Design 🎨

Major Design Decision 📦

Guiding onboarding with pre-landing pages

Making modules easier to learn from

Reinforcing Lululemon's community culture with Kudos

Clarifying AI learning tools

AI Scenario Quiz: Improving quiz feedback clarity

Impact 📈

Reflection 🪞

Reshape - Fitness App