UI/UX Portofolio: Farmagym Case Study
Pengenalan
Hi semua! Nama saya Helen Dharani Jiffri, Saya adalah mahasiswa jurusan Manajemen di Universitas Universal yang saat ini menjadi peserta UI UX di Alterra Academy. Tujuan saya membuat portfolio tentang Farmagym untuk memenuhi tugas Tugas Latihan dari Alterra Academy.
Latar Belakang
PT Farmagym Sehat Sekali adalah perusahaan yang bergerak di bidang kebugaran yang berkaitan dengan obesitas, penurunan berat badan, dan menjaga stamina. Produk-produk inilah yang menjadi sumber pemasukan untuk saat ini:
1. Makanan dan minuman organik yang dapat menurunkan berat badan dengan mengontrol nilai gizi sesuai dengan kebutuhan dari konsumen, dan
2. Penyediaan tempat untuk konsumen menggunakan alat-alat fitnes yang penggunaannya terpisah antara pria dan wanita,
Konsumen perusahaan baik itu dari makanan dan minuman dan tempat fitnes adalah orang orang dari berbagai macam latar belakang pendidikan dan pekerjaan yang menerapkan gaya hidup sehat.
Baru-baru ini, tim pengembang bisnis ingin melakukan ekspansi pasar dengan cara mengadakan program Farmagym Tech yang menawarkan promo-promo menarik. Perusahaan berharap bisa membantu mereka untuk menggapai impian besarnya dengan memulai gaya hidup sehat seperti berolahraga, fitness, dan mengonsumsi makanan-makanan sehat yang tentunya perusahaan akan memfasilitasi.
Untuk meningkatkan jangkauan pasar dan memberikan kemudahan kepada konsumen dalam mengadopsi gaya hidup sehat, saya memulai proyek pengembangan aplikasi mobile untuk Farmagym. Aplikasi ini bertujuan tidak hanya mempermudah perusahaan dalam menawarkan produk-produknya, tetapi juga memberikan konsumen akses langsung ke program gaya hidup sehat, mencakup konsumsi makanan sehat dan kegiatan fitnes.
Dengan melihat latar belakang tersebut, saya memutuskan untuk mulai melakukan riset untuk mengetahui penyebab yang paling banyak dialami oleh masyarakat ketika ingin memulai gaya hidup sehat dan mengidentifikasi kebutuhan masyarakat yang nantinya akan difasilitasi oleh perusahaan agar bisa mengonsumsi makanan sehat dan berolahraga secara fleksibel.
Durasi Project
Agustus 2023 — Oktober 2023 (2 bulan)
Tools
Figma, Figjam untuk Brainstorming, Zoom, Figma, Adobe Illustrator
Role
Saya bertanggung jawab atas keseluruhan produk. Mulai dari penelitian, melakukan wawancara pengguna, mensintesis dan memprioritaskan tujuan, bertukar pikiran, hingga akhirnya merancang dan menguji solusi. Saya membuat desain berbasis informasi seperti wireframe, Low Fidelity dan High Fidelity Prototype, dan melakukan proses iterasi hingga mencapai hasil yang diinginkan.
Proses Desain
Framework yang digunakan pada project ini adalah User Centered Design.
User-Centered Design (UCD) adalah pendekatan dalam merancang produk, layanan, atau sistem yang menempatkan pengguna sebagai pusat perhatian utama. Dalam UCD, desain didasarkan pada pemahaman mendalam tentang pengguna, kebutuhan mereka, konteks penggunaan, dan tantangan yang mereka hadapi.
Dalam hal UI/UX Design, ini dapat membantu desainer menciptakan produk yang intuitif, menarik, dan ramah pengguna. Sehingga, User Centered Design dalam desain UI/UX melibatkan tahapan sebagai berikut:
- Understand Context of Use
Tahap pertama dalam proses desain adalah memahami keinginan pengguna. Ini melibatkan pemahaman terhadap kebutuhan, tujuan, dan poin kesulitan yang mereka hadapi. Langkah ini dapat dilakukan melalui berbagai metode seperti riset pengguna, survei, wawancara, dan observasi. Untuk penelitian ini, saya menggunakan Zoom untuk menjalankan sesi wawancara dengan seorang Ibu Rumah Tangga sekaligus trader yang menggunakan aplikasi olahraga untuk mengidentifikasi pengalaman yang dirasakan ketika menggunakan aplikasi olahraga tersebut dan memahami masalah yang dialaminya sehari-hari sebagai Ibu Rumah Tangga dan Trader.
Research Method
- In -depth User Interview
Riset ini dilakukan menggunakan wawancara langsung secara virtual (meet)
Kriteria Responden
- Memiliki pengalaman menggunakan aplikasi mobile untuk berolahraga
- Laki-laki/Perempuan
- Warga Indonesia berusia 20–60 Tahun
Research Question
Ada beberapa pertanyaan umum yang akan ditanyakan kepada partisipan. Inilah pertanyaannya:
- Silahkan perkenalkan diri anda
- Apakah anda memiliki masalah kesehatan ketika melakukan pekerjaan anda?
- Bisa ceritakan kenapa pekerjaan tersebut mempengaruhi kesehatan anda?
- Apa aktifitas fisik yang sering anda lakukan?
Seberapa sering anda ngemil? - Apakah mudah mendapatkan bahan makanan organik di tempat asal anda?
- Menurut anda dengan promo-promo yang ditawarkan oleh perusahaan kami dapat mengatasi masalah kesehatan anda?
- Menurut anda, promo apa sajakah yang dapat membantu mengatasi permasalahan anda?
- Jika mengikuti program ini apakah bisa mencapai goals anda?
Langkah selanjutnya adalah mendefinisikan masalahnya. Hal ini melibatkan penyusunan pernyataan masalah, penetapan tujuan, dan identifikasi ruang lingkup proyek. Sebelumnya, saya melakukan wawancara untuk mengumpulkan kesulitan dalam kesehariannya sebagai Ibu Rumah Tangga dan menceritakan pengalamannya ketika menggunakan aplikasi olahraga. Selanjutnya saya melakukan analisis data dan perilaku pengguna dengan menggunakan User Persona.
Tujuan pembuatan user persona adalah untuk lebih memahami pengguna suatu produk atau layanan. User persona dapat membantu saya mempertimbangkan bagaimana persona akan menggunakan produk atau layanan, fitur dan fungsionalitas pengguna, dan bagaimana mereka akan berinteraksi dengan antarmuka. Pada user persona yang saya buat, saya menggunakan data dari partisipan ketika wawancara dan pain point yang dirasakannya.
Dari User Persona tersebut, dapat diketahui bahwa Lily Manopo, seorang ibu rumah tangga berusia 44 tahun dengan pekerjaan sampingan sebagai Trader, menghadapi tantangan multitasking yang melelahkan. Meskipun kesibukannya dalam mengurus rumah tangga dan trading, Lily memprioritaskan kesehatan dan kebugaran dengan berolahraga di rumah melalui aplikasi mobile. Lingkungan tempat tinggalnya mendukung gaya hidup sehat, memudahkannya untuk mendapatkan bahan makanan organik. Lily berharap dapat mengelola kelelahan, menjaga kebugaran tanpa harus pergi ke pusat kebugaran, dan mencapai keseimbangan antara pekerjaan dan kehidupan pribadi. Sebagai pengguna ideal, Lily mencari aplikasi yang sesuai dengan jadwalnya, menyediakan latihan bervariasi, informasi tentang gaya hidup sehat, rekomendasi resep makanan sehat, dan motivasi agar tetap semangat berolahraga.
2. Specify User Requirements
Pada tahap ini, saya membuat prototype dengan low-fidelity untuk menguji ide dan memvalidasi asumsi. Perbaikan ini juga melibatkan solution idea, affinity diagram, prioritization matrix, user flow dan pembuatan prototipe.
a. Solution Idea
Solution idea melibatkan pemahaman kebutuhan dan preferensi pengguna target, menciptakan desain yang mengatasi masalah mereka dan memberikan pengalaman pengguna yang lancar. Ini adalah solusi yang saya buat untuk pengguna.
b. Affinity Diagram
Affinity Diagram adalah alat yang digunakan dalam pemikiran desain dan UX untuk mengatur dan mengkategorikan ide, informasi, atau data. Hal ini memungkinkan saya untuk melihat gambaran besarnya dan mengidentifikasi peluang atau pain points apa pun dalam perjalanan pengguna.
c. Prioritization Matrix
Prioritization Matrix merupakan aspek penting karena membantu menciptakan antarmuka yang mudah digunakan, intuitif, dan efektif. Untuk memprioritaskan elemen desain pada langkah ini, saya menggunakan matriks prioritas sederhana (Dampak Tinggi/Rendah, Upaya Tinggi/Rendah).
3. Design Solutions
a. User Flow
User Flow mengacu pada jalur yang diambil pengguna untuk mencapai tujuan tertentu atau menyelesaikan tugas dalam produk digital atau situs web. Hal ini melibatkan pemetaan langkah-langkah yang akan diambil pengguna dari awal hingga akhir, dan mengidentifikasi potensi hambatan atau hambatan yang mungkin menghambat kemajuan mereka.
Berikut adalah task flow dan user flow yang saya buat untuk aplikasi mobile Farmagym:
b. Wireframes
Wireframe adalah representasi visual dasar dari antarmuka situs web, aplikasi, atau perangkat lunak. Saya menggunakan Desain Low-Fidelity untuk gambar rangka karena biasanya melibatkan representasi tata letak, struktur, dan fungsionalitas produk yang lebih detail dan polesan visual yang lebih sedikit dibandingkan desain dengan High-Fidelity.
Berikut adalah Desain Low-Fidelity yang saya buat untuk aplikasi Farmagym.
c. Design Style-Guide
Design Style-Guide adalah seperangkat pedoman yang memberikan arahan dan konsistensi untuk elemen desain, termasuk tipografi, skema warna, tata letak, ikonografi, dan interaksi.
Pada pengerjaan Aplikasi Farmagym, saya membuatkan design/style-guide berupa UI Style Guide yang terdiri dari Color style, typography, elevation/shadow, icon, grid system, dan spacing karena memberikan konsistensi visual dan efisiensi dalam pengembangan project. Kemudian saya juga menggunakan Component library yang terdiri dari Text field, Button, Dropdown, Tooltip, Snackbar, Radio button, Checkbox, Toggle, Badge/Chip/Tag, dan Tab agar bisa menggunakan kompenen tersebut berulang kali dan tetap berfungsi secara konsisten.
d. Mockup
Mock-up adalah representasi tingkat tinggi dari desain produk. Pada tahap ini saya membuat kombinasi style, typography, warna dan lain-lain. Setelah melalui beberapa tahapan penelitian dan ide, berikut adalah desain mockup untuk desain aplikasi Farmagym:
e. Prototyping
Setelah memahami masalah pengguna dan menentukan kebutuhan pengguna, Saatnya menghubungkan setiap layar menjadi prototipe di Figma, Prototype adalah hal penting yang harus dilakukan, setiap transisi detail membuat kenangan satu sama lain, Mengenai banyak layar yang harus diunggah, Saya baru saja meletakkan tautan prototipe di bawah ini:
4. Evaluate Against Requirements
Setelah melakukan prototyping dan menghubungkan semua layar, saatnya menguji produk kepada pengguna, Mengapa kita perlu melakukan pengujian? Dengan Tes, Kami menghemat banyak waktu, uang, dan tenaga. Tujuan saya adalah untuk mengetahui perilaku dan masalah pengguna pada semua fitur secara keseluruhan.
Merencanakan Pengujian Kegunaan
Metodologi
Saya telah melakukan Usability Testing dengan pendekatan Penelitian Kualitatif menggunakan Figma dan Zoom Meet.
User Goal & Task
- Daftar akun: Silahkan melakukan pendaftaran akun dengan identitas asli anda
- Masuk akun: Silahkan melakukan pendaftaran akun dengan identitas asli anda
- Membaca Resep makanan: Silahkan coba membuka salah satu resep makanan
- Memulai Aktivitas Olahraga: Silahkan coba melakukan aktivitas olahraga di aplikasi ini
- Melakukan pemesanan merchandise: Silahkan coba melakukan pemesanan merchandise
- Mengaktifkan reminder: Silahkan coba mengaktifkan reminder olahraga
- Logout akun: Silahkan coba logout dari aplikasi ini
Kriteria Partisipan
Responden yang akan mengerjakan skenario tugas memiliki kriteria seperti di bawah ini.
- Kriteria peserta berusia 18–40 tahun
- Orang yang ingin menggunakan aplikasi olahraga berbasis mobile
- Pernah atau sering menggunakan aplikasi yang menyediakan fitur olahraga
- Memiliki smartphone Android/Iphone
- Domisili di seluruh wilayah Indonesia
Ringkasan Wawasan
Saat melakukan sesi wawancara dalam proses UT, saya melihat partisipan merasa agak kesulitan dalam melakukan pendaftaran akun dan ketika ingin melakukan aktivitas olahraga. Di kedua skenario tersebut, partisipan merasa takut untuk menjalankan task tersebut bahkan langkah kecil pun partisipan tidak berani melakukannya seakan takut membuat kesalahan. Rangkuman hasil Usability Testing dapat dilihat [di sini] untuk informasi lebih lanjut.
Setelah melakukan wawancara dengan partisipan, saya melakukan iterasi pada skenario daftar dan melakukan aktivitas olahraga. Untuk bagian Pendaftaran saya tambahkan frame keyboard dan memperluas ruang akses keyboard agar pengguna bisa melakukan pendaftaran dengan mudah seperti ketika melakukan Login. Untuk Aktivitas olahraga, sama mengurangi framenya agar tidak membuat pengguna kebingungan. Sehingga hasilnya sebagai berikut:
Daftar(Before) :
Daftar(After) :
Aktivitas Olahraga (Before) :
Aktivitas Olahraga (After) :
Kesimpulan
Selama proses pengerjaan Farmagym ini, saya menyadari bahwa pengerjaan design aplikasi ini jauh dari kata baik, dan saya menuliskan apa yang saya pelajari dari proyek ini
Penting untuk memprioritaskan pengalaman pengguna yang optimal serta pengujian yang terus-menerus, guna menghasilkan desain aplikasi yang memenuhi kebutuhan, sambil mempertimbangkan keunggulan estetika dan fungsionalitasnya.
Dalam melalui proses ini, saya menyadari bahwa selalu terdapat ruang untuk perbaikan, dan saya sangat menghargai kritik dan saran yang membangun dari mentor dan rekan-rekan peserta Alterra. Pengalaman ini memberikan saya perspektif berharga dalam perjalanan desain saya, dan saya berkomitmen untuk terus belajar dan berkembang menghadapi tantangan yang lebih besar di masa depan.
Terima kasih sebelumnya!