detikLearning
A project to develop e-learning platform collaboration with HRD detikcom to increase employee skills.
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.
Roles: UI/UX Designer, Video Editor
Client: Project for HRD detikcom
Prototype
Feel free to try out the prototype via the figma link below!
The Story Behind the Design
Every design has a story and a creative process behind it, and this platform design is no exception. Here are the steps I took to create it.
Step 1: Identifying Needs
During the first meeting, I discussed with HRD and PROMAN representatives to understand the objectives and issues the platform aims to address. Key points identified include:
- The platform is for detikcom employees’ internal skill development.
- The design must be minimalistic, fun, functional, and user-friendly, reflecting detikcom’s style.
- Initially for internal use, the platform may later be commercialized as its content grows.
I hypothesized that:
- Users need pretests and posttests for learning evaluation.
- Video players should limit features like playback speed to enhance focus.
Step 2: Research and Prototyping
I researched similar platforms for inspiration and created an initial draft prototype for discussion.
Step 3: Discussion and Revision
In the second meeting, I presented the draft and received feedback, including:
- Fonts and color palettes must follow detikcom’s style guide.
- Adjustments and additional features were suggested.
- We also discussed technical aspects, like the frontend framework, to ensure compatibility with the design.
Step 4: Refinement and Alternatives
Based on feedback, I revised the design and provided alternative options for the team.
Step 5: Testing and Feedback
Finally, I tested the design with potential users, and surveys showed high satisfaction with the result.
Flow and Overview
Landing Page
Login and Register
Testimonial
My Courses
My Courses (Kategori)
My Courses (Class)
Dashboard
Dashboard (Profile Settings)
Personal Files
Blog
Blog (Read)
Credential Check
Additional Design
