Redesigned HMI training for workers with limited digital experience, doubling satisfaction and reducing negative VOC by 1.5×.
MY ROLE
Product Design
Design System
Prototyping
TIMELINE
May 2023 - Nov 2023
TEAM
3 UI/UX Designers (Me)
1 Project Leader
4 Planners
3 Unity Engineers
3 3D Designers
TOOLS
Figma
Photoshop
Illustrator
Unity
SK On is a global EV battery manufacturer within SK Group, one of South Korea’s largest conglomerates. The company is expanding its production network across North America, Europe, and Asia.
To qualify for on-site work, production workers must complete required training through the Virtual Training Simulator, SK On’s internal learning platform. Through simulation-based lessons and quizzes, they learn HMI operation, workplace regulations, and key production procedures.
Elementary school was the most common highest level of education among learners, and many had worked in agriculture before encountering factory equipment for the first time. The existing platform did not account for these backgrounds, making the training difficult to understand and apply on the job. A redesign was needed to make the content more accessible and engaging for learners with little equipment experience.
Workers with less formal education struggled with text-heavy instructions
Limited experience with factory equipment made
both online and hands-on training difficult
The training relied heavily on text and reproduced different machine layouts across modules. Learners had to process dense instructions while adapting to a new screen structure in each module, making it harder to find key information and focus on the training.
Items looked too similar, while the character and instructions provided little guidance on what to select next.
As a result, learners often chose the wrong item and struggled to move to the next step.
English
Check each layer's position and direction before adding the next. If anything is wrong, stop and tell your supervisor.
Hungarian
A következő réteg felhelyezése előtt ellenőrizze, hogy az aktuális réteg tájolása és elhelyezkedése megfelel-e az előírásnak. Ha eltérést észlel, állítsa le a munkát, és értesítse a felelőst.
Explaining complex equipment required large amounts of text. As screens were translated across multiple languages, varying text lengths and numerous screens increased the team’s workload under limited time and resources.
Learners struggled with text-heavy instructions and unclear action cues, while PMs had to manage numerous screens across processes and languages. The opportunity was to make learning more intuitive without making the system harder to scale.
Feedback from SK on PMs
“Some languages get longer in translation,
so we need to rely less on text and more on visuals.”— Han, PM at SK On
“With fixed deadlines and resources, it is difficult
to manage so many different machine screens.”— Han, PM at SK On
Feedback from Trainees
“It was confusing and difficult to find the right
outfit based on the instructions” — Learner A
“I knew the equipment names, but couldn’t match
them to the machines on-site.” — Learner B
“The screens were so complicated that
I lost motivation to finish the tasks.” — Learner C
Help learners understand what to do at each step without relying on dense instructions, while making training easier for the team to expand across processes and languages.
Rather than reproducing each machine interface exactly, we focused each learning step on three questions: What am I learning? What should I do next? What information matters now?
Use character-led game and visual feedback to make each action easy to follow instead of relying on text-heavy screens.
Create one consistent structure and reusable components that could adapt across different processes.
The first iteration added depth to the character, making it more noticeable but drawing attention away from the item cards learners needed to select. Based on internal team feedback, we flattened the character and gave the interactive cards stronger depth and contrast, directing attention to the next action.
At the time of the redesign, a repetition-based learning feature was added. Since learning the button names and the order of operations was more important, we used a consistent UI to reinforce these elements across learning steps.
Although the machines had many buttons, trainees only needed to use a subset of them. By keeping the layout consistent and numbering the steps, we aimed to increase the sense of immersion and satisfaction that were part of the original learning goals.
The training was being developed in Unity, where reusing Figma source files was difficult. With limited time and team capacity, a shared UI structure provided a practical way to support different machine interfaces without creating each screen from scratch.
Although the game centered on a character, equipment selection needed to remain the visual priority. When internal feedback showed that the 3D character drew attention away from the equipment cards, I flattened the character and increased the cards’ depth and contrast to highlight the next item.
Equipment images blended into the card backgrounds.
The character stood out, but the equipment cards did not.
A simpler character and raised cards made the equipment more prominent.
A character-led dress-up interaction guided learners through the correct order for putting on safety gear and equipment. Pairing each instruction with a matching image helped learners understand, remember, and carry out each step.
We explored visual changes to existing components without adding functionality, aiming to keep the game-like feel while making key controls easier to distinguish. The goal was to help learners focus on and retain what they’d need to use on-site.
The game-like feel remained, but bright colors and metallic effects competed for attention.
Limited color emphasized key controls, but the dark style felt heavy and monotonous.
A light base retained the game-like feel. Size, depth, and limited color emphasized key controls.
Each screen highlights the information and controls learners need for that step, while secondary details are de-emphasized or omitted. This consistency reduced confusion for learners and made it easier for the team to create and manage screens across different processes. We used text only where needed, avoiding lengthy copy across screens and making localization easier.
Inconsistent colors and visual hierarchy made screens across processes feel like separate services.
Unneeded labels and controls are omitted or visually de-emphasized.
Shared layouts keep the training consistent. Defined component sizes
and states let the team adapt screens without rebuilding the UI each time.
“The machine screens are much easier to see at a glance.”
“I can find the buttons I need to click much faster.”
“The redesigned screens received strong positive feedback during an executive meeting with SK On’s overseas offices.”
“You quickly understood our requirements, visualized them, and refined the designs, which helped the project move forward smoothly.”
“By building the illustrations into the design system, we were able to handle hundreds of screens quickly.”
— Unity Developer, Park OO
“Through weekly sprints, we were able to quickly combine the strengths of each other’s designs to create the final version.”
— Designer, Kim OO
“There were frequent delays due to project variables and unexpected issues, but the system we built allowed us to respond quickly.”
— Planner, Seo OO
Machine interfaces varied across the workplace, but replicating them exactly did not necessarily create a better learning experience. Instead, we reconstructed screens around what learners needed to learn and do at each step. Through this process, I learned the importance of reducing the complexity of the real environment while preserving the workflow to create an effective learning experience.
As we developed hundreds of screens across different processes, I learned that building a structure that can adapt to changes and exceptions is more important than perfecting individual screens. By establishing shared layouts and reusable components, we were able to respond quickly to new requirements and project variables by leveraging the existing system.
