UX Research & Design Case Study -Pregnant Track App

Adinda Trisna Hanifah
dibimbing-portfolios
7 min readMay 2, 2021

Halo balik lagi sama aku “Dinda”.
Jadi saat ini aku adalah seorang peserta bootcamp UI/UX Design yang diadakan sama Dibimbing.id, saat ini aku lagi di ada step final project.
Nah di step final project ini tiap peserta diwajibkan untuk mengerjakan Case Study.
Ada 2 Case Study untuk final project-nya, yang pertama UX Writing Case Study, dan kedua UX Research & Design Case Study.

Di tulisan kali ini aku akan bahas UX Research & Design Case Study dengan tema yang diberikan yaitu Aplikasi Track Kehamilan (Pregnant Track App).

Role: UI/UX Designer Student
Tools: Figma, Miro, Google Meet & Form
Timeline:
1 minggu

Untuk tahapan case study ini aku mulai dari:

  1. Introduction
    Di Introduction ini ada Background, Objective, dan Methodology.
  2. Main Findings
    Untuk di Main Findings, berisi pengelompokkan jawaban user, kemudian dari jawaban user tersebut dibuatlah User persona, dan Customer Journey Map (CJM).
  3. How Might We
    Step ideasi, untuk menemukan solusi dari permasalahan yang dirasakan oleh user (ibu hamil).
  4. Limitation
    Pada case study ini saya berikan limitasi mengingat waktu pengerjaan yang tidak banyak.
  5. Designing
    Untuk tahap Designing, dimulai dari pembuatan:
    a.1. User Flow,
    a.2. Information Architecture,
    b. Design System,
    c. Wireframe,
    d. Mockup,
    e. dan yang terakhir Prototype.
  6. Conclusion
    Saya menggunakan Conclusion dikarenakan tidak cukup waktu untuk melakukan testing kepada user.
  7. Apendix
    Berisi link sumber informasi yang diperlukan dalam pembuatan case study ini.

Ok, langsung aja mulai ke pembahasannya ya!

1. Introduction

a. Background

Alasan saya memilih tema ini karena ditentukan oleh pihak bootcamp, beranjak dari situ karena saya belum pernah hamil, dan tidak pernah pakai aplikasi track kehamilan juga, jadilah saya mencari responden yang dapat saya tanya pengalamannya dengan kriteria wanita yang sedang hamil atau wanita yang telah melahirkan dan tidak gaptek, dengan kriteria berikutnya adalah wanita tersebut belum lebih dari 5 tahun sejak melahirkan.

Akhirnya setelah mencari di lingkungan pertemanan, dapatlah saya 3 responden yang sesuai dengan kriteria.

b. Objective

Setelah mendapatkan responden, tujuan selanjutnya adalah mengetahui bagaimana proses hamil, kebiasaan apa saja yang dilakukan oleh ibu hamil, informasi apa saja yang biasanya dicari, kesulitan apa saja yang dialaminya, dan yang terakhir adalah fitur apa saja yang sekiranya dapat membantu ibu hamil selama kehamilannya sampai melahirkan.

c. Methodology

Untuk metodologi yang saya gunakan di case study ini adalah:

  1. Interview dengan 2 responden melalui Google Meet,
Interview Responden

2. Survei dengan menggunakan pertanyaan interview, dikarenakan 1 responden terkendala tidak dapat melakukan interview,

Screenshot Jawaban Survei

3. Dan Competitive Analysis.

Competitive Analysis Screenshot

2. Main Findings

Di tahap ini saya mengelompokkan jawaban user menggunakan miro, untuk memudahkan pembuatan User Persona dan Customer Journey Map (CJM). Seperti ini pengelompokkan yang sudah saya buat:

Pengelompokkan Jawaban Responden

a. User Persona

Dari pengelompokkan masalah sebelumnya, didapatkan persona dengan nama Amanda, dia adalah seorang karyawan yang sedang hamil 4 bulan dan ini adalah kehamilan pertamanya. Ada masalah yang ia temui selama hamil seperti pinggang ngilu, mood yang tidak stabil, tidak nafsu makan dan masalah lainnya. Dari situ ia mulai sering mencari informasi seputar kehamilan apakah yang ia rasakan normal terjadi atau tidak, dan ia juga rajin mencari makanan bergizi selama hamil agar janin yang dikandungnya sehat.

User Persona — Amanda

b. Customer Journey Map (CJM)

Setelah User Persona selesai, saya berlanjut membuat CJM untuk mengetahui apa saja yang user lakukan selama proses dari awal kehamilan sampai melahirkan, apa yang dipikirkan di tiap-tiap prosesnya, bagaimana perasaannya, melalui media apa saja user berinteraksi, dan yang terakhir adalah opportunity apa yang dapat dikembangkan dari pain point user.

Customer Journey Map

3. How Might We

Setelah membuat User Persona dan CJM, saya menemukan solusi atas pain point mereka, yaitu:

  1. Info perkembangan janin setiap minggunya,
  2. Resep makanan bernutrisi selama hamil,
  3. Yang terakhir adalah tips kehamilan, seperti perubahan apa saja yang terjadi pada tubuh ibu hamil, gejala kehamilan yang dirasakan setiap minggunya, dan bagaimana cara untuk mengatasi gejala kehamilan yang dirasakan oleh ibu hamil.

4. Limitation

Limitasi dari case study ini adalah:

  1. Case Study ini tidak saya test kepada user karena keterbatasan waktu,
  2. Desain aplikasi case study terbatas flow halaman home, detail janin dan resep masakan bergizi untuk ibu hamil.

5. Designing

a.1 User Flow

Untuk tahap awal pembuatan desain, saya mulai dari membuat Information Architecture (IA) bersamaan dengan User Flownya, awalnya masih berupa bayang-bayang saja berdasarkan dari sketsa kasar yang saya buat dengan pen & paper sebelum masuk ke tahap Designing.

Sketsa Kasar User Flow dan Poin Inti How Might We
User Flow SmartParents

a.2 Information Architecture (IA)

Untuk Information Architecture, tujuannya untuk mengetahui apa saja point yang harus dimasukkan pada tiap halaman, agar tidak keluar dari tujuan awal aplikasi yaitu point How Might We.

Information Architecture

b. Design System

Untuk pembuatan Design System pada case study ini terbilang cukup sederhana karena hanya berisi: Color Pallete, Typography, Frame Size, Spacing, dan Border Radius.

Untuk pemilihan warna tema saya gunakan warna pink rose, alasannya berdasarkan situs Goodminds.id

Auranya yang kuat memberi benak kita nuansa kelemah lembutan, peduli, dan romansa.

Seperti kelembutan seorang ibu dalam menjaga janinnya hingga lahir ke dunia dan begitu peduli mengurus serta mendidiknya hingga dewasa.

Design System

c. Wireframe

Setelah selesai membuat Information Architecture dan Design System, saya lanjut membuat Wireframe, alasan saya memilih membuat wireframe secara digital tujuannya agar mempermudah proses pembuatan mockup, sekaligus mempersingkat waktu pembuatan.

Di dalam desain saya menggunakan kata “Janin” dan bukan “Bayi” atau “Embrio” seperti yang terdapat di beberapa aplikasi track kehamilan, alasannya berdasarkan situs Wikipedia dikatakan bahwa,

Janin berkembang pada akhir minggu kedelapan kehamilan, sewaktu struktur utama dan sistem organ terbentuk, hingga kelahiran. Janin disebut juga Calon Bayi.

Mengingat User Persona yang saya buat ia sedang hamil 4 bulan, dan 4 bulan adalah sekitar 17–20 minggu, jadi saya menggunakan kata “Janin”.

Pada proses desain ini saya mengalami kendala yaitu artblock menyerang, sehingga untuk pembuatan desain saya kerjakan 2 kali, berikut hasil wireframe saat artblock dan hasil revisi-nya.

• Wireframe saat Artblock

Wireframe saat Artblock

• Wireframe Revisi

Dari 2 wireframe ini saya putuskan untuk menggunakan yang versi revisi, karena secara tampilan bisa bersaing dengan aplikasi kompetitor, dibanding dengan versi saat artblock.

Wireframe Revisi

d. Mockup

Sayangnya, pada saat artblock sebelumnya saya sudah sampai pada tahap mockup. Jadi saya membuat ulang desainnya sampai pada tahap ini kembali. Kurang lebih inilah hasil mockup yang saya buat, ditambah dengan versi revisinya.

• Mockup saat Artblock

Mockup saat Artblock

• Mockup Revisi

Untuk pembuatan versi revisi ini saya kerjakan 1 hari, dengan melihat beberapa desain dengan tema yang sama yang ada di Dribbble.com dan dikombinasikan dengan experience aplikasi track kehamilan yang sudah rilis di PlayStore, sehingga desain yang saya hasilkan saya usahakan experiencenya tidak terlalu jauh berbeda ketika user menggunakan aplikasi yang terdapat di playstore, usable tetapi disisi lain memiliki sisi aesthetic juga.

Mockup Revisi

e. Prototype

Silahkan coba prototypenya di link berikut,

“Link Prototype”

Untuk transisi yang saya gunakan pada prototype ini sederhana, hanya sebatas smart animate, push, dan slide in saja seperti aplikasi pada umumnya.

Flow prototypenya sendiri kurang lebih seperti ini,

Wireflow SmartParents

6. Conclusion

Dari Case Study ini, dapat saya simpulkan bahwa ibu hamil khususnya yang baru pertama kali hamil sangat membutuhkan banyak informasi seputar kehamilannya, seperti mood yang ia rasakan, keluhan-keluhan seperti sakit pinggang dll, lalu makanan dan kegiatan/olahraga apa saja yang boleh dan harus dihindari selama hamil.

Saya harap Case Study ini sudah menjawab pain point yang dirasakan oleh User Persona.

Terima Kasih telah membaca Case Study-ku.

Masih banyak kekurangan dari case study ini, karena terdapat limitasi, dan ketemu kendala artblock ditengah-tengah pengerjaannya.

Dari segi desain juga masih banyak banget yg perlu di improve. Jadi aku seneng banget kalo ada yang mau nambahin pendapat masih ada kekurangan dimana aja aku supaya kedepannya lebih baik lagi :)

Untuk kenal lebih jauh, lihat Aktifitas & Portofolio-ku disini ya:

LinkedIn

Behance

--

--