DSN Group Learning Management System UX Design Project

Bagoes Rahmaddi Putra

UX Designer
Canva
Figma

Background 🔎

PT Dharma Satya Nusantara Tbk (DSN) adalah perusahaan yang bergerak di bidang industri perkayuan, setelah mendapatkan Hak Pengusahaan Hutan (HPH) dari Pemerintah. Dalam kegiatan pelatihan dan training, DSN belum memiliki sebuah Learning Management System yang dimana akan membuat kesulitan apabila kegiatan training belum tersistemasi dan DSN membutuhkan Learning Management System yang lebih optimal dari perusahaan vendor.

Team Structure

Project Manager
UX Design
IT System Developer
Project Administrator

My Responsibilities

Saya bertanggung jawab untuk hal yang berkaitan dengan desain seperti wireframe desain, desain tampilan antarmuka untuk sistem yang dibangun, dan desain prototype yang sesuai dan diharapkan oleh klien.

Design Methodology ⚙️

Sumber : www.seobility.net
Sumber : www.seobility.net
Proses desain pada kesempatan kali ini adalah menggunakan User Centered Design dikarenakan pada project kali ini based on requirement dari klien dan membutuhkan waktu yang lebih cepat dalam pengembangannya sehingga dengan menggunakan proses desain ini akan lebih mudah mengetahui kebutuhan dan dapat lebih cepat melakukan proses desain.

Design Process ✒️

1. Research & Analysis

Dalam proses analysis dan menentukan konsep, saya melakukan meeting dan interview melalui Microsoft Teams untuk menggali informasi terkait desain pada ADM Learning Management System.

User Persona

sumber : dsngroup.co.id
sumber : dsngroup.co.id
Pegawai PT Dharma Satya Nusantara Tbk (DSN)
Posisi : Staff, Supervisor, hingga Manager
Age : 21 - 45 Tahun
Lokasi : Indonesia
Bio :
Pengguna dari Learning Management System (LMS) ini adalah karyawan dari PT Dharma Satya Nusantara Tbk (DSN) yang memiliki rentang usia 21 tahun hingga 45 tahun tersendiri. Karyawan biasa mengikuti training dan pelatihan yang diadakan perusahaan untuk meningkatkan kualitas SDM yang ada pada internal. Karyawan yang diikuti training masih menggunakan platform dari vendor untuk menunjang pembelajarannya, sehingga membutuhkan sistem sendiri agar lebih mengelola pelatihan untuk pada karyawan. Selain pelatihan rutin karyawan yang ada dapat melakukan pelatihan yang diadakan secara general.

Requirements

Learning Dashboard
Learning Journey
Learning Categories
Individual Development Plan
Learning Activity
Learning Feedback
News & Article

2. Conception

Information Architecture

Main Menu Structure Plan
Main Menu Structure Plan
Learning Dashboard & Learning Journey Menu Structure
Learning Dashboard & Learning Journey Menu Structure
Learning Categories Menu Structure
Learning Categories Menu Structure
Individual Development Plan & Learning Activity Menu Structure
Individual Development Plan & Learning Activity Menu Structure
Feedback Training & News Menu Structure
Feedback Training & News Menu Structure

3. Design

Wireframe

Homepage Wireframe
Homepage Wireframe
Learning Dashboard Detail Wireframe Page
Learning Dashboard Detail Wireframe Page
Sub Menu Page Wireframe
Sub Menu Page Wireframe
News & Article List Wireframe
News & Article List Wireframe
Berikut adalah konsep desain wireframe yang diberikan oleh klien dengan requirement layout dan struktur menu yang sesuai. Berikut adalah review dari saya mengenai konsep desain yang klien berikan :
Menu pada header lack of visibility, menyulitkan pengguna mencari menu yang dibutuhkan, terutama my courses yang sering digunakan user untuk melihat course atau training yang diikuti.
Sistem navigasi yang terdapat pada konsep desain dapat di improve agar user lebih familiar dan lebih cepat dipelajari dengan cara menambahkan breadcrumb.
Struktur layout dapat diperbaiki dan diimprove menggunakan struktur hierarki letter F ataupun letter Z.
Tampilan speedometer pada dashboard dapat ditampilkan dihomepage agar user lebih mudah melihat perolehan point dan learning hours tanpa perlu menklik ke halaman detail terlebih dahulu sehingga mempersingkat prosesnya.

UI Design

Berikut adalah tampilan desain yang sudah diperbaiki dan design sesuai requirement dari klien
Homepage
Homepage
Learning Dashboard Page
Learning Dashboard Page
Learning Category Page
Learning Category Page
Learning Journey Page
Learning Journey Page
Individual Development Page
Individual Development Page
Learning Activities Page
Learning Activities Page
News & Article Page
News & Article Page

Prototype

4. Evaluation & Optimization

Melakukan evaluasi terhadap design & system yang dibuat dengan diskusi melalui Zoom Meetings dan membuat dokumen feedback pada Google Spreadsheet, sehingga dapat dikontrol progress dari setiap feedback dari klien.
Dokumen Feedback
Dokumen Feedback

Product Guideline 👨‍💻

Untuk mendeliver desain kepada tim Developer, saya menggunakan fitur share desain pada Figma agar tim developer memiliki panduan dalam membangun sistem yang sudah diapprove oleh klien.
Font
Font
Code Color UI Guideline
Code Color UI Guideline
Slider Design
Slider Design
Banner Design
Banner Design
Icon Pack
Icon Pack
Logo DSN Group
Logo DSN Group
Card
Card
Card V2
Card V2

2022

Partner With Bagoes
View Services

More Projects by Bagoes