UI/UX Aplikasi Novel & Comic House
UI/UX ~ Faizal Apriansyah Pratama
Deksripsi Singkat
Saat ini membaca bukan hanya untuk mendapat ilmu saja, tetapi bisa juga sebagai sarana hiburan, salah satu nya membaca komik ataupun novel. Perkembangan industri komik dan novel sudah perkembang pesat. Banyak seniman yang menghasilkan karya berupa novel dan komik. Peminat dari komik dan novel sendiri bisa dari berbagai kalangan, baik anak-anak ataupun orang dewasa. Di zaman modern ini penyebaran komik tidak lagi dalam bentuk fisik (buku) tetapi bisa juga membaca secara online di smartphone. Maka dari itu kami merancang sebuah aplikasi mobile penjualan novel & comic yang diberi nama Novel & Comic House. Diharapkan aplikasi ini dapat membantu para seniman yang suka membuat buku untuk menjual karya nya kepada orang banyak, juga membantu masyarakat yang hobby membaca buku agar memudahkan akses untuk membaca novel & comic.
Deskripsi Lengkap
Aplikasi Novel & Comic House adalah platform penyedia buku komik & novel online. Dalam aplikasi ini user dapat membeli buku secara hardfile maupun softfile. Selain itu user juga dapat menjual karya nya di Aplikasi ini. Adapun tahapan yang telah dilaksanakan dalam merancang aplikasi Novel & Comic House diantaranya Business Model Canvas, Empathy Maps, Paint Poin, Persona, User Stories, User Journey, Problem Statement, Low Fidelity Wireframe, Design System, dan High Fidelity Wireframe.
1. Business Model Canvas (BMC)
Pada BMC ini terdapat 9 element yang perlu ditentukan, diantaranya Key Activities, berfungsi menjelaskan bagaimana bisnis tersebut berjalan, lalu Key Resources menjelaskan sumberdaya apa yang dibutuhkan oleh suatu bisnis, Key Partners menjelaskan siapa saja yang dapat bekerja sama dalam menjalankan bisnis, Customer Segment menjelaskan target pasar yang akan dituju, Value Proposition menjelaskan keunggulan apa yang tidak dimiliki bisnis lain, Channels menjelaskan media yang dapat digunakan untuk promosi, Customer Relationship menjelaskan bagaimana cara untuk menjaga hubungan baik dengan konsumen, Cost Struktur menjelaskan pengeluaran apa saja yang mungkin terjadi, Revenue Stream menjelaskan sumber dana yang didapatkan. Berikut adalah hasil dari penentuan Bisnis Model Canvas saya.
2. Empathy Map
Empathy map digunakan untuk mengetahui perasaan yang dirasakan oleh user, terdapat 4 point yaitu Does, Says, Think, dan Feels. Disini saya membuat empathy map Juliana Sari yang merupakan seorang mahasiswi, berikut lampiran Empathy Map nya
3. Persona
Persona atau karakter seseorang dapat diketahui dengan cara wawancara. Pada perancangan aplikasi ini saya membuat 2 persona yaitu dari sisi pembaca buku dan dari penulis buku, Berikut persona yang saya peroleh dari Juliana Sari seorang mahasiswi dan Thomas Efendi seorang penulis novel.
4. User Stories
User Stories merupakan ringkasan permasalahan yang dialami user, berikut user stories yang dimiliki oleh Juliana Sari dan Thomas Efendi.
5. User Journey
User Journey adalah gambaran proses yang dilakukan oleh user untuk menyelesaikan permasalahannya sebelum diberikan solusi oleh kita.
Berikut lampiran User Journey seorang user ketika membeli buku dan memasarkan karya novel/komik nya.
6. Problem Statement
Problem Statement hampir sama dengan User Stories, Problem Statement terdiri dari beberapa element yaitu Nama User (Warna Biru), Karateristik User (Warna Merah), Kebutuhan User (Warna Hijau), dan Insight (Warna Kuning)
7. Low Fidelity Wireframe
Merupakan gambaran awal yang akan digunakan untuk membangun aplikasi, berikut lampiran gambar LWF nya
8. Design System
Merupakan kumpulan komponen komponen yang akan membangun High Fidelity Wireframe, berikut beberapa Design System yang saya buat.
9. High Fidelity Wireframe
Merupakan jenis wireframe yang lebih detail, di HFW ini sudah diimplementasikan gambar yang sebenarnya, berikut lampiran HFW.
Prototype :
https://www.figma.com/file/XaZdnIWjKB3FfOuIYyxhGL/Project-Capstone-AI-Hipster-Novel-%26-Comic-House?node-id=0%3A1&t=ohZ3Xq9KxnNjJZNi-1
Tools :
- www.figma.com
- www.canva.com
PORTFOLIO TERKAIT

MindVerse - Capstone Project UI Design
Hamdan Fauzaan

MindVerse - UI/UX Design
Hamdan Fauzaan

UI UX Web Company Profile Kiosk Smart Campus
Helmi Sulaeman