BAB IV

HASIL PENELITIAN DAN PEMBAHASAN

4.1 Tampilan Website Lama

4.1.1 Tampilan Website Home_1

Gambar IV.1 Tampilan Website Home_1

Dalam tampilan website perusahaan CV. Akarsa Garment & Printing yang lama

terdapat 3point yang membuat tampilan website tersebut menjadi lama respon

nya(lagging).
1 Logo yang berwarna Merah (RED) tidak sinkron dengan background website nya

yang berwarna Biru (BLUE). Dan Logo Perusahaan nya tampak terlihat sangat

kecil sekali jika di lihat dari layer computer/laptop.

2 Opsi / Pilihan yang terlalu banyak, sehingga menyulitkan untuk pelanggan yang

ingin melihat produk / promosi didalam website tersebut.

3 Gambar yang terlalu besar membuat website perusahaan menjadi lagging

dikarenakan gambar yang terlalu besar memakan kapasitas (space) yang cukup

banyak.

4.1.2 Tampilan Website Home_2

Gambar IV.2 Tampilan Website Home_2

 Masih yang sama tampilan Website Home_2 yaitu di bagian Opsi Product itu

terdapat product yang sama jenis nya yaitu Jaket tetapi di buat dalam banyak opsi yang

menyebabkan website menjadi lama respon nya (overload).

4.1.3 Tampilan Website Catalog

Gambar IV.3 Tampilan Website Catalog

Tampilan Website Catalog di CV. Akarsa Garment & Printing terdapat 2point

website yang harus di ubah, yaitu

1 Dalam Point 1 di opsi catalog ada UKURAN dan BAHAN. Seharusnya di

jadikan dalam 1 yang digabungkan supaya meminimalisir untuk website nya

sehingga memudahkan pelanggan untuk melihat dalam 1 tampilan.

2 Font dengan Background terlalu samar, dikarenakan Font nya berwarna Abu Abu

sedangkan background nya berwarna putih, sehingga membuat tulisan menjadi

samar samar jika dilihat.

4.1.4 Tampilan Website Profile

Gambar IV.4 Tampilan Website Profile

 Seperti yang di lihat, ditampilan website opsi Profile sama seperti yang

sebelumnya yaitu Tulisan (Font) berwarna ABU ABU. Jadi tidak terlihat jelas warna

tulisan tersebut jika di gabungkan dengan background yang berwarna putih.

4.1.5 Tampilan Website Gallery

 Gambar IV.5 Tampilan Website Gallery

Seperti di lihat, jika kita scroll ke bawah di bagian Gallery terdapat Gambar yang

tidak sinkron dengan Margin di bawah website tersebut (Footer) dan Gambar di bagian

Gallery itu diletakkan memanjang kebawah sehingga terlewat di bagian Margin di

bawah website (Footer).

4.1.6 Tampilan Website How To Order

 Gambar IV.6 Tampilan Website How to Order

Sama seperti tampilan website Profile dan Catalog, di bagian How to Order

tulisan (font) nya berwarna ABU ABU. Sehingga menyusahkan pelanggan untuk

melihat website tersebut.

4.2 Perancangan UI/UX Metode Design Thinking

 Gambar IV.7 Tahapan Design Thinking

Perancangan website pada penelitian ini menggunakan metode Design Thinking

yang berfokus dengan desainer dan pengguna sehingga menciptakan hal baru. Design

Thingking terdapat 5 tahapan yaitu emphatize, define, ideation, prototype, test. Dengan

menggunakan Design Thinking, Peneliti bisa memecahkan masalah kompleks yang

dihadapi oleh pengguna dapat terselesaikan.

1 EMPHATIZE

Tahapan pertama adalah Emphatize, yaitu melakukan wawancara terhadap

pengguna (pihak perusahaan) dan pembeli (costumer). Wawancara ini dibutuhkan

untuk mengetahui apasaja yang dibutuhkan oleh pengguna dan pembeli sehingga

peneliti bisa mengetahui apa saja yang kurang.

Diketahui dari wawancara oleh pengguna dan pembeli terdapat website yang

kurang begitu baik dikarenakan:

- Website yang begitu banyak gambar

- Font yang tidak terlihat jelas

- Background dan Font yang tidak jelas

- Warna Logo dan Background tidak sinkron

- Gambar – Gambar nya terlalu besar sehingga memakan kapasitas ruang

website

- Website yang terlalu lemot dikarenakan banyak element yang tidak penting

Dari wawancara di atas, peneliti mendapatkan apa saja yang di butuhkan oleh

pengguna sehingga peneliti bisa langsung ke tahap berikutnya yaitu Define

2 DEFINE

Proses Define adalah untuk mendapatkan User Goals, yaitu untuk mendapatkan

hal yang lebih baik dari sebelum nya berdasarkan pengamatan proses berempati

(Emphatize).

Setelah mengetahui kebutuhan dari pengguna dan pembeli, peneliti menentukan

tujuan pengguna (User Goals). Peneliti menyusun ide/konsep agar menghasilkan

desain website yang terbaru agar sesuai dengan kebutuhan penggunanya.

 Gambar IV.8 User Goals Pengguna (Define)

3 IDEATE

Pada tahapan Ideate peneliti membuat konsep perancangan yaitu dengan

membuat ide/konsep untuk website yang akan dirancang. Pembuatan konsep yang akan

dilakukan dengan membuat userflow, dikarenakan peneliti redesign website yang lama

jadi tidak diperlukan untuk membuat wireframe nya, kemudian selanjutnya

menentukan style guide User Interface (UI) dan membuat tampilan desain website.

Dikarenakan peneliti membuat Perancangan UI/UX dengan sendiri, jadi masalah

yang terjadi di website CV. Akarsa Garment dan Printing sepenuhnya dikerjakan oleh

peneliti. Tetapi peneliti juga mendapatkan ide dan solusi dengan melakukan
brainstroming dengan tim dan stakeholder dari pihak manager digital marketing

perusahaan.

Gambar IV.9 User Flow untuk mengetahui alur pengguna website CV. Akarsa

4 PROTOTYPE
Tahapan keempat dari Design Thinking adalah membuat prototype. Pembuatan
prototype peneliti menggunakan Figma yang berbasis gratis di web browser.
 Pada tahapan ini peneliti mempersiapkan style guide User Interface seperti Font,
Warna, Logo, dan berbagai macam element yang lain nya.

Gambar IV.10 Font (UI Styleguide) yang digunakan pada website CV.Akarsha

Gambar IV.11 Warna (UI Styleguide) yang digunakan pada website CV.Akarsha
Gambar IV.12 Tampilan Interface Website CV.Akarsha Home Menggunakan Figma
Gambar IV.13 Tampilan Interface Website CV.Akarsha Profile Menggunakan Figma

Gambar IV.14 Tampilan Interface Website CV.Akarsha Gallery Menggunakan Figma

Gambar IV.15 Tampilan Interface Website CV.Akarsha Ukuran Bahan Menggunakan
Figma

Gambar IV.16 Tampilan Interface Website CV.Akarsha Lokasi Kami Menggunakan

Figma
Gambar IV.17 Tampilan Interface Website CV.Akarsha How to Order Menggunakan
Figma

Gambar IV.18 Tampilan Interface Website CV.Akarsha Warna Menggunakan Figma

 Gambar IV.19 Alur Prototype secara keseluruhan

5 TEST
Tahapan terakhir dari Design Thinking adalah Test yaitu mencoba perancangan
UI User Interface yang telah di buat oleh peneliti dengan membagikan kursioner online
melalui google form dan mencoba shared Figma prototype secara live.
Pada tahapan ini peneliti ingin mengetahui UX User Experience yang peneliti
telah buat untuk mengetahui sejauh mana tampilan website yang terbaru ini.
 Gambar IV.20 Grafik Tampilan Website CV.Akarsha “HOME”

Gambar IV.21 Grafik Tampilan Website CV.Akarsha “PROFILE”

Gambar IV.22 Grafik Tampilan Website CV.Akarsha “GALLERY”

Gambar IV.23 Grafik Tampilan Website CV.Akarsha “UKURAN DAN
BAHAN”

Gambar IV.24 Grafik Tampilan Website CV.Akarsha “LOKASI KAMI”

 Gambar IV.25 Grafik Tampilan Website CV.Akarsha “HOW TO ORDER”

Gambar IV.26 Grafik Tampilan Website CV.Akarsha “WARNA”

MENARIK BIASA SAJA TIDAK HASIL YANG DI

SEKALI MENARIK SAMA PEROLEH
SEKALI
100% 0% 0% MENARIK
SEKALI
83.3% 16.7% 0% MENARIK
SEKALI
91.7% 8.3% 0% MENARIK
 SEKALI
91.7% 8.3% 0% MENARIK
SEKALI
75% 25% 0% MENARIK
SEKALI
91.7% 8.3% 0% MENARIK
SEKALI
Table IV.27 Hasil Kusioner Online