UI/UX Study Case: Booking Online and Offline Gym via Mobile

Introduction - Hi! Saya Muhammad Fahreza Mufaris. Beberapa bulan terakhir ini, saya mengikuti Program Studi Independen UI/UX Design di Alterra Academy yang diadakan oleh Kampus Merdeka. Setelah belajar kurang lebih selama 3 bulan di Alterra Academy, dengan senang hati saya mempublikasikan hasil pembelajaran saya menyelesaikan sebuah studi kasus yang diberikan oleh Alterra Academy.

Overview

    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.

Goal

    Menyediakan aplikasi booking gym offline dan online dengan harga yang terjangkau melalui perangkat mobile untuk digunakan masyarakat luas.

Problems

    Diantara semakin padatnya kesibukan kegiatan sehari-hari pasti banyak diantara kita sering mengeluhkan tidak memiliki waktu untuk berolahraga, juga banyak yang tidak mengetahui lokasi gym yang berada disekitar tempat tinggal dan harga pemesanan kelas gym cenderung mahal. Aplikasi gym yang beredar saat ini hanyalah untuk monitoring kegiatan gym saja ataupun hanya untuk pemesanan kelas offline.

    Maka dari itu, FarmaGym App hadir untuk memenuhi permintaan itu dengan menghadirkan pemesanan kelas gym offline dan juga online untuk masyarakat yang tidak memiliki waktu luang untuk pergi ke tempat gym, menghadirkan fitur pembelian makanan dan minuman organik. Tentunya dengan harga yang terjangkau dengan berbagai diskon dan berbagai metode pembayaran.

Tools

    Tools atau alat apa aja sih yang saya pakai untuk buat UI/UX aplikasi FarmaGym ini? Berikut adalah tools yang saya pakai untuk mengerjakan tugas studi kasus aplikasi FarmaGym ini :

Tools - FarmaGym App

Role

    Pada study kasus aplikasi farmagym ini saya multi role sebagai UI / UX Designer, UX Writer, dan UX Researcher juga. Pengerjaan studi kasus ini diawali riset, membuat User Persona, Information Architecture, Pembuatan Design, Prototyping sampai Usability Testing yang dibimbing oleh Dian Gunawan selaku mentor saya di Kelas A UI/UX Design MSIB Alterra Academy.

Design Process

    Project ini menggunakan Metode Design Thinking yang melibatkan lima fase yaitu Empathize, Define, Ideate, Prototype dan Test.

FASE 1: EMPATHIZE

Tujuan Penelitian

1. Mengetahui kebutuhan pengguna
2. Mengetahui pain point yang dihadapi pengguna saat memesan kelas gym
3. Mengetahui ekspektasi pengguna terhadap aplikasi pemesanan gym

Kriteria Responden

1. Orang yang memiliki waktu terbatas untuk berolahraga
2. Laki-laki atau Perempuan
3. Usia 19–25 tahun

Melakukan Riset

    Setelah membuat rencana penelitian, langkah berikutnya adalah mencari partisipan yang bersedia untuk diwawancarai. Pada langkah ini saya mengalami sedikit kesulitan dikarenakan teman-teman saya banyak yang sibuk dengan tugas sehingga chat saya tidak dibalas dan tidak dapat diwawancara. Setelah mencari responden, selanjutnya adalah melakukan sesi wawancara. Saya mendapatkan 2 orang responden yang memenuhi kriteria. Wawancara berlangsung sekitar 10–15 menit melalui google meet.

FASE 2: DEFINE

    Untuk mendefinisikan masalah, disini saya menggunakan 2 teknik riset yaitu User Persona dan Activity Diagram.

User Persona

    Setelah melakukan riset, saya mendapatkan banyak paint point dari pengguna tentang kesehatan ini yang selanjutnya saya buatkan user persona yang mana user persona ini adalah karakter fiksi yang dibuat untuk mempresentasikan target pengguna dari aplikasi.

User Persona - FarmaGym App

Affinity Diagram

    Setelah membuat user persona, saya ambil 7 dari paint point dari user persona tadi untuk saya masukkan kedalam affinity diagram.

Affinity Diagram - FarmaGym App

FASE 3: IDEATE

How Might We (HMW)

    Setelah membuat affinity diagram, saya mengambil beberapa paint point untuk saya lanjutkan ke tahap berikutnya yaitu menyelesaikan dari semua permasalahan diatas. Disini saya menggunakan HMW Framework:

1. Bagaimana caranya agar semua pelanggan dapat mengakses tempat berolahraga?
2. Bagaimana cara agar harga produk terjangkau oleh konsumen dan payment mudah?
3. Apakah ada cara untuk menyiasati waktu yang terbatas agar tetap bisa berolahraga?
4. Apakah ada cara untuk mengatasi sulitnya mencari makanan dan minuman yang sehat di lingkungan sekitar?

HMW - FarmaGym App

Prioritization Matrix

    Dalam kenyataannya, tidak semua solusi bisa diselesaikan sekaligus. Maka dari itu, untuk memprioritaskan fitur-fitur dari setiap solusi yang perlu dibuat dan diselesaikan berdasarkan urgensinya saya menggunakan Matriks Eisenhower.

Prioritization Matrix - FarmaGym App

    Dari hasil research, user banyak mengeluhkan mengenai tidak memiliki banyak waktu luang untuk berolahraga, tidak mengetahui lokasi gym terdekat, biasanya harga kelas gym mahal dan pembayarannya sulit. Maka dari itu fitur opsi pilih jadwal kelas, fitur payment methods, fitur discount dan fitur rekomendasi lokasi dan rute adalah fitur yang harus pertama kali dibuat dan diselesaikan.

User Flow / Task Flow

    Berikutnya saya membuat struktur task flow dan information architecture untuk memperjelas alur fitur aplikasi dari awal hingga akhir untuk user

Task Flow - FarmaGym App

Information Architecture (IA)

    Information Architecture (IA) ini berfungsi agar user lebih mudah dalam menemukan konten yang disajikan didalam aplikasi yang dibuat.

Information Architecture - FarmaGym App

Wireframe

    Wireframe dibuat berdasarkan pada task flow dan information architecture yang sudah dibuat sebelumnya. Wireframe saya buat dengan medium fidelity dikarenakan saya tidak pandai gambar dan saya lebih nyaman membuatnya di figma. lalu selanjutnya saya buat high fidelity.

Medium Fidelity - FarmaGym App

High Fidelity - FarmaGym App

Design Guideline

Design Guideline - FarmaGym App

FASE 4: PROTOTYPE

    Desain perlu diberikan interaksi agar pengguna dapat merasakan alur dari aplikasi yang sudah dibuat dan dapat memberikan feedback terkait desain yang sudah diuji maka dari itu dibuatlah Prototype. Untuk mencoba prototype yang sudah saya buat, dapat klik disini.

Prototype - FarmaGym App

FASE 5: TESTING

    Pada fase ini, prototype diuji coba dan dinilai oleh partisipan apakah sudah mencapai dari solusi yang diinginkan atau belum dan untuk mendapatkan masukan mengenai desain aplikasinya dengan metode Usability Testing.

Kriteria Partisipan :

1. Orang yang memiliki waktu terbatas untuk berolahraga
2. Laki-laki atau Perempuan
3. Usia 19–25 tahun

Tujuan :

1. Memvalidasi solusi kepada pengguna apakah alurnya mudah dipahami atau tidak
2. Mendapatkan masukan mengenai desain aplikasi

Scenario dan Task

Task 1 (Daftar akun) : Silahkan melakukan pendaftaran akun

Task 2 (Masuk akun) : Silahkan melakukan login akun dengan yang sudah didaftarkan sebelumnya

Task 3 (Akses fitur pemesanan kelas offline) : Silahkan mengakses halaman kelas offline dan melakukan pemesanan kelas

Task 4 (Akses fitur detail kelas yang diikuti) : Silahkan mengakses halaman detail kelas yang diikuti dan klik menuju lokasi

Task 5 (Akses Fitur Chat) : Silahkan mengakses halaman chat

Task 6 (Akses Profile) : Silahkan mengakses halaman profile

Hasil

    Partisipan berhasil menggunakan aplikasi FarmaGym dan fitur-fiturnya dari awal hinggal akhir. Partisipan mengatakan bahwa UI yang dibuat sudah sangat bagus dan mudah dipahami.

Learnings

    Pembelajaran yang dapat saya ambil dari proses yang sangat panjang di studi kasus ini yaitu :

1. Saya seharusnya riset lebih dalam lagi tentang aplikasi gym dan terus menggali pertanyaan di sesi wawancara untuk mengetahui permasalahan yang ada. saya merasa kesulitan ketika menentukan HMW dan Prioritization Matrixnya
2. Eksplor lebih dalam lagi berbagai referensi aplikasi Gym dikarenakan disini saya kebingungan menentukan model desain UI apa yang cocok, detail aplikasi apa saja yang harus dimasukkan dan alur lain yang lebih lengkapnya.
3. Banyak sekali tips dan trik UI design yang saya tonton sebelumnya akan tetapi karena keterbatasan waktu sehingga tidak saya lakukan.
4. UX Writing harus ditingkatkan lagi agar dapat menarik minat calon pengguna aplikasi.

    Yaaa Akhirnya selesai juga portofolio studi kasus saya di program MSIB Alterra Academy ini. Thank you for scrolling my portofolio🙌🏻

    Let me know what you think of this friends. We hope these medium can inspire you. Take a look at my linktree and let’s connect with me!

Fahreza Mufaris

Hi! I'm M Fahreza Mufaris. Informatics Student at Bhayangkara Jakarta Raya University. Technology Enthusiasts. @rezamufaris (https://www.mufarisfahreza.my.id)

Bagikan Artikel ini