CAMP404-Redesign Website

Jadilah Professional dan raih impianmu
bersama CAMP404.

Saat ini Indonesia sangat membutuhkan para telent-telent digital, seperti programer, editor, designer,
akan tetapi sangat sulit ditemui orang yang benar-benar expert dibidang tersebut. dibuatnya website
code404 untuk menampung orang-orang yang ingin belajar skill digital dari pemula sampai
dengan expert. Code404 menyediakan banyak kelas dari berbagai bidang,
ada front-end, back-end, Ms. Office, dll

role

Proyek ini bersifat individual yang diawasi oleh mentor pilihan, jadi dari
proses Empathize sampai Test itu saya yang menghandle. role saya
sebagai UI/UX Designer dan Researcher.

Jenis Proyek

proyek ini dibuat untuk menyelesaikan Challenge 7 dari
Binar Academy
Perusahaan : PT. Kampus Inovasi Digital
Client : Binar Academy

Tanggal Proyek

Portfolio ini dibuat dari tanggal 17 Mei 2022 - 27 Mei 2022

Ringkasan Proyek

Camp404 adalah sebuah website course untuk mengasah skill penggiat IT yang baru launching sekitar 1 tahun yang lalu dan masih butuh banyak improve, seperti pada navbar, flow registrasi, penambahan fitur learning path, dll

Tantangan Permasalahan

  • dari segi tampilan / UI Website Camp404 terlihat sudah usang
  • pemenpatan menu navbar yang kurang tertata rapi.
  • belum terdapat learning path membuat siswa kesulitan dalam memilih kelas yang akan dia ambil selanjutnya

sebelumnya juga sudah dilakukan interview dan meminta interviewer untuk menyelesaikan sebuah task-task
yang diberikan kepada mahasiswa-mahasiswi yang pernah membeli sebuah
course / kelas online, dari sana didapat beberapa pain point. kemudian untuk menyelesaikan
permasalahan yang ada, kita menggunakan Design Proses bernama Design Thinking.

design process

Proyek ini dibagi menjadi beberapa tahap. Setiap tahap terdiri dari bagian-bagian kecil yang
mengarah ke hasil akhir. dengan menggunakan Design Thinking untuk membagi tahap-tahap
menjadi 5 bagian, seperti gambar berikut,

Research Plan

  • Membuat Timeline
  • Menemukan Point of View dari studi kasus yang ada.
  • Membuat Customer Journey Map
  • Membuat Information Arcitectures
  • Menampilkan beberapa moodboard
  • Menunjukkan Design System
  • Membuat High-Fi
  • Membuat Prototype

Timeline

Setelah memperoleh data mengenai kebutuhan user melalui wawancara dan pengerjaan task,
lanjut ke tahap define, ditahap ini kita memilah-milah data sehingga dapat dipetakan inti permsalhannya.

Di proses Define ini saya menemukan beberapa permasalahan, yang kita tampilkan atau
kita sebut sebagai Point of View

Selanjutnya dari Point of View kita dapat membuat User Persona, karena disini User Persona itu sifatnya
bukan keharusan maka tahap ini kita lompati dan masuk ke CJM (Customer Journey Map)

Setelah masalah dipetakan dalam fase sebelumnya yaitu Define, selanjutnya masuk ke tahap Ideation
untuk untuk menciptakan solusi dari permasalahan yang ada.

dalam proses Ideate ini saya ada beberapa proses yang harus dibuat, seperti Invormation Architecture,
Wireframes, Moodboard dan Design Systems

Information Architecture

Information Architecture digunakan untuk menciptakan sebuah struktur informasi dalam sebuah aplikasi
website agar mudah dimengerti oleh pengguna, berikut IA pada Website Camp404

Wireframe

Wireframe sangat penting untuk membuat blueprint bagi UX Designer. Wireframe
adalah skema yang dapat memberikan gambaran kasar pada setiap halaman website.

Wireframe Home

Wireframe Learning Path

Moodboard

Berikut adalah Moodboard yang saya gunakan sebagai referensi pembuatan User Interface
Untuk website Camp404.

Design System

High-Fidelity

Di bagian high-fidelity ini saya membuat design berdasarkan wireframe yang sebelumnya
telah buat, terinspirasi dari moodboard yang telah dipilih.

Home

Learning Path

Overlay Registration | Login

Detail Kelas

Setelah brainstorming dan ideasi selesai, selanjutnya masuk ke tahap prototype, Prototype ini dibuat
dan disesuaikan dengan yang ada pada proses ideate. berikut adalah prototype yang kita tampilkan
dalam bentuk Video, selamat menikmati...

...
Klik disini Untuk melihat Prototype

Metode yang digunakan yaitu :

  • Interview, jadi user diminta untuk menyelesaikan beberapa task yang dibuat di Maze, di proses pengerjaannya kita melakukan interview dengan aplikasi Zoom agar lebih tahu apa yang dirasakan oleh seorang user.
  • A/B Testing, ada beberapa task disana mengenai perbandingan website sebelum di Redesign dan setelah di Redesign, user diminta untuk memilih, memberikan komentar mengenai design yang ada.juga diminta untuk memberikan ratting dari 1 - 10

Masuk ke tahap akhir yaitu hasil. Hasil ini didapat dari proses panjang yang telah dilewati, dari proses Empathize sampai dengan Testing. pada tahap testing, seperti yang telah disebutkan sebelumnya bahwa kita menggunakan Tools Maze, aplikasi ini sangat bagus sekali untuk testing. beriktu beberapa hasil testing dari task yang diberikan kepada User.

  • Hasil dari task pertama, dari ketiga tester, semeuanya pernah membeli dan mengikuti kelas online
    di suatu platform. semua pernah mengikuti membeli course online karena itu termasuk dari target user kita
  • Hasil dari task berikutnya, user diminta untuk memberi opini mengenai website sebelum redesign dan
    website setelah redesign, dan hasilnya seperti berikut.

sebenarnya ada 10 task yang diberikan kepada Tester, tapi disini saya menampilkan beberapa task yang
menurut saya penting.

  • Hasil dari task selanjutnya, user diminta untuk membeirkan masukkan mengenai keseluruhan desain yang
    kami buat dan hasilnya seperti berikut

Dari hasil diatas bisa disimpulkan bahwa User lebih memilih website setelah di redesign karena lebih mudah dan flownya sangat mudah telebih lagi kami menambahkan fitur learning path untuk mempermudah siswa memilih kelas selanjutnya sesuai path yang ia pilih.

Ditahap iterasi disini kami tidak mencantumkan hasil iterasi yang telah dibuat karena setelah diperhatikan melalui tabel matrix, hasil iterasinya tidak terlalu important dan tampilannya tidak terlalu beda jauh dari tampilan sebelumnya

Thanks for Watching