UI/UX Case Study: Designing a Coffee App “Kopiku”

Yanuar Cahya T
dibimbing-portfolios
4 min readMay 6, 2021

Introduction

Case study ini adalah final project yang saya kerjakan di bootcamp dibimbing.id, dan saya mendapati brief untuk mengerjakan case study mengenai coffee app yang memiliki fitur pesan kopi menggunakan delivery service/pickup sendiri, melihat resep kopi, dan reserve meja coffee shop.

Overview

Kopiku merupakan aplikasi penghubung antara pembeli kopi dengan berbagai macam brand Coffee Shop di Indonesia yang memiliki fitur delivery service, pickup, dan reserve table.

Role

UI/UX Student

Timeline

2 Minggu

Tools

Figma, Google docs, Medium

Problem Statement

Pembeli kopi memiliki kesulitan dengan adanya penamaan pada kopi yang kurang familiar didengar oleh pembeli kopi, kurangnya diskon yang tersedia, kejenuhan ketika mengantri dengan lama, susah untuk menghubungi coffee shop untuk mereserve table, Dan adanya kesulitan saat proses pembelian kopi secara online seperti tombol remove item yang sulit ditemukan, dan pilihan menu yang terlalu banyak.

Users & Audience

Target user case study ini adalah pegawai kantor yang berusia 20–35 tahun yang memiliki habit minum kopi.

Design Process

saya menggunakan Standford’s Design Thinking untuk case study ini.

Standford’s Design Thinking by Interaction-design.org

1. Emphatize

Tahap pertama yang saya lakukan untuk mengetahui masalah dari user adalah melakukan metode in-depth interview. Saya menggunakan 5 partisipan yang memiliki habit beli kopi secara online maupun offline. Saya merangkum hasil interview dalam user persona berikut.

User Persona

User Persona

2. Define

Tahap kedua yang saya lakukan ada merangkum lagi hasil interview terhadap 5 responden yang telah diinterview dalam bentuk affinity map dan costumer journey map berikut.

Afiinity Map

Affinity Map

Costumer Journey Map

Costumer Journey Map

Setelah mendapati problem, kebutuhan, dan goals dari user dengan melakukan affinity mapping dan costumer journey map, saya mendapati opportunity yang dapat direalisasikan agar pain point dari user dapat diatasi.

Competitor Analysis

Lalu saya melakukan competitor analysis untuk mendapatkan insight serta untuk memahami user flow dari order kopi lewat delivery service, pickup, dan reserve table.

Competitor Analysis

3. Ideate

Pada tahap ketiga ini saya melakukan pembuatan user flow, information architecture, wireframe, UI style guide, serta mockup.

User Flow

User flow menggambarkan alur yang ditempuh customer dalam memesan kopi dengan cara delivery service dan pickup.

User Flow (Delivery Service & Pickup)

Information Architecture (IA)

Information Architecture untuk mendokumentasikan konten yang ada pada setiap alur.

Information Architecture (Delivery Service)
Information Architecture (Pickup)

Wireframe

Wireframe adalah rancangan kasar dari desain yang akan dibuat.

Wireframe (Delivery Service)
Wireframe (Pickup)

UI Style Guide

Untuk menjaga konsistensi produk, saya membuat UI style guide serta component-componentnya.

UI Style Guide

Components

Components

High Fidelity Design

Lalu saya mengimplementasikan wireframe, UI style guide, UI components menjadi high fidelity design.

Halaman Splash Screen & Beranda

Fitur Customize Item

Halaman Menu Coffee Shop, Pilih Item, dan Customize Item

Fitur Delivery service

Halaman Keranjang, Pilih Tipe Pemesanan, Pilih Kurir, Pilih Metode Pembayaran, dan Pesan
Halaman Status Pesanan & Tracking Posisi Kurir

Fitur Rating Kurir

Halaman Pesanan Diterima & Rating Kurir

Fitur Pickup

Halaman Keranjang, Pilih Tipe Pemesanan, Pilih Metode Pembayaran, Dan Pesan
Halaman Status Pesanan Pickup
Halaman Minta Kode Pickup & Pesanan Diterima

Limitation

Ada beberapa hal yang belum sempat diselesaikan karena kendala waktu yaitu di tahap prototype, testing, dan juga fitur reserve coffee table. Saya akan melanjutkan hal-hal yang terlewat tersebut dan meng-updatenya disini.

Lesson Learned

Dengan adanya case study ini, saya dapat lebih memahami materi yang saya dapatkan selama bootcamp dibimbing.id ini dengan praktek langsung.

--

--