Tugas Week 4-Proses Desain Step 2 Memahami Fungsi Bisnis &

Step 3 Memahami prinsip desain UI

KELOMPOK ATENA :

Muhammad Dzikri Pandu Nareswara - 1303210038

Fitri Awaliyah Muslim - 1303210067
Fauzan Zikril Ikhsani - 1303213011
Irfandy Baihaqi - 1303210095
Iddam Agfar - 1303213135

IT - 45 - 04
S1 TEKNOLOGI INFORMASI
FAKULTAS INFORMATIKA
UNIVERSITAS TELKOM
1. Proses bisnis keseluruhan ( boleh dalam bentuk point-poin, workflow ataupun
flowchart). Proses bisnis menggambarkan dengan jelas keseluruhan rangkaian
aktivitas yang dilakukan pengguna untuk mencapai goalsnya
Proses Bisnis setelah melakukan elisitasi Persona bagaimana user melakukan aktivitas.
Berikut adalah Proses bisnis dalam bentuk tampilan workflow.

Link Figjam :
https://www.figma.com/file/K2WPS8nz0B7Ux5vKKRJ7BE/Proses-Bisnis?node-id=0%3
A1&t=UhCwjfAge9zhkFWE-1
2. Requirement sistem dilengkapi dengan data input/output yang dibutuhkan dan
disampaikan dengan jelas

Requirement Input Output

Akun Baru User Daftar melalui email / Akun Baru ATENA

google + / facebook

Login User Login Email + Password / User dapat masuk ke atena

google / facebook

Akun tertaut dengan Sinkronisasi e-money User dapat menautkan

e-payment dengan akun di bagian akun e-payment
history/mutasi rekening

User dapat input Jumlah pemasukan dan Database pemasukan user

pemasukan keterangan terupdate dengan
penambahan saldo yang
dimiliki

User dapat input Jumlah pengeluaran dan Database pengeluaran user

pengeluaran keterangan terupdate dengan sisa saldo
yang dimiliki

User dapat laporan Data dari API e-payment Database pemasukan user
pemasukan e-payment pemasukan terupdate dengan
penambahan saldo yang
dimiliki

User dapat laporan Data dari API e-payment Database pengeluaran user
pengeluaran e-payment pengeluaran terupdate dengan sisa saldo
yang dimiliki

User upgrade kelas Akun gratis user , Akun gratis user

pemilihan package upgrade terupgrade ke akun
account, dan bukti premium
pembayaran

User dapat mengikuti kelas Akun gratis user User mendapat materi
reguler kelas gratis

User dapat mengikuti kelas Akun premium user User mendapatkan materi
premium kelas premium

User dapat tracking Input Output keuangan User mengetahui saldo,

keuangan user dari e-money maupun input output keuangannya
manual
3. Mental Model
Mental model adalah representasi kognitif atau gambaran mental yang dibentuk oleh
seseorang untuk memahami suatu konsep, situasi, atau objek. Mental model dapat
membantu seseorang dalam memprediksi dan memecahkan masalah, serta membentuk
cara pandang atau perspektif yang spesifik terhadap sesuatu. Singkatnya, mental model
adalah konsep mental yang membantu seseorang dalam memahami dunia di sekitarnya.

Link mental model :

https://www.canva.com/design/DAFeFr1cBOU/CwGv1nhrROZwJlUoSBsD8Q/edit?utm
_content=DAFeFr1cBOU&utm_campaign=designshare&utm_medium=link2&utm_sour
ce=sharebutton
4. Hierarchical Task analysis (HTA)
Hierarchical Task analysis (HTA) adalah metode analitis yang memecah tugas kompleks
menjadi bagian-bagian yang lebih kecil dan lebih detail dengan tujuan untuk memahami
cara melakukan tugas tersebut secara paling efektif. Dalam HTA, tugas di analisis
menjadi serangkaian tindakan atau subtugas yang lebih kecil dan lebih mudah dilakukan.
Metode ini biasa digunakan dalam desain antarmuka dan rekayasa sistem
manusia-komputer.
 5. Conceptual Model

Model konseptual adalah representasi visual dan deskriptif dari suatu konsep atau ide
yang digunakan untuk memperjelas pemahaman suatu sistem atau desain. Kemudian,
model konseptual dapat berupa diagram, grafik, atau teks yang menjelaskan berbagai
elemen aatau komponen dalam suatu sistem saling berhubungan dan berinteraksi dan
model konseptual pada umumnya diterapkan dalam berbagai bidang seperti Ilmu
Komputer, Ilmu Sosial, Bisnis, dan Teknologi Informasi. Yang terakhir, tujuan dari model
konseptual adalah untuk membantu memahami kerumitan atau kompleksitas suatu sistem
atau domain, serta memfasilitasi komunikasi dan kolaborasi antara para pengguna yang
terlibat dengan pengembang yang terlibat dalam pengembangan atau pengelolaan sistem
tersebut. Berikut adalah gambaran model konsep kelompok kami :

Link dokumen:
https://docs.google.com/document/d/1uxkaU9-_p8y92cDCdwrVXeqX_pSMamnD/edit?usp=sha
ring&ouid=101366849736855179584&rtpof=true&sd=true
 STEP 3 PRINSIP DESIGN UI
Style Guide
1. Warna:
Primary color: ungu #2A0944
Secondary color: Navy #00005c
Tertiary color: Kuning #FEC260
Warna teks: Navy#00005c atau putih #ffffff
Warna latar belakang: Putih (#ffffff) atau aungu #2A094
2. Typography:
Jenis huruf: Sans-serif (contoh: phenix, metropolis, minimo)
Ukuran huruf:
Judul: 24-36pt
Sub-judul: 18-24pt
Paragraf: 14-18pt
Label: 12-14pt
Jarak antar huruf (letter-spacing): 0.5-1pt
Jarak antar baris (line-height): 1.2-1.5
3. Iconography:
Menggunakan ikon yang konsisten dan mudah dikenali
Ukuran ikon: 24-36pt
Warna ikon: Putih (#ffffff) atau hitam (#000000)
Bentuk ikon: Sederhana dan mudah dikenali
4. Buttons:
Bentuk: Rounded
Ukuran: 36-48pt x 24-36pt
Warna teks: Putih (#ffffff) atau hitam (#000000)
Warna latar belakang: Biru tua (#007bff) atau hijau tua (#28a745)
5. Formulir:
Gaya: Flat atau minimalis
Ukuran: Sesuaikan dengan konten
Warna teks: Hitam (#000000)
Warna latar belakang: Putih (#ffffff) atau abu-abu muda (#f8f9fa)
Jarak antar elemen: 12-18pt
Padding element: 12-18pt
6. Grafik:
Menggunakan grafik yang mudah dipahami oleh pengguna
Warna grafik: Sesuaikan dengan tema aplikasi
7. Tampilan umum:
Menggunakan tampilan yang minimalis dan bersih
Menghindari tampilan yang terlalu ramai
Menggunakan tampilan yang intuitif dan mudah dipahami oleh pengguna
8. Konsistensi:
Menggunakan konsistensi dalam warna, tipografi, dan gaya desain
Menjaga konsistensi dalam ukuran elemen dan jarak antar elemen
Menjaga konsistensi dalam penggunaan ikon dan grafik
Keterangan

● Color Palette

Dari color palette yang di pilih di atas kami mengambil warna ungu, biru, dan kuning.
Karena dari setiap warna tersebut memiliki makna yang berbeda - beda dan cocok untuk
digunakan di desain pencatatan keuangan, berikut penjelasan dari setiap warna yang kami
pilih :

- Ungu : warna ungu di kaitkan dengan hal - hal yang baru, kecanggihan, sebagai
inovatif, mewah dan eksklusivitas. Apalagi yang digunakan untuk startup fintech
yang inovatif untuk memberikan pelayanan keuangan yang lebih baik. Selain itu
juga memiliki nilai yang tinggi.
- Biru : warna biru ini memiliki makna teknologi, kemajuan, kepercayaan dan
keamanan. Warna biru yang kami pakai lebih condong ke warna navy yang
dimana memberikan kesan menggunakan teknologi yang modern dan mampu
memberikan solusi dalam pencatatan keuangan. Selain itu juga memberikan kesan
dapat dipercaya untuk mengelola uang pengguna dengan aman dan terpercaya.
- Kuning : warna kuning memiliki makna optimis, ceria, mudah, dan aksesibilitas.
Warna kuning ini memberikan kesan solusi yang menyenangkan dan
menggembirakan dalam masalah keuangan. Selain itu juga memberikan layanan
keuangan yang ditawarkan agar mudah digunakan dan tersedia untuk semua
orang.
- Font

- Font yang digunakan akan ada 3 yang beracu pada model sans serif. Alasan
mengapa sering direkomendasikan untuk menggunakan jenis huruf sans-serif
adalah karena kemampuan mereka untuk mempertahankan keterbacaan pada
ukuran huruf yang kecil, yang umumnya digunakan dalam desain UI.
- Font yang kami gunakan adalah minimo, metropolis, dan phoenix yang memiliki
karakteristik masing masing untuk mendukung desain kami.
- Font logo akan menggunakan font minimo dikarenakan font lengkung yang
berarti memiliki fleksibilitas dan kesan tegas yang diberikan untuk
mengimplementasikan ketegasan prinsis dalam pengaturan keuangan. Dimana
aplikasi kami memiliki fleksibilitas tinggi guna mengikuti perkembangan zaman
dengan prinsip
 Lampiran
Minuite of meeting
Kamis, 23 Maret 2023
NO Topik Pembahasan / Rencana / Person in Target Selesai Status
Permasalahan Tindakan Charger

1 General Planning Meeting Muhammad Kamis, 23 Maret Selesai dengan

pembagian Dzikri Pandu 2023 hasil pembagian
PIC dan Nareswara PIC dan konsep
penjelasan pengembangan
tugas desain aplikasi
Jumat, 24 Maret 2023
NO Topik Pembahasan / Rencana / Person in Target Selesai Status
Permasalahan Tindakan Charger

1 Business Proccess Pengerjaan Muhammad Jumat, 24 Maret Selesai dengan

Business Dzikri Pandu 2023 hasil pembagian
Proccess & Nareswara PIC dan konsep
requirement pengembangan
desain aplikasi

2 Mental Model Pembuatan Fauzan Zikril Jumat, 24 Maret Selesai dengan

Mental model Ikhsani 2023 dibantu
beracu pada Muhammad
persona Dzikri Pandu
Nareswara pada
saat pengerjaan

3 HTA Pembuatan Iddam Agfar Jumat, 24 Maret Selesai dengan

HTA berbasis 2023 backup Fauzan
dengan Zikril Ikhsani
kebiasaaan dikarenakan
pengguna Iddam agfar
terdapat halangan
ketika akan
melanjutkan HTA

4 Conceptual Model Perancangan Irfandy Jumat, 24 Maret Selesai dengan

Concept awal Baihaqi 2023 baik dan sesuai
aplikasi guna kebutuhan
mempermuda
h pengguna

5 Design Guide Pembuatan Fitri Jumat, 24 Maret Selesai dengan

Initiate Awaliyah 2023 dibantu team
design guide Muslim untuk model
design