uI/Ux case study -SEACARA (EVENT MANAGEMENT apps)
Apps Name
Seacara
Year
2021
Hai, readers. Ini adalah eksploarasi desain aku dan temen temen yang mana desain ini dibuat untuk lomba Web Design di Crayonistic yang diselenggarakan oleh HIMTI UNESA. Desain ini dibuat selama kurang lebih 3 minggu mulai dari 0 hingga testing. Alhamdulillah, tim kami menang dalam perlombaan tersebut dan mendapatkan juara 1.
Disclaimer : Ini adalah hasil eksplorasi tim kami terkait dengan lomba Web Design di HIMTI UNESA.
Overview
Seacara adalah website yang menghimpun berbagai informasi event, pembelian tiket event, absensi dan juga download sertifikat setelah mengikuti event. Secara hadir untuk memeberikan solusi bagi para masyarakat yang ingin lebih produktif di era pandemi COVID-19.
Landing Page Seacara
Problem Statement
Pandemi COVID-19 hadir membawa banyak perubahan di berbagai lini kehidupan. Masyarakat harus terpaksa segala sesuatunya dikerjakan dari rumah. Tak jarang masyarakat merasa kekurangan aktivitas dan ingin lebih produktif walaupun hanya di rumah saja. Sedangkan para penyelenggara event merasa bingung dalam mencari partisipan event mereka, dikarenakan publikasi tidak bisa langsung bertemu dengan orang.
Roles and Responsibilities
Dalam menyelesaikan challenge ini, aku dan tim melakukan semua tahapan design thinking secara bersama-sama. Dengan saling bertukar pendapat saat mendesain ataupun saat riset.
Challenges
Pada penyelesaian desain ini, hal yang menurut saya menantang adalah bagaimana rules UI dalam mendesain sebuah Website. Dikarenakan saya secara pribadi masih kurang pengalaman dalam mendesain Website.
Processes
To make an application that is useful for users, kami pakai metode design thinking dalam menyelesaikan permasalahan diatas.
​
Design thinking is creative and collaborative problem solving to produce more empathetic and innovative solutions. - By David Kelley and Tim Brown, IDEO founder
Design Thinking
. . .
Step 1. Empathize
Sebelum itu, tim kami memiliki hipotesis terkait dengan paint points dan juga what user needs. Untuk itu, kami melakukan wawancara kepada user untuk memvalidasi hipotesis kami dan juga menggali lagi pain point, needs dan behavior pengguna.
Research Plan
Pada step empathize, aku melakukan observasi dengan melakukan user in-depth-interview untuk membantu mencari pain point, behavior dan kebutuhan pengguna.
Research Plan
User In-depth-interview guide
Stimulus riset
User Interview
Interview user dilakukan untuk mencari tahu lebih lanjut mengenai behavior, pain points, dan kebutuhan user. Interview dilakukan kepada user dengan kriteria seperti pada sample specification. Kami melakukan interview ke 3 responden. Agar hasil yang didapat beragam namun tidak menjadi data bias apabila terlalu banyak.
. . .
Step 2. Define
Setelah mendapatkan insights dari user, data tersebut dianalisis dan dibuat user persona untuk membantu kami dalam mendefine tipe user seperti apa yang akan memakai website ini dan juga solusi yang dibuat ingin seperti apa.
User Persona
Berikut adalah user persona dari website "Seacara". Untuk mengembangkan website ini, kami memakai user persona ini untuk membantu mendefine target user website "Seacara".
User Persona
. . .
Step 3. Ideate
Pada step ini, setelah mendapatkan permasalahan user seperti apa mulai memikirkan atau meng-idetaion solusi dari permasalahan yang ada. User problems adalah sebagai berikut:
1. Kesulitan mencari informasi acara yang sesuai dengan topik dan bidang yang diminati
2. Tidak adanya pengingat kegiatan yang membuat pengguna seringkali tertinggal informasi acara
3. Pembayaran yang sulit karena harus menggunakan metode tertentu Terlalu banyak aplikasi membuat pengguna menjadi kesulitan untuk mencari informasi terkait event
​
Dari problem yang ada, kami mendapatkan beberapa solusi yaitu dengan
1. Memudahkan dalam pencarian acara/event baik berdasarkan tanggal, topik, bidang maupun jenis acara
2. Memudahkan dalam integrasi pendaftaran, pelaksanaan dan pengunduhan sertifikat acara
3. Memudahkan dalam pembayaran
User Flow
User flow berguna untuk kami saat mendesain, apa saja page yang harus dibuat dan prototyping akan seperti apa.
User Flow
Information Architecture
Pembuatan IA ini bertujuan untuk kami apa saja page yang harus dibuat dan informasi apa saja yang ada didalamnya yang nantinya akan dipakai untuk mendesain.
Information Architecture
Style Guide
Berikut adalah typeface dan juga warna yang digunakan pada website ini.
Style Guide
. . .
Step 4. Prototype
Step selanjutnya adalah prototyping, Setelah mengetahui website seperti apa yang ingin dibuat, lalu membuat low fidelity design atau biasa disebut wireframe dan mempercantik desain tersebut menjadi high-fidelity design
Wireframe
Wireframe berguna untuk memberi gambaran kepada stakeholder seperti apa aplikasi yang akan dibuat. Agar tidak terlalu jauh apabila dirasa masih ada data atau bagian yang tidak didesain.
Wireframe
High Fidelity Design
Setelah itu, membuat desain high-fidelity dengan member warna, text styles, komponen dan ilustrasi. Setelah jadi, mulai membuat prototyping agar user dapat menjalankan seperti layaknya website jadi dan mereka mendapatkan gambaran website ini.
Please click the italic link below to try the prototypes.
. . .
Step 5. Test
Step terakhir, kami melakukan testing ke user untuk memvalidasi dan mendapatkan feedback dari user. Kami melakukan moderated usability testing via Zoom Meeting yang mana aku memandu dan memantau pergerakan, ekspresi, perkataan, dan user goals. Di testing ini, kami meminta user untuk melakukan task registrasi, daftar event, menghadiri event, absensi, dan juga download sertifikat.
Test Results
Here are the results of testing :
​
Semua user berhasil menyelesaikan task dengan baik, tetapi
1. Satu user tidak menyelesaikan task dengan cepat dan agak bingung
2. Satu user kesulitan dalam mendownload sertifikat
What should be improved?
Dari usability testing yang telah dilakukan, bisa didapat hasil yaitu:
1. Menambahkan tombol download sertifikat di halaman detail event (setelah user membeli tiket)
. . .
Closing
That’s all the explanation of our team case study project. Through all the data and the application of design thinking, I got a lot of insight and made several opportunity ideas.
​
Saya pribadi mendapatkan banyak pengalaman dalam proses mendesain project ini, hope will be useful for me in the future. Feel free to comments, I am very open to receiving feedback and suggestions. Thank you for your time and attention to read :)
​
Thanks to:
- My teammate (Yefi Chlarasasti and Balqist Naurah)