Yok Fitness Membership

Overview

Yok Fitness akan membantu seseorang yang untuk berlangganan menyewa sebuah tempat fitness sebagai sarana olahraga dengan aktivasi online tanpa harus datang ke tempat fitness. Membership berfungsi untuk pendaftaran member baru Yok Fitness, dan melakukan pembayaran melalui transfer/bayar langsung di tempat.

Sistem ini dibuat dalam rangka untuk mempermudah tempat fitness dalam mengelola pembukuan membernya. Sistem Yok Fitness ini dibuat dengan bahasa pemrograman PHP dan MySQL. Tampilan dari sistem ini tentunya sudah responsive loh ya 😊

Problem

Saat ini, banyak tempat fitness yang masih menggunakan cara manual dalam mengelola pembukuan membernya. Hal ini tentunya akan memakan waktu dan biaya yang cukup besar. Selain itu, sistem manual juga rentan terhadap kesalahan dan kehilangan data. Oleh karena itu, dibutuhkan sistem yang dapat membantu tempat fitness dalam mengelola pembukuan membernya dengan lebih efektif dan efisien. Saat kita mengumpulkan informasi dari kuisioner, kita merangkum beberapa masalah yang perlu diselesaikan kedepannya :

1. Proses Pendaftaran dan Pembayaran yang Manual

   Pada saat ini, proses pendaftaran dan pembayaran member baru masih dilakukan secara manual (seperti pencatatan di buku atau spreadsheet) untuk pendaftaran member dan pembayaran. Hal ini tentunya akan memakan waktu dan biaya yang cukup besar. Selain itu, sistem manual juga rentan terhadap kesalahan dan kehilangan data. Resiko lain juga keterlambatan, masih terlihat kuno, dan data tidak tersimpan secara digital.

2. Kesulitan dalam Mengelola Data Member

   Tempat fitness sering kesulitan untuk mengelola data member, seperti data keanggotaan, jadwal latihan, atau riwayat pembayaran, yang menyebabkan pengelolaan dan analisis data menjadi kurang efisien. Hal ini seringkali menyebabkan kesalahan dalam perhitungan pembayaran dan laporan keuangan. Data member yang tersebar pum masih dalam berbagai media seperti kertas atau Excel, sehingga membuat pengelolaan tidak efisien. Pembagian pengelolaan data transaksi pelayanan fitness yang dimana transaksi ini terpisah antara membership dan non membership.

3. Kurangnya Integrasi Pembayaran Otomatis

   Beberapa tempat fitness mungkin hanya menerima pembayaran di tempat atau melalui metode pembayaran terbatas, yang membuat proses transaksi menjadi lebih lambat dan kurang fleksibel bagi member. Ini juga bisa menurunkan kepuasan pelanggan. Kurangnya support sistem dari layanan khusus non membership. Karena sistem ini hanya berfokus pada layanan membership saja.

4. Tidak Ada Integrasi untuk Aktivasi Online

   Sebagian besar tempat fitness masih mengandalkan pendaftaran dan aktivasi manual saat member datang langsung ke tempat. Padahal, sistem aktivasi online bisa menghemat waktu, memberi kenyamanan bagi member, serta mempermudah pengelolaan administrasi.

5. Rentan terhadap Kesalahan Administrasi

   Pengelolaan jadwal latihan atau booking fasilitas fitness yang dilakukan secara manual dapat mengakibatkan kesalahan jadwal, seperti booking yang tumpang tindih atau lupa mencatat kehadiran member.

6. Laporan Keuangan yang Tidak Efisien

   Pembuatan laporan masih dilakukan secara manual yaitu dengan cara tulis tangan yang berakibat fatal dalam pembukuan keuangan. Dalam sistem manual, pembuatan laporan keuangan untuk pembayaran membership, transaksi, dan laporan keuangan lainnya sering kali membutuhkan waktu yang lama dan rentan kesalahan. Proses ini mempengaruhi transparansi dan akurasi dalam pengelolaan dana.

Dari beberapa masalah yang telah diidentifikasi, maka solusi sistem ada di Yok Fitness. Hadir untuk mengatasi berbagai masalah ini dengan sistem yang terintegrasi, memungkinkan tempat fitness untuk :

• Pendaftaran Online: Member dapat melakukan pendaftaran dan pembayaran secara online, tanpa perlu datang langsung ke tempat fitness.
• Pengelolaan Data Member yang Lebih Mudah: Data member dikelola secara otomatis dalam sistem yang terpusat, memungkinkan akses data secara cepat dan tepat.
• Pembayaran Beragam Metode: Member bisa melakukan pembayaran melalui berbagai metode (transfer bank, e-wallet, pembayaran langsung di tempat), yang mempermudah transaksi.
• Manajemen Jadwal Otomatis: Sistem ini membantu manajemen jadwal, booking fasilitas fitness, serta mengurangi kemungkinan kesalahan administrasi.
• Laporan Keuangan Otomatis: Menghasilkan laporan keuangan dan transaksi secara otomatis, meminimalkan risiko kesalahan manusia, serta memudahkan analisis keuangan.

Dari beberapa masalah yang telah diidentifikasi, maka sistem ini akan membantu tempat fitness dalam mengelola pembukuan membernya dengan lebih efektif dan efisien. Sistem ini juga dapat membantu tempat fitness dalam mengelola data member, melakukan pembayaran otomatis, dan mengintegrasikan aktivasi online. Dengan demikian, tempat fitness dapat meningkatkan kepuasan pelanggan dan meningkatkan efisiensi pengelolaan administrasi. Selain itu, sistem ini juga dapat membantu tempat fitness dalam mengelola laporan keuangan dengan lebih efisien dan akurat. Dengan demikian, tempat fitness dapat meningkatkan transparansi dan akurasi dalam pengelolaan dana.

User & Audience

Aplikasi Yok Fitness dirancang untuk individu yang ingin menjalani hidup sehat melalui kebugaran dan olahraga dengan cara yang lebih mudah dan praktis.

• Target Audiens: Individu yang tertarik dengan kebugaran, berusia 20 hingga 40 tahun, yang ingin menjalani hidup sehat dan mengoptimalkan rutinitas olahraga mereka.
• User Experience: Fokus pada kenyamanan pengguna, dari proses registrasi hingga pembayaran, serta kemudahan dalam mengelola jadwal dan keanggotaan.

Idea

Setelah berdiskusi dan merencanakan solusi dengan tim, alur sistemnya kami mulai membagi pekerjaan sesuai keahlian masing-masing. Saya diberi tanggung jawab untuk merancang & membuat User Interface hingga prototyping.

Dengan pengetahuan saya dari beberapa analisis tim sebelumnya, saya melanjutkan pekerjaan dari mas Hamid sebagai UX Design dengan mengembangkan wireframe yang sudah ada. Setelah tampilan sketsa (wireframe) jadi, saya melanjutkan pekerjaan saya untuk mendesain tampilan visual website tersebut.

Mulai dari color pallete, pemilihan font, dan layouting adalah beberapa elemen desain yang saya pilih dengan cermat untuk menciptakan konsistensi visual di seluruh halaman aplikasi. Setiap elemen dipilih untuk memastikan aplikasi terasa segar namun tetap mudah diakses oleh pengguna dari berbagai kalangan. Proses ini juga termasuk menciptakan hierarki visual yang jelas untuk memudahkan navigasi dan mengoptimalkan pengalaman pengguna.

Selain itu, saya juga merancang prototipe interaktif menggunakan Figma untuk menguji flow dan interaksi antar layar. Prototipe ini tidak hanya membantu tim developer dalam memahami alur sistem secara lebih mendalam, tetapi juga menjadi alat yang sangat berguna dalam melakukan user testing untuk melihat apakah ada bagian dari aplikasi yang perlu ditingkatkan atau disesuaikan.

Meskipun proses desain ini cukup menantang, terutama dalam memastikan tampilan tetap responsif di berbagai perangkat, saya selalu berusaha untuk memastikan bahwa setiap keputusan desain mendukung tujuan utama proyek, yaitu menciptakan pengalaman pengguna yang menyenangkan dan efisien.

Peran Saya Sebagai UI Designer

Sebagai UI Designer, peran saya dalam proyek ini adalah untuk mendesain antarmuka pengguna (UI) yang intuitif dan responsif, memastikan pengalaman pengguna yang baik di berbagai perangkat, terutama mobile. Untuk memastikan konsistensi desain, saya memulai pembuatan desain dengan high-fidelity dengan membuat design style.

Berdasarkan masukkan dan kritikan terus-menerus dari anggota tim dan developers, saya berhasil membuat mockups high-fidelity untuk tampilan mobile responsive atau website. Dengan menggunakan Tailwind CSS, saya membuat desain yang responsif dan mudah digunakan. Saya juga menggunakan beberapa komponen UI yang sudah ada untuk mempercepat proses desain.

Alur Proyek:

1. Wireframe & User Flow

   Saya memulai dengan menggali kebutuhan pengguna dan bisnis melalui diskusi dengan tim, kemudian merancang wireframe dan user flow untuk menggambarkan alur aplikasi secara keseluruhan. Dengan menggunakan tools seperti Figma, saya membuat sketsa desain dasar yang mencakup tata letak halaman, pengelompokan elemen-elemen penting, dan interaksi antar layar. Diskusi dengan tim sering kali memberi insight untuk memperbaiki flow agar lebih lancar dan sesuai dengan kebutuhan pengguna.

2. Desain Visual

   Setelah menyelesaikan wireframe, saya melanjutkan ke tahap desain visual, yang mencakup pemilihan color palette, tipografi, dan layout. Saya memastikan setiap elemen desain harus clean, modern, dan mudah dipahami oleh pengguna. Saya juga membuat mockup high-fidelity untuk memastikan desainnya dapat diterapkan dengan baik dalam prototipe yang interaktif.

3. Desain Responsif

   Mengingat banyaknya pengguna yang mengakses melalui perangkat mobile, saya memprioritaskan desain responsif. Saya berdiskusi dengan tim developer nantinya akan dikembangkan menggunakan Tailwind CSS untuk memastikan tampilan tetap konsisten di berbagai ukuran layar, mulai dari desktop hingga smartphone.

4. Prototyping

   Dengan menggunakan Figma, saya membuat prototipe interaktif yang memungkinkan tim developer untuk menguji alur aplikasi dan interaksi antar layar. Prototipe ini memungkinkan tim developer untuk lebih mudah memahami bagaimana aplikasi akan bekerja dan memberikan gambaran yang lebih jelas kepada stakeholder tentang bagaimana aplikasi berfungsi. Selain itu, iterasi desain berdasarkan feedback yang diterima juga dilakukan secara berkala untuk memastikan aplikasi berjalan dengan baik, memenuhi kebutuhan pengguna, dan mencapai standar kualitas yang diinginkan. User testing juga dilakukan untuk memvalidasi flow dan memastikan aplikasi intuitif bagi pengguna akhir.

Berikut adalah beberapa contoh desain yang saya buat :

1. Wireframe (Sketsa Awal)

Gambar ini akan menunjukkan aliran dasar aplikasi dan struktur halaman utama atau halaman-halaman penting, seperti halaman registrasi, dashboard pengguna, dan halaman pembayaran. Ini adalah gambaran kasar dari tata letak dan elemen UI yang akan hadir.

2. Mockup High-Fidelity (Tampilan Visual Final)

Mockup ini adalah desain visual yang sudah selesai, yang menunjukkan pemilihan warna, tipografi, dan elemen desain lainnya. Ini adalah desain final yang mendekati tampilan produk akhir. Fokusnya adalah pada tampilan visual dan bagaimana pengguna akan melihat antarmuka aplikasi.

• Tampilan desktop dan mobile untuk halaman registrasi member

  Halaman registrasi member adalah halaman yang memungkinkan pengguna untuk membuat akun baru dan bergabung sebagai member. Desain ini memprioritaskan kemudahan dan kenyamanan pengguna saat mendaftar, baik di layar besar maupun kecil.

• Tampilan dashboard pengguna dan pilihan paket berlangganan

  Dashboard pengguna adalah halaman utama setelah login atau membuat akun baru, yang menyajikan informasi penting seperti profil pengguna, riwayat aktivitas fitness, dan status langganan. Pada tampilan desktop, semua data ditampilkan dalam panel-panel terstruktur dengan akses yang mudah ke berbagai fitur. Untuk tampilan mobile, desainnya disesuaikan dengan ukuran layar lebih kecil, dengan navigasi yang mudah di-scroll dan jelas. Di bagian pilihan paket berlangganan, pengguna dapat memilih paket fitness yang sesuai dengan tujuan mereka, baik itu program bulanan, tahunan, atau berdasarkan jenis layanan (seperti personal training atau akses kelas). Desain ini berfokus pada kemudahan dalam memilih paket serta memberikan pengalaman pengguna yang optimal.

• Tampilan halaman pembayaran atau transaksi

  Halaman pembayaran adalah bagian penting dalam proses penyelesaian langganan atau pembelian layanan. Di tampilan desktop, halaman pembayaran dirancang dengan elemen-elemen yang jelas dan terstruktur, memudahkan pengguna untuk memilih metode pembayaran, memasukkan data kartu kredit/debit, dan melihat ringkasan transaksi. Pada tampilan mobile, elemen-elemen ini disesuaikan agar pengguna tetap nyaman mengisi data tanpa perlu scroll terlalu banyak. Halaman ini dilengkapi dengan berbagai opsi pembayaran yang aman, serta konfirmasi transaksi yang mudah dipahami, memastikan pengguna merasa aman dan yakin dalam menyelesaikan pembayarannya.

3. Prototipe Interaktif (Prototype)

Prototipe ini adalah versi interaktif dari aplikasi, yang memungkinkan pengguna untuk mengalami alur aplikasi secara langsung. Prototipe interaktif menunjukkan bagaimana aplikasi berfungsi dan mengalir dari satu layar ke layar lain, dan bagaimana interaksi antar elemen UI terjadi. Ini adalah versi yang paling dekat dengan produk akhir, tetapi masih dalam bentuk prototipe. Prototipe ini sangat berguna untuk pengujian alur aplikasi dan interaksi antar layar.

Fitur:

• Registrasi dan login member
• Pemilihan paket berlangganan
• Pembayaran otomatis
• Dashboard user

Prototyping

Setelah menyelesaikan screen design dan mendapat approve dari tim, saya melanjutkan ke tahap pembuatan prototyping menggunakan Figma. Prototype ini memiliki berbagai tujuan, testing the flow & fungsionalitas layar/screens.

Penggunaan prototype ini akan sangat membantu tim developer dalam memahami interaksi sistem, navigate, dll. Dengan menggunakan Figma, saya membuat prototype yang interaktif dan mudah digunakan. Saya juga menggunakan beberapa fitur prototyping seperti animasi dan transisi untuk membuat prototype lebih menarik.

💡 Anda bisa mencoba prototipe interaktifnya melalui link berikut:

👉 Lihat Prototipe di Figma