Hire Me

Home

/

Projects

/

detikLearning

detikLearning

A project to develop e-learning platform collaboration with HRD detikcom to increase employee skills.

Live Preview

The Problem I Solved:

Provide a convenient way to learn and improve skills using an e-learning website platform for detikcom employees which is suitable for them.

Tools:

Adobe Premiere Pro | Canva | Figma | GMeet | Trello

Platform:

Web-based Learning Management System (LMS)

Roles:

UI/UX Designer, Video Editor

Client:

Project for HRD detikcom

Keyword:

detikcom | e-Learning | Fun | Learning Management System | Minimalist | UI/UX Design | Video Editing | Website

Prototype

Feel free to try out the prototype via the figma link below!

Prototype

The Challenge

detikcom needed an internal learning platform that could solve several key challenges

📂

Learning materials were scattered across different tools and formats

📉

There was no standardized way to measure learning outcomes

😕

Existing solutions felt rigid, overwhelming, or uninspiring

🎨

The platform needed to reflect detikcom’s modern, fast-paced digital culture

Goals & Objectives

The key goals of detikLearning were to

✨ Create a minimal yet engaging learning experience

📊 Enable employees to clearly track their learning progress

📝 Provide measurable outcomes through pretests and posttests

🔄 Maintain flexibility for future feature expansion and commercialization

🎨 Ensure visual consistency with detikcom’s brand identity

✨

Create a minimal yet engaging learning experience

📊

Enable employees to clearly track their learning progress

📝

Provide measurable outcomes through pretests and posttests

🔄

Maintain flexibility for future feature expansion and commercialization

🎨

Ensure visual consistency with detikcom’s brand identity

Research & Discovery

🤝 Stakeholder Interviews

The process began with discussions involving HR representatives and project stakeholders to understand both business goals and user expectations. These sessions clarified that the platform should prioritize clarity, focus, and ease of use over feature overload.

💡 Key Insights​

  • Users prefer structured learning paths over free-form navigation
  • Evaluation features increase perceived learning value
  • Clean interfaces help users stay focused on content
  • Limiting unnecessary controls improves learning discipline

🧪 Competitive Analysis

I analyzed several e-learning platforms to identify usability patterns and gaps. Many platforms offered rich features but suffered from poor information hierarchy and cognitive overload, reinforcing the need for a focused and distraction-free learning flow.

🎨 Design Approach

The design process followed a user-centered and iterative approach.

1️⃣ Understanding User Needs

Employees needed a platform that felt easy to adopt, even for those unfamiliar with digital learning tools. HR teams needed clear visibility into progress and performance.

2️⃣ Wireframing & Ideation

Early wireframes focused on:

  • Clear content hierarchy
  • Simple navigation patterns
  • Reduced visual noise

These wireframes were used as discussion tools during stakeholder reviews.

3️⃣ Feedback & Iteration

Based on feedback:

  • Colors and typography were aligned with detikcom’s style guide
  • Learning flows were simplified
  • Feature placement was refined for better usability

4️⃣ Prototyping

High-fidelity prototypes were created in Figma to visualize key flows and interactions before development.