Yugo Bayu Prastyo - UI/UX Designer

Unifying Standards, Elevating Skills.

SkillForge : A Digital Learning Platform for Mechanic Skill Certification

SkillForge is United Tractors’ internal platform for upskilling thousands of heavy equipment mechanics across Indonesia. Over time, the web-based system started to show its age, navigation was confusing, learning flows were inconsistent, and key features like essay correction became a bottleneck. Mechanics often missed their assigned courses, supervisors lacked visibility into progress, and reviewers struggled to manage written assessments efficiently.

We needed a full redesign—not just to fix usability, but to align the platform with Individual Development Plans (IDPs) and create a smoother, scalable learning experience across the organization.

Unifying Standards, Elevating Skills.

SkillForge : A Digital Learning Platform for Mechanic Skill Certification

DESIGN PROCESS

From Problem to Practical Solutions.

Designing SkillForge wasn’t just about making screens look good, it was about solving real problems mechanics face when learning and getting certified. Here’s how the process went:

Define Problems

Lock the goals and problems clearly.

Do Research

Gather user insights and pain points.

Start to Design

Turn findings into flows and screens.

Validation!

Test, tweak, and refine until it fits.

USER INTERVIEW

We Listen, They Talk.
Great Design Starts with Understanding.

We Listen, They Talk. Great Design Starts with Understanding.

We Listen, They Talk.
Great Design Starts with Understanding.

To uncover real pain points, we interviewed four key user groups: organic mechanics, outsourced mechanics, certification assessors, and supervisors. Each offered distinct perspectives on how they use the system, their daily struggles, friction points, and expectations for a smoother, more motivating learning experience.

"Sometimes I just don’t know which course is right for me."

Ahmad - Organic Mechanic

Ahmad wanted to grow in his role, but the platform made it difficult. With too many course options and no clear guidance, he often skipped useful materials. He shared how much easier it would be if the system could recommend courses based on his position and goals.

What we changed : The new platform connects directly to each worker’s IDP, so Ahmad gets personalized course suggestions without the guesswork.

"If my supervisor doesn’t remind me, I don’t even open the site.”

Budi - Organic Mechanic

Budi works in the field and rarely uses a laptop. When he did log in, he wasn’t sure where to start. The course flow felt confusing, and instructions were unclear.

What we changed : We designed clearer task guidance, streamlined learning flows, and built-in notifications to help users like Budi stay engaged without constant supervision.

“Correcting exams was a nightmare. Too many clicks, too much scrolling.”

Rini - Instructor

As an instructor handling multiple classes, Rini struggled with the essay review page. It was slow, cluttered, and made her job unnecessarily complex. She needed a faster way to evaluate answers and generate reports.

What we changed : We introduced automatic exam correction, inline essay review, and data export features, cutting review time while keeping grading more consistent.

“Correcting exams was a nightmare. Too many clicks, too much scrolling.”

Rini - Instructor

Dedi oversees multiple mechanics and needs to monitor progress daily. The old dashboard felt fragmented, making it difficult to catch delays or assign new courses efficiently.

What we changed : We built a unified dashboard with filters and real-time updates, allowing supervisors to track learning progress at a glance and make faster decisions.

STAKEHOLDER INTERVIEW

Aligning Vision with Those Who Shape The Business Direction.

To understand the strategic direction behind the certification program, we conducted interviews with several key stakeholders. Their input helped us understand the importance of IDP integration, system scalability, and the need for a role-based course experience.

Details Process

Interview with Stakeholder

We carried out three in-depth stakeholder interviews, each lasting approximately 45 minutes. Participants included HR leads, Learning & Development teams, and Technical System Owners. Discussions focused on platform vision, integration requirements, and real-world limitations from both business and technical sides.

Key Insight

Certification Must Align with HR IDP Structure

Stakeholders emphasized that the platform must seamlessly integrate with the Individual Development Plan (IDP) system to personalize learning paths for each mechanic and ensure alignment with internal upskilling strategies.

Supervisors Need Easier Tracking Tools

There was a strong request for better monitoring tools to help supervisors oversee course progress, assignment completion, and certification outcomes, especially for outsourced mechanics.

Content Library Must Be Modular for Future Expansion

Flexibility was a key concern. Stakeholders envisioned a content library that could scale, allowing for the addition of new courses, media types, and assessment formats without overhauling the system.

COMPETITIVE RESEARCH

Learning From Industry Benchmarks.

To ground our redesign in real-world standards, we conducted a comparative study of both specialized learning management systems and mainstream online course platforms. This helped us identify feature gaps and prioritize functionality that directly supports field operations.

Platform

Course Type

Role

Based Course

Exam Feature

Question Bank

Grading Method

Assigned via IDP & by supervisor

MCQ & Essay

Fully custom bank per course

Auto-grade & manual review

Assigned & self-picked

All type, incl. essay

Advanced quiz bank

Auto-grade & manual review

Manual & template based

Basic quiz

Available

Auto-grade & manual review

Assigned by admin

Basic quiz

Available

Auto-grade only

Self-picked

Quiz

No bank feature

Auto-grade only

Self-picked

No formal exam

No bank feature

Project based

Self or intitution-assigned

Quiz + peer review

No bank feature

Auto-grade & peer review

USER PERSONA

From Insights to a User Persona.

From our interviews, we distilled user insights into realistic personas that represent key roles within the certification process. These personas guided our decisions across UI design, content structure, and role-based feature logic.

Wiantoro Sudjatmiko - KOMATSU Mechanic

Goals

Gain certifications relevant to their job, understand course requirements, complete them without friction.

Pain

Often confused by system navigation, forgets deadlines, lacks clear progress indicators.

Needs

Need a simple & clear system with progress tracking and deadline reminders to complete courses.

Design Implication

Clear dashboard summaries, role-based course assignment via IDP, simplified exam flow.

Rifat Alifa - ADH Site Adaro

Goals

Monitor mechanic progress, assign courses for outsource staff, ensure team compliance.

Pain

Incomplete tracking tools, slow feedback loop, lack of overview.

Needs

Need a way to track team progress, quickly assign courses, and get a clear overview to ensure compliance.

Design Implication

Dashboard with real-time progress tracking, bulk course assignment, and a summarized compliance view.

Hendra Darusman - Instructor

Behaviour

Review submitted tests efficiently, especially essays, give fair and fast feedback.

Pain

The review process is slow, especially for essays, with limited tools for structured feedback.

Needs

Tools to review tests faster, highlight key points in essays, and provide consistent & clear feedback.

Design Implication

Inline review interface with answer keys, annotation tools for essays, and a dashboard showing review status.

Problem Statement

Users struggle with unclear navigation, poor progress visibility, and lack of deadline tracking.

Supervisors can’t monitor or assign courses efficiently; data is fragmented and slow to update.

Instructors face slow review flows with no structured tools for annotation or feedback.

Design Response

Introduced a clear role-based dashboard with real-time progress and smart reminders.

Simplified course assignment & compliance tracking for supervisors via bulk tools.

Designed an inline review system with highlights, notes, and instant feedback visibility.

Wiantoro Sudjatmiko - KOMATSU Mechanic

Goals

Gain certifications relevant to their job, understand course requirements, complete them without friction.

Pain

Often confused by system navigation, forgets deadlines, lacks clear progress indicators.

Needs

Need a simple & clear system with progress tracking and deadline reminders to complete courses.

Design Implication

Clear dashboard summaries, role-based course assignment via IDP, simplified exam flow.

Rifat Alifa - ADH Site Adaro

Goals

Monitor mechanic progress, assign courses for outsource staff, ensure team compliance.

Pain

Incomplete tracking tools, slow feedback loop, lack of overview.

Needs

Need a way to track team progress, quickly assign courses, and get a clear overview to ensure compliance.

Design Implication

Dashboard with real-time progress tracking, bulk course assignment, and a summarized compliance view.

Hendra Darusman - Instructor

Behaviour

Review submitted tests efficiently, especially essays, give fair and fast feedback.

Pain

The review process is slow, especially for essays, with limited tools for structured feedback.

Needs

Tools to review tests faster, highlight key points in essays, and provide consistent & clear feedback.

Design Implication

Inline review interface with answer keys, annotation tools for essays, and a dashboard showing review status.

Problem Statement

Users struggle with unclear navigation, poor progress visibility, and lack of deadline tracking.

Supervisors can’t monitor or assign courses efficiently; data is fragmented and slow to update.

Instructors face slow review flows with no structured tools for annotation or feedback.

Design Response

Introduced a clear role-based dashboard with real-time progress and smart reminders.

Simplified course assignment & compliance tracking for supervisors via bulk tools.

Designed an inline review system with highlights, notes, and instant feedback visibility.

USER FLOW

Every Step, Clear and Intentional.

We mapped the flow based on real case, not assumptions. Each step was crafted to match how users actually work in the field, making the process simpler, faster, and more efficient.

Mechanic - From Course to Certificate

This flow explains the process from mechanic logging into SkillForge, selecting a course, taking the exam, scheduling a practical exam, to receiving the exam certificate.

Supervisor - Team Check & Assign Course

Supervisors can monitor what courses are available, then assign a team of mechanics in their area to join the course if they are not already registered.

Instructor - Check Material Exam

After the mechanic completes the theory test, the system will automatically correct the multiple choice answers, but the instructor will assess the essay answers and determine whether the mechanic passes the theory test and is then allowed to take the practical test.

DESIGN GUIDELINE

Design Rules that Shape Intuitive and Timeless Experiences.

We create a design guideline concept consisting of color combinations, typography, and logo concepts. This guideline will be used for branding needs, UI design, publications, and others.

Main Font

Inter

Light

Regular

Medium

Bold

Black

Aa

Royal Indigo

#5B45ED

Lilac Mist

#F7F6FF

Soft Lavender

#C9C2FF

Golden Amber

#FFB300

Color

The Royal Indigo (#5B45ED) represents creativity, intelligence, and forward-thinking, a perfect hue for a product that blends logic and imagination.
Paired with Golden Amber (#FFB300) as an accent, it brings warmth, optimism, and energy to every interaction. Together, they create a visual rhythm that feels both confident and inspiring.

Typography

We chose Inter because it was designed for digital interfaces from the ground up. Its clean geometry and generous spacing make long reading sessions easier on the eyes, while its versatility across weights keeps the UI structured yet approachable.

UI Components :

The Building Blocks of Seamless Learning.

Let's See The Solution :

Showcase the Final Design Direction with a Focus on Clarity, Consistency, and Usability.

VALIDATION

Usability Testing to User.

We conducted usability testing with selected users to validate the design’s efficiency and clarity. The goal was to observe how easily they could complete key tasks, understand navigation flow, and interpret visual cues without guidance.

Group 1 : Testing with the Frontline Users

We ran usability tests with 5 mechanics, the primary users of SkillForge. Their feedback revealed how the platform performs under real operational tasks, from accessing courses to completing exams.

Task List

User 1

User 2

User 3

User 4

User 5

View Course Details

Take Theory Exam

View Exam Result & Certificate

User Highlight

Smooth overall, no issues.

Minor confusion in theory test

Navigation flow can be smoother.

Smooth overall, no issues.

Task List

Positive (Smooth)

Neutral (Minor Struggle)

Negative (Failed/Big Struggle)

Usability Score

5/5

0/5

100

View Course Details

3/5

2/5

0/5

Take Theory Exam

4/5

1/5

0/5

View Exam Result & Certificate

5/5

0/5

100

Overall average usability score :

92.5

Notes & Insight

Overall usability performance is strong, with most tasks scoring above 90 and an average of 92.5, showing that the platform feels intuitive and easy to navigate.

The only area needing improvement is the course detail page, where two users hesitated, indicating a need for clearer hierarchy and better visual cues.

Yugo Bayu Prastyo

Thanks for Watching!

Dribbble

Upworks