UI/UX Mini Project

6 min readOct 30, 2023

Health Care System (Healthify)

Disclaimer : project ini disusun untuk menyelesaikan project kelompok studi independent.

Overview

Dalam mini project kelompok, kami akan mengembangkan sistem kesehatan dengan fokus pada desain antarmuka pengguna (UI) untuk platform mobile dan desktop. Project scope yang di kembangkan terdiri dari Enduser, Dokter, dan Admin. Untuk Enduser fokus pada tampilan mobile untuk konsultasi, mencari obat, dan melihat informasi kesehatan. Dokter dan admin akan berfokus pada tampilan web untuk melakukan manage pada dashboard. Kemudian kami juga membuat landing page untuk menarik perhatian end user.

Proyek ini akan mencakup tahap pengembangan awal yang dikenal sebagai “lo-fi” (rendah resolusi) yang mencakup perancangan elemen-elemen dasar antarmuka dan konsep utama aplikasi kesehatan. Fokus kami adalah untuk membuat antarmuka yang mudah digunakan dan informatif, serta dapat diakses dengan baik di perangkat mobile maupun desktop.

Goals

Tujuan dari proyek ini adalah untuk mengembangkan aplikasi yang dapat digunakan untuk berkonsultasi dengan dokter, mencari obat dan membaca artikel terkait topik kesehatan.

Aplikasi ini akan digunakan oleh End User, dokter dan admin. Pengguna akhir dapat berbicara dengan dokter dan mencari obat-obatan sementara dokter dapat memberikan saran kepada pengguna akhir terkait kesehatan. Untuk pengguna admin dapat memanage data dokter, obat dan data pasien.

Methodology

Dalam pembuatan aplikasi ini, Team kami menerapkan pendekatan Design Thinking yang terdiri dari lima tahap: Empathize, Define, Ideate, Prototype, dan Test. Pendekatan ini memungkinkan kami untuk memahami masalah-masalah yang dihadapi oleh pengguna (Empathize), menentukan fokus masalah dan tujuan (Define), menghasilkan ide-ide solusi inovatif (Ideate), membuat prototipe, dan mengujinya (Prototype dan Test). Dengan pendekatan ini, kami dapat memastikan bahwa solusi yang kami hasilkan efektif dalam mengatasi masalah pengguna dan sesuai dengan kebutuhan mereka. kepada user dengan tujuan mendapatkan data dari solusi yang kita buat.

Emphatize

Tahapan ini menentukan target user, dan juga research user dengan mewawancarai narasumber, berikut karakteristik user yang sudah ditentukan:

Usia 17–50
Sudah pernah berkonsultasi dengan dokter
Paham menggunakan teknologi mobile
Memiliki smarthphone
Warga Negara Indonesia

Define

Dari proses emphatize menghasilkan 2 user profile yaitu berdasarkan user yang preffer untuk konsultasi online dan user yang preffer untuk konsultasi secara offline.

Ideate

Fokus masalah ini disusun dalam bentuk affinity diagram yang terdiri dari permasalahan user dan ide solusi fitur dari masing-masing permasalahan tersebut. kemudian didalam affinity diagram pun disesuaikan dengan key acktivity yang sudah ditentukan didalam project.

Untuk tahapan ini saya berkontribusi pada penempatan 2 permasalahan user dan 1 ide solusi fitur, kemudian menyusun metriks prioritas fitur yang akan di implementasikan.

Prototype

Tahapan ini dilakukan perancangan userflow/taskflow, wireframe, wireflow dan design system. pada projek ini dalam penyusunan taskflow/userflow menyesuaikan scope user yang sudah ditentukan yaitu end user, dokter, dan admin.

Userflow/Taskflow
Userflow/taskflow (END USER) sesuai dengan key aktivity

Userflow/taskflow (Dokter) sesuai dengan key aktivity

untuk chat with pasien dan view pasien complain itu termasuk kedalam flow Give recomendation. ketiga flow tersebut akan di tampilhan pada sidebar chat didalam web dokter.

Userflow/taskflow (Admin) sesuai dengan key aktivity

Pada userflow/taskflow ini tidak hanya key aktivity yang dibuat namun pada bagian login end user, registrasi, dan halaman profile pun dibuat taskflow fitur. Dokumentasi yang dilampirkan pada halaman ini hanya sebatas affinity diagram yang berhubungan dengan keyaktifity.

Wireflow
End User (Mobile)

Rules yang dibuat untuk end user sesuai dengan key aktivity yang dibuat di dalam taskflow, berikut dokumentasi wireflow end user :

Masing-masing anggota dalam pembuatan wireframe dan wireflow memiliki jobdesk masing-masing,minimal 1 anggota mendapatkan 1 wireflow. untuk key activity saya berkontribusi pada pembuatan wireframe dan wireflow find medicine. Wireframe yang saya buat berdasarkan refrensi design yang saya research.

Wireflow
Dokter (Dekstop)

flow manage pasien, chat, dan manage artikel

Pada flow ini saya berkontribusi pada bagian manage pasien.

Wireflow
Admin (Dekstop)

Pada flow ini saya berkontribusi menyusun manage pasien, mulai dari cread, view, edit, dan delete.

Design System
Design system adalah kerangka kerja yang mengatur elemen desain, prinsip, dan pedoman desain yang digunakan secara konsisten dalam pengembangan produk mobile atau situs web. Pada file Design System memiliki 3 halaman yang terdiri dari globe (pedoman design), component mobile, dan component web/dekstop.