Welcome to Milo M.'s design land :)

BCT Training Pro

Some title I'll come up verryyyy soon

What I did

UX design, User Research, Vibe coding, Product Design, UI Design, Service design

Area

Retail, Training Management

Why do employees hate trianing?

For most staff, training wasn't something they actively pursued. It was something assigned to them. Despite high completion rates, employees often skipped content, rushed through assessments, and retained little of what they learned.

As our training ecosystem expanded, a new challenge shows up: How do you encourage the training engagement without turning learning into another workplace obligation?

This mobile loyalty project was created for the Bubble Citea brand. I was responsible for concept planning, UI design, and interaction flow development. The goal was to build a system that helps customers earn points, access rewards, explore offers, and enjoy a smooth experience throughout their daily visits.The visual system was developed to align with the brand identity while supporting future feature growth. Clear guidance elements and consistent interface logic were added to help users move naturally from the home screen to the reward redemption process.

The first impression about current system

"The current one feels old and boring, staffs are treat it as an extra task."

This was the opinion from the Training Head. He also believed the current system encouraged staff to skip content and repeatedly attempt quizzes because there was no motivation to participate. Instead of questioning that assumption, I embraced this direction.

Inspired by video games, I redesigned the platform with a stronger visual identity and playful interactions.

Gamify Idea Sketchs

Then I change the main character from human to a lovely puppy

Use the character I designed for the Bubble Citea brand. So it can be cohesive between 2B & 2C

The Master Dogy

To fullfill the background story. I create more characters.

Warrior Doggy

When users try to enter dungeons(quizzes section)

8-bits style game

Becasue we are not making an actual game, I don't want to take too much data base for the visuals, so 8-bits style come naturally, Like the old Super Mario do.

Concepts & Prototype

The trap I fall into

The visual style attracted attention. Some even said training finally looked "interesting."

However, after 2 weeks testing, people became familiar with the interface, the same behaviours gradually returned:

Engagement Rate: Actual Reading Time ÷ Expected Completion Time) × 100%

Engagement Rate:

Actual Reading Time ÷ Expected Completion Time) × 100%

Start from beginning

I realised that, If a system needs constant novelty just to keep people engaged, the problem probably isn't the visuals or sample UI change.

So I went back to interview and shadow with our front-line employees for more insights.

Insights as followed.

01 Invisible Progress & Lank of Emotional Feedback

No matter the course performances were good or bad, there were very less emotional feedback. Nothing tells users they've achieved anything.

Pervious training platform's workflow

01 Invisible Progress & Lank of Emotional Feedback

No matter the course performances were good or bad, there were very less emotional feedback. Nothing tells users they've achieved anything.

Pervious training platform's workflow

02 Attention Drift

Long pages combining large blocks of text, images and videos made it easy for people to lose focus.

Many quickly scrolled forward instead of reading continuously.

Attention level

high

low

Strong initial focus

Users' attention is captured by the page title and header area

Selective reading

Attention quickly declines

in the first long paragraph.

Most users skim or losefocus here.

Early drop-off

Attention quickly declines

in the first long paragraph.

Most users skim or lose focus here.

Visual anchor

The icon grid draws notice as a visual break in the text-heavy content.

Low engagement

Users tend to skim or bypass dense text sections with limited visual variation

Bottom ignored

The lower sections receive

the least attention; many

users may not reach it

02 Attention Drift

Long pages combining large blocks of text, images and videos made it easy for people to lose focus.

Many quickly scrolled forward instead of reading continuously.

Attention level

high

low

Strong initial focus

Users' attention is captured by the page title and header area

Selective reading

Attention quickly declines

in the first long paragraph.

Most users skim or losefocus here.

Early drop-off

Attention quickly declines

in the first long paragraph.

Most users skim or lose focus here.

Visual anchor

The icon grid draws notice as a visual break in the text-heavy content.

Low engagement

Users tend to skim or bypass dense text sections with limited visual variation

Bottom ignored

The lower sections receive

the least attention; many

users may not reach it

03 Hesitation

Faced with a long list of unfinished courses, many staff delayed getting started.

Several described the list as feeling "too stress" before they had even opened the first course.

03 Hesitation

Faced with a long list of unfinished courses, many staff delayed getting started.

Several described the list as feeling "too stress" before they had even opened the first course.

Behaviour Patterns

Outside the LMS, almost every digital product our staff (Gen Z & Millennials) interacted with shared a similar patterns:

Short pieces of information.
Continuous interaction.
Immediate feedback.
Small but frequent rewards.

Yet once they entered the training system, it suddenly became long, static and delayed.

One Target at a time

Instead of presenting every course at once, learners only make one decision at a time. Presenting one course at a time lowers the psychological barrier to getting started and turns a large task into a series of manageable decisions.

The current card also provide more information about this course, so users can easily have a picture in their mind what contents they are facing.

Home page - New Course section

In the bata testing, the course entry time was reduced about

100

Course page, devide by different category

Smaller learning units

Instead of requiring learners to sustain attention across long articles, the redesigned course delivered information in smaller, sequential sections. It helped maintain reading continuity while reducing the urge to skip ahead.

9:41

Course page, how users interactions, try to swipe it.

Swipe-based navigation replaces traditional course lists with a familiar interaction pattern, encouraging learners to naturally continue to the next step.

During beta testing, participants completed courses in a duration much closer to the expected learning time, suggesting a noticeable reduction in skipping and passive browsing.

Every Answer Should Matter

Assessment should reinforce learning, not reward persistence through repeated guessing. By combining limited lives, countdown timers and immediate emotional feedback, the redesigned quiz creates a continuous cycle of think → answer → react → continue.

Every interaction produces an immediate response, helping learners build confidence, reflect on mistakes and stay emotionally engaged. Rather than ending the learning journey, each question becomes another step that sustains attention, motivation and forward momentum.

Different type of quizzes

Making progress visible

Learning isn't driven by a single interaction.

It is sustained by seeing progress, celebrating milestones and building an emotional connection with the journey.

To reinforce that experience, we redesigned progression beyond individual courses.

Course page, devide by different category

My work starts with people and the cultures we create together. I like to think every product carries a little story, and every experience has the chance to change how we live, feel and connect. With curiosity, simple craft and a bit of gentle intention, I design things that fit into everyday rituals and make life feel a little clearer, a little kinder — one design, one moment at a time.