UX Case Study: Company Profile Website Redesign

Company Profile Design Case Study merupakan portofolio case study pertama yang saya buat dan publish ke Medium. Mungkin akan ada perbaikan di kemudian hari tentunya ketika saya telah belajar lebih banyak mengenai cara terbaik dalam menuliskannya.

*Ps. karena ini berkaitan dengan project sungguhan, maka dalam penulisan ini beberapa logo maupun tulisan disamarkan dan hanya di halaman homepage.

Context

Awal Januari 2021, saya diminta untuk melakukan re-design tampilan website profil sebuah software house milik PT Transisi Teknologi Mandiri yang berbasis di Yogyakarta. Karena peran saya sebagai desainer dalam project tidak langsung bersentuhan dengan client dari software house tersebut, maka saya aktif berkomunikasi dengan Project Manager agar dapat mengetahui “susunan tampilan” seperti apa yang dibutuhkan dalam website profil perusahaan.

Problem

Setelah mendengarkan paparan Project Manager dan mendapatkan draft desain sebelumnya, saya merangkum permasalahan tersebut menjadi beberapa poin. Poin-poin tersebut antara lain:

• Client dari software house merupakan sebuah badan usaha yang formal dan terbilang besar. Mereka menginginkan tampilan website dari vendor mereka (dalam hal ini si software house) terlihat lebih “profesional”.
• Penggunaan flat illustration oleh client dari software house dinilai kurang formal.
• Pada halaman homepage dirasa masih kurang menarik karena penempatan komponen desain seperti foto penunjang masih cenderung “kaku”.
• Desain pada bagian services tidak semuanya benar-benar menjelaskan layanan yang dapat diakomodir oleh software house. Jadi ketika di-klik, tidak ada respon apa-apa karena bersifat dummy.
• Dirasa masih kurang dalam analisis komponen apa saja yang perlu ditampilkan dalam website profil perusahaan.

Approach

Maka dari itu, langkah yang diambil dalam pembuatan desain ini adalah:

Riset:

1. Riset dari desain lama (V.1).
2. Riset kompetitor (Competitor Analysis).
3. Riset desain dari situs desain.

Output:

1. Kerangka desain (wireframe).
2. Desain hi-fi.
3. Hasil Testing.

Langkah 1 : Riset dari desain lama (V.1)

Langkah pertama yang saya lakukan adalah melihat desain versi pertama (V.1). Desain versi pertama mereka memiliki komponen sebagai berikut :

Desain Web Profil Perusahaan V.1 (design by Johan F.)

Alasan mengapa saya perlu menganalisis desain versi pertama adalah:

1. Agar saya tidak melakukan kesalahan yang sama dalam mendesain. *Parameter baik-buruk disini adalah design principles dan notes dari user tentu saja.
2. Karena saya perlu membuat benchmark sejauh apa perubahan desain yang saya lakukan.
3. Mempermudah saya membuat design system apabila ada komponen desain yang lain dan dapat digunakan kembali seperti : warna, icon, dan logo.

Langkah 2 : Riset kompetitor (Competitor Analysis)

Selain membandingkan dengan desain awal, riset dari beberapa website competitor yang bergerak di bidang yang sama juga perlu dilakukan. Hal tersebut dimaksudkan agar dapat membuat feature priorization yang juga sangat dibutuhkan dalam penyusunan hirarki desain.

Karena desain yang akan dibuat adalah website profil perusahaan dari software house, maka kompetitor yang dianalisis juga dari scope yang sama. Desain yang dijadikan acuan kompetensi antara lain:

1. N-ix : https://n-ix.com/

N-iX adalah perusahaan layanan pengembangan perangkat lunak yang berbasis di Eropa Timur. Komponen dari website N-iX antara lain:

Komponen desain N-ix

2. itransition : https://www.itransition.com/

itransition merupakan perusahaan layanan pengembangan perangkat lunak yang berbasis di US. Komponen dari website itransition antara lain:

Komponen desain itransition

Dari langkah 1 dan langkah 2, dapat dibuat feature priorization dengan matrix Eisenhower sebagai berikut:

Penjelasan matriks :

• Penting dan mendesak: Navbar, About, Client, Expertise, Services, Contact
• Penting namun kurang mendesak: Subscribe, How to Work, Technology
• Kurang penting namun mendesak: Blog
• Kurang penting dan kurang mendesak: Report, Success Stories

Melalui matriks prioritas diatas, kami memutuskan untuk meng-implementasi fitur-fitur yang ada pada pada matriks Penting dan Mendesak, Penting Namun Kurang Mendesak, dan Kurang Penting Namun Mendesak.

Alasan fitur-fitur tersebut masuk ke bagian penting dan dibutuhkan adalah karena saya ingin mengambil perpotongan dari MVP website profil perusahaan ini supaya meskipun masih versi paling sederhana tetapi tetap bisa menyampaikan value secara optimal.

Langkah 3 : Riset desain dari situs desain

Setelah melakukan riset kompetitor, selanjutnya adalah riset mengenai desain secara artistik. Meskipun pada riset kompetitor juga dapat dilakukan, akan tetapi pada tahap ini saya lebih berfokus untuk membebaskan diri agar mendapatkan inspirasi kreatif seperti hirarki desain, permainan warna, dan lain-lain.

Biasanya saya mencari inspirasi tersebut dari situs desain seperti Dribbble, Behance, maupun dari akun desain yang saya ikuti di Instagram. Beberapa desain yang saya jadikan referensi dalam pembuatan desain (terutama homepage) website profil perusahaan ini antara lain:

1. “Di-kosan | Boarding house landing page” — oleh Fadhilah Rizky

https://dribbble.com/shots/10773778-Di-kosan-Boarding-house-landing-page

Konsep desain tersebut sangat bersih dan peletakan search bar tersebut dapat digunakan pula ruangnya untuk kolom input email agar memudahkan pengunjung website profil mensubscribe website dan mendapatkan informasi seperti brosur, update terbaru, dll.

2. “Firstsource Concept” — oleh Martyna Kosowska

https://dribbble.com/shots/13955812-Firstsource-Concept

Secara struktur, Firstcourse Concept sudah mewakili beberapa komposisi yang ingin didesain seperti: Navbar → Penjelasan Singkat→ Client → Service → Product (yang ini akan menjadi section “Our Progress”)→ Blog → yang terakhir Footer (dan contact). Dengan Begitu saya dapat menyesuaikan dengan tema yang lebih sesuai dengan software house.

Output

Langkah 1: Kerangka desain (Wireframe)

Wireframe adalah sketsa/coretan kasar untuk penataan item-item pada halaman website sebelum proses desain sesungguhnya dimulai. Pada tahapan ini, saya membuat wireframe sesuai dengan feature priorization yang telah ditentukan. Hasil dari wireframe tersebut adalah sebagai berikut:

Wireframe website profil perusahaan

Langkah 2: Hifi design

Membuat desain hifi atau high fidelity design adalah langkah dimana kita membuat desain dengan memperhatikan warna, jarak, ukuran, dan elemen desain yang lebih presisi.

Setelah melakukan proses brainstorming, dan implementasi desain, didapatkan desain dengan komposisi sebagai berikut :

Keseluruhan komponen hasil redesain

Agar lebih terlihat perbandingan sebelum-sesudah redesign, maka saya tampilkan perbandingan per section dan tamplan keseluruhan desain homepage sebagai berikut:

Perbandingan sebelum-sesudah redesign

Serta dibandingkan dengan desain sebelumnya, berikut perbedaan desain secara lebih detail:

1. Header

Komparasi tampilan Header

2. Service

Komparasi tampilan Service

3. Blog

Komparasi tampilan Blog

4. Contact

Komparasi tampilan Contact

Desain yang telah selesai dibuat, selanjutnya akan di-test kepada user.

Langkah 3: Testing

Hasil dari output kemudian diujikan kepada Project Manager (ada dua, PM project dan PM utama) serta client dari software house tersebut. Dalam pengujian ini, tools yang digunakan adalah Figma Prototype dari desain hifi yang telah dibuat sebagai objek test serta Google Meets sebagai sarana berkomunikasi antara tester dan participants secara daring. Sedangkan metode tes untuk mengevaluasi pengalaman pengguna dengan Usability Testing.

Desain yang diujikan adalah desain halaman homepage. Hasil dari pengujian tersebut dijabarkan dalam tabel Completion Rate sebagai berikut:

Completion Rate hasil redesign website profil perusahaan

Berdasarkan Completion Rate yang didapatkan, beberapa key value hasil analiais dan masukkan selama pengujian yang dapat diambil antara lain:

• Pada halaman Expertise, User 1 sedikit lambat dalam menggunakan desain. Bagi User 1, penataan elemen desain pada bagian Expertise dirasa kurang presisi dan menarik.
• User 1 juga mengalami sedikit lambat dalam membaca summary pada blog dikarenakan alignment pada tulisan justify.
• User 3 mengalami kesulitan hingga stop pada bagian Technology karena hanya terdapat icon dari teknologi yang digunakan tanpa penjelasan dan aksi untuk di klik.

Key value serta masukkan para partisipan kemudian digunakan dalam pengembangan desain dan iterasi selanjutnya.

Outcome

Tahapan terakhir adalah melihat benchmark yang dihasilkan setelah proses redesign website profil perusahaan.

Problem

• Desain terlihat kurang profesional dan formal karena terlalu banyak illustrasi. Masih ada section yang bersifat dummy. Ada komposisi desain yang belum tampil dan kurangnya riset dari desain sebelumnya.

Outcome

• Konsep desain dibuat lebih formal dengan menerapkan foto-foto yang menunjang desain dibandingkan illustrasi.Telah melakukan riset ulang terhadap kompetitor yang memiliki konsep bisnis sejenis (software house) dan mendapatkan fitur priorization yang mengeliminasi tampilan yang kurang diperlukan untuk mencegah fitur dummy. Menghasilkan reaksi positif dari pengguna dan meningkatkan GMV sebesar 30%.

Reflection

1. Komunikasi adalah kemampuan yang penting bagi desainer. Dalam berdiskusi dengan client, kita harus dapat “menceritakan” apa yang telah kita desain dan alasan mengapa membuat konsep desain tersebut secara well explained.
2. Bersikap kritis tidak masalah. Kadang kita perlu banyak bertanya kepada client kerena memperlihatkan seberapa tertarik kita dalam mengerjakan suatu proyek dan meminimalisir permasalahan ketidaksesuaian desain.
3. Desain adalah konsep yang iteratif dan dapat diupgrade. Namun jika menyangkut suatu brand, usahakan tetap mengikuti dan mengambil beberapa komponen design system yang telah digunakan sebelumnya (dan memang sudah mereka tentukan).

Attribution

Dalam pembuatan case study ini saya sangat berterimakasih pada :

1. Icon dari Material Design dan Ikonate.
2. Gambar-gambar dengan lisensi COC dari Unsplash, Pexel, dan Pixabay.
3. Semua referensi desain.
4. Mas Husni (teman setim saya), Content Writer, dan Project Manager yang terlibat dalam pembuatan redesign website.

— Mentari.