UI Review — #2

Dwinawan
Dwinawan
May 13 · 3 min read

Overview

Mari kita lihat desain dibawah ini….

1. Analisis

Sebelum melakukan redesign, berikut beberapa catatan saya

Fungsi Foto di atas kurang maksimal

Daripada sebuah foto, akan lebih baik jika diganti dengan sebuah video. Thumbnail video bisa dipilih di bagian yang paling bagus, sehingga bisa mempercantik design dan pengunjung bisa memutar video tersebut.

Jadi selain mempercantik design juga terdapat fungsi lain dari penempatan gambar tersebut.


Posisi tombol untuk membeli kursus terlalu ke bawah

Untuk meningkatkan conversion (user yang membeli kursus) . Tombol untuk membeli atau CTA (Call to Action) sebaiknya diletakkan di bagian atas agar mudah dilihat user.


2. Prioritas Informasi

Sebelum melakukan redesign, saya membuat daftar informasi yang harus ditampilkan di website ini. Dan urutan nya sudah saya sesuaikan dengan prioritas informasi nya (berdasarkan asumsi saya).

  1. Informasi Kursus (Judul, Deskripsi, Mentor, Rating)
  2. Harga Kursus
  3. Tombol untuk membeli kursus
  4. Video
  5. Apa yang akan dipelajari (What You will Learn)
  6. Konten Kursus

3. Redesign

Pada Redesign kali ini saya akan berfokus pada bagian Above The Fold (Bagian atas website) yang menurut saya masih bisa dimaksimalkan dengan memindahkan informasi informasi yang penting pada bagian tersebut, sehingga mempercepat user dalam membuat keputusan untuk mengambil kursus tersebut atau tidak.

Pada redesign ini saya menaruh semua konten di kanan. Sehingga user dengan nyaman membaca konten nya. Mata user hanya berfokus pada bagian kanan website.

Lalu di sebelah kiri saya tempatkan navigasi untuk memudahkan user menuju ke section section pada halaman kursus ini.

Pada Above the Fold, saya menaruh 4 informasi penting, yaitu:

  1. Informasi Kursus (Judul, Deskripsi, Mentor, Rating)
  2. Harga Kursus
  3. Tombol untuk membeli kursus
  4. Video

Dan berikut adalah versi high fidelity nya…

Lalu untuk menambah conversion pembelian kursus, ketika user menscroll ke bawah dan tombol CTA nya tidak kelihatan, maka akan muncul sebuah banner yang mengambang pada bagian atas.

Banner ini berfungsi agar ketika user tertarik untuk membeli kursus ini setelah membaca informasi nya, user tidak perlu men-scroll halaman ke atas untuk memencet tombol beli nya

Berikut interaksinya….


Insight

UI, UX, Bisnis Design

Dwinawan

Written by

Dwinawan

Co Founder @ Paperpillar and @ Insight Design — Designer and Story Teller

Insight

Insight

UI, UX, Bisnis Design