Perkenalan

Halo pembaca Medium! Dalam studi kasus UI UX ini, saya akan memamerkan desain aplikasi seluler saya. “Stash&Store” adalah nama aplikasi seluler kedua saya. Ini terdiri dari berbagai fitur yang membantu pengguna menemukan ruang penyimpanan yang memadai untuk item mereka dan/atau memonetisasi kelebihan ruang mereka sendiri. Saya bercita-cita untuk menjadi inovatif dan kreatif dan menjadikan aplikasi ini ramah pengguna, intuitif, fungsional, dan seunik mungkin.

Masalah

Saat memulai proyek, saya memiliki satu masalah khusus yang ingin saya selesaikan. Namun, setelah beberapa pemikiran lagi, saya menyadari "Stash&Store" dapat secara efektif menjadi aplikasi multifungsi yang memecahkan masalah yang agak berbeda untuk berbagai jenis orang. Berikut ini adalah masalah yang ingin saya selesaikan dengan cara tertentu:

• Kurangnya ruang penyimpanan di rumah orang
  Di dunia modern orang kekurangan tempat tinggal apalagi ruang penyimpanan.
• Harga unit penyimpanan dan gudang yang tinggi
  Mereka yang berpikir untuk menyewa ruang penyimpanan seringkali enggan melakukannya karena harga sewa yang tinggi. Gudang khusus seringkali bisa sangat mahal.
• Surplus ruang yang tidak terpakai
  Orang yang memiliki kelebihan ruang terkadang hanya menyisakan biaya untuk ruang yang tidak terpakai.

Menyadari masalah yang disebutkan di atas, saya mulai melakukan penelitian. Hal pertama yang saya lakukan adalah, seperti biasa, menganalisis aplikasi dan produk pesaing. Dengan melakukan ini, saya mendapatkan beberapa ide tentang apa yang dapat saya tambahkan ke aplikasi saya, tetapi yang lebih penting, saya menemukan kekurangan dan kekurangan dalam aplikasi pesaing. Tujuan akhir saya adalah membuat aplikasi terbaik dan terunik untuk tujuan ini! Selain memeriksa aplikasi pesaing, saya ingin mengenal penggunanya. Sepanjang seluruh proses desain, memikirkan pengguna dan kebutuhannya adalah prioritas utama saya.

Persona Pengguna

Setelah benar-benar mengatasi masalah inti yang akan dipecahkan oleh aplikasi saya dan melakukan penelitian ekstensif tentang kebutuhan pengguna potensial, langkah selanjutnya adalah mengidentifikasi persona pengguna yang ideal.

Brainstorming

Setelah mengidentifikasi persona pengguna, saya mengikuti beberapa sesi curah pendapat. Pada tahap ini, saya telah mencatat hampir semua ide yang muncul di benak saya. Saya membuat catatan ini di FigJam dan kemudian mentransfernya ke halaman Figma khusus yang dirancang khusus untuk ide-ide ini.

Seperti yang Anda lihat pada tangkapan layar di atas, ada bagian untuk brainstorming murni sementara ada juga bagian untuk bagian utama tertentu dari aplikasi.

Peta UX

Setelah saya menemukan berbagai ide, saya membuat Peta UX. Ada tiga warna bingkai yang masing-masing mewakili bagian berbeda dari aplikasi.

Papan inspirasi

Mengenai elemen UI aplikasi saya, saya membuat papan inspirasional besar yang terdiri dari sejumlah besar layar dan bidikan dari berbagai aplikasi. Meskipun mungkin agak kontra-intuitif, saya mendapatkan inspirasi dari aplikasi perjalanan, aplikasi media sosial, aplikasi memasak, aplikasi navigasi, dll. Saya memperhatikan semua elemen UI — warna, bidang input, menu, ikon, tombol, font, ilustrasi, kartu, dll. Intinya, semua aplikasi berbagi elemen UI yang sama dalam jumlah yang baik.

Saya menyimpan banyak bidikan dari Dribbble, Mobbin, Behance, dan platform serupa ke halaman "Papan Inspirasi" saya di Figma. Saya mengkategorikan semua bidikan berdasarkan tujuannya. Dengan cara itu, ada beberapa bagian berbeda yang berisi berbagai jenis bidikan.

Saya juga memastikan untuk meninggalkan catatan dalam bentuk komentar Figma pada bidikan untuk mengingatkan saya tentang hal yang tepat yang menarik perhatian saya. Saya tahu bahwa saya hanya perlu menyesuaikan ulang dan meniru karya dari berbagai desainer hebat lainnya untuk membuat aplikasi saya tampak hebat! Aplikasi tempat saya mendapatkan inspirasi sebagian besar digunakan di seluruh dunia dan dirancang oleh beberapa pakar terbaik di dunia!

wireframe Lo-Fi

Saya membuat tiga bagian wireframe. Yang pertama bersifat universal dan itu adalah proses onboarding. Dua bagian lainnya adalah gambar rangka dari tampilan aplikasi yang berbeda , satu untuk host dan satu lagi untuk klien . Setelah aplikasi diunduh dan pengguna mendaftar, dia masih dapat dengan mudah beralih di antara keduanya. Pada screenshot di bawah ini, terlihat bahwa hampir setiap layar diperkenalkan di wireframe ini.

Setelah saya menyelesaikan wireframes, saya memiliki gagasan yang jauh lebih jelas tentang bagaimana saya akan melanjutkan proyek ini. Selain itu, agar tidak melupakan pemikiran saya saat melakukan wireframing, saya meninggalkan komentar Figma di area tertentu di layar untuk mengingatkan saya tentang rencana saya untuk elemen desain tertentu.

Sistem desain

Jenis huruf yang saya gunakan dalam kombinasi dengan warna tema terbukti sebagai solusi terbaik. Nada warna hijau ini memunculkan kepercayaan, optimisme, dan kepositifan secara keseluruhan di benak pengguna. Di sisi lain, DM Sans sebagai tipografi menyampaikan rasa modernitas, profesionalisme, dan kejelasan. Garis-garis yang bersih dan sudut yang membulat memberi kesan ramah dan mudah didekati pada aplikasi, sedangkan tepi yang tajam menunjukkan rasa presisi.

Untuk meningkatkan produktivitas dalam proses desain, saya membuat gaya teks dan warna. Dengan begitu, lebih mudah dan lebih cepat untuk menentukan warna elemen UI tertentu dan untuk menentukan font yang akan saya gunakan di tempat tertentu. Membuat style juga sangat membantu saya nantinya dalam melakukan modifikasi desain.

Mengenai ikon, untuk mempertahankan desain yang konsisten di seluruh aplikasi, saya menggunakan satu paket ikon dan satu jenis ikon. Nama paket ikonnya adalah "Heroicons" dan berisi hampir semua ikon yang saya butuhkan dalam format SVG (vektor). Ikon yang tidak saya temukan, saya gambar dengan alat pena di Figma. Saya memastikan mereka konsisten dalam ukuran dan goresan dengan ikon dari paket ikon yang disebutkan sebelumnya.

Sumber paket ikon:
https://heroicons.com/

Mengenai ilustrasi yang saya gunakan, mereka juga diambil dari sumber ilustrasi yang sama. Sekali lagi, konsistensi dalam UI sangat penting!

Sumber ilustrasi:
https://storyset.com/time

Desain akhir

Seperti disebutkan dalam bab "Lo-Fi wireframes", "Stash&Store" terdiri dari dua tampilan aplikasi . Yang pertama difokuskan pada klien dan klien adalah tipe pengguna yang mencari penyimpanan untuk disewa melalui aplikasi. Tampilan aplikasi ini seharusnya membantu klien menemukan penawaran penyimpanan dengan mudah. Tampilan aplikasi kedua ditujukan untuk tuan rumah yang ingin menyewakan tempat mereka. Dalam hal ini, "Stash&Store" melayani pengguna dengan cara khusus yang mempermudah pengelolaan penawaran mereka.

Proses orientasi itu sendiri relatif sama untuk setiap aplikasi. Dalam hal ini, pengguna tentu saja diberikan dua opsi utama — untuk mendaftar atau masuk. Saat membuat akun, pengguna diminta untuk menentukan tujuan penggunaan "Stash&Store". Ini disertakan karena pengguna mungkin hanya tertarik pada satu tampilan aplikasi. Menurut pilihannya, dia melanjutkan proses pendaftaran.
Mereka yang melanjutkan sebagai tuan rumah diminta untuk segera mencantumkan penawaran mereka atau melewati bagian itu dan kembali lagi nanti. Tuan rumah juga harus mengambil foto kartu tanda pengenal yang dikeluarkan pemerintah untuk memverifikasi identitas mereka.
Namun, satu-satunya proses verifikasi wajib untuk semua pengguna adalah verifikasi email.

Setelah menyelesaikan proses pendaftaran klien, pengguna diarahkan ke layar Jelajahi, yang juga berfungsi sebagai tab Beranda. Dari sini, mereka dapat mencari tempat penyimpanan dengan memasukkan lokasi yang diinginkan dan mereka dapat memfilter hasil pencarian mereka. Peta menampilkan pin lokasi penyimpanan yang tersedia. Setelah salah satunya diklik, di bagian bawah layar muncul kartu yang memberikan informasi umum tentang penyimpanan tersebut.
Fitur penting lainnya pada tab ini adalah fitur “Letakkan titik”. Dengan mengklik tombol di pojok kanan bawah, pin pelacak kecil muncul di tengah layar. Itu tetap di tengah saat pengguna menggulir peta. Saat pengguna meletakkan pin di lokasi yang diinginkan dan menekan tombol kanan bawah lagi, semua tempat penyimpanan di dekat pin yang ditempatkan akan muncul di layar.

Setelah menemukan penyimpanan yang sesuai, klien dapat mengirimkan permintaan ketersediaan online. Seperti yang terlihat pada layar kedua di atas, klien memilih tanggal mulai yang diinginkan dan mereka juga dapat menulis catatan ke tuan rumah. Penting untuk disebutkan bahwa masih bergantung pada tuan rumah untuk sepenuhnya menyetujui permintaan klien.
Satu hal yang saya perkenalkan ke dalam aplikasi yang membantu klien memutuskan penyimpanan adalah chip pencapaian . Chip ini muncul di layar penyimpanan dan mewakili beberapa bentuk jaminan kepada klien bahwa penyimpanan yang mereka temukan aman dan andal. Tuan rumah adalah mereka yang mendapatkan chip ini melalui verifikasi akun dan sejumlah kesepakatan yang dibuat.

Setelah klien memesan ruang sewa, dia dapat menemukan kesepakatan di tab kedua — persewaan saya. Di tab ini, mereka memiliki ikhtisar dari semua penawaran yang mereka buat. Mengklik salah satu kartu akan membuka layar di mana orang tersebut dapat melihat kesepakatan mereka, tetapi yang lebih penting, di mana mereka dapat mengedit dan/atau membatalkan reservasi mereka. Dalam kedua kasus tersebut, mereka diminta untuk mengkonfirmasi tindakannya agar tidak melakukan tindakan yang tidak disengaja.

"Pesan" adalah tab ketiga di aplikasi ini. Itu juga hadir dalam tampilan aplikasi host karena kurang lebih universal. Pengguna dapat mencari melalui obrolan, menghapus percakapan, atau mengarsipkannya. Selain itu, dalam hal tampilan aplikasi klien, pengguna dapat mengirimkan pertanyaan umum yang dibuat sebelumnya (seperti yang ditunjukkan pada gambar ketiga di atas).

Layar profil untuk kedua tampilan aplikasi relatif sama. Di bagian atas kedua layar terdapat tombol yang mengubah tampilan aplikasi. Saya bermaksud agar tombol ini mudah diakses. Selain itu, jika tuan rumah belum sepenuhnya memverifikasi akunnya, dia akan diingatkan dan didorong untuk menyelesaikan verifikasi. Itulah tujuan dari tombol hidup berwarna hijau di bagian atas layar kedua.

Dalam tampilan aplikasi tuan rumah, salah satu hal terpenting adalah manajemen pemesanan. Untuk memastikan pengalaman yang mulus bagi tuan rumah, saya memprioritaskan merancang sistem manajemen permintaan intuitif yang memungkinkan mereka melihat dan mengelola permintaan dengan mudah.

Menambahkan dan mengedit penawaran juga penting bagi tuan rumah. Seharusnya mudah untuk menambahkan spasi, mengedit daftar, dan melihat ulasan.

Mengenai tab "pesan" di tampilan host, itu sama untuk kedua tampilan aplikasi. Namun, obrolan dibagi/dipisahkan antara dua tampilan aplikasi yang berbeda.

Kesimpulan

Singkatnya, aplikasi Stash&Store dirancang untuk memecahkan masalah opsi penyimpanan yang aman dan terjangkau bagi orang yang membutuhkan ruang ekstra untuk barang-barang mereka. Melalui aplikasi, penyewa dapat dengan mudah menemukan dan memesan ruang penyimpanan, sementara tuan rumah dapat memonetisasi ruang yang tidak terpakai.

Jika Anda menyukai studi kasus saya, pastikan untuk menepuk artikel ini 50 kali.
Kiat pro: Coba tahan tombol tepuk :)

Kontak

Jangan ragu untuk menghubungi saya :)
[email protected]
https://www.linkedin.com/in/danis-okic-745a4919a/
https://www.instagram.com/danees6/