====== TLab Design Guidence ======

**TLab Design Guidence** merupakan wadah untuk berkomunikasi antar divisi dan sobat TLab dengan tujuan saling memahami istilah yang sering digunakan oleh divisi desain.



===== TLab Design Guidence in a nutshell =====

==== Development Section ====

  * Mockup
  * Project Highlight
  * Design Requirement
  * TLab Design Life Cycle

  * User Journey
  * User Stories
  * User Context
  * Wire Flow
  * Persona

  * Moodboard
  * Wireframe
  * Lo-fi
  * Hi-fi
  * Template
  * Handoff
  * Usability Testing
  * A/B testing

==== Company Section ====

  * Merchandise
  * Stasionery
  * GSM
  * Brand Identity


---------------------------------------------------------------------


===== Mockup =====
  * **Mockup** dibuat untuk mengajukan penawaran project.
  * Output mockup berupa slide presentasi dengan konten fitur-fitur unggulan.
  * Setiap Desain mockup disimpan dalam folder project melalui google drive.
  * Desain yang dibuat merupakan gambaran umum yang tidak detail dalam bentuk hi-fi yang di-trademark.

Contoh mockup

---------------------------
===== Project Highlight =====
  * **Project Highlight** adalah portofolio dari projects yang pernah dikerjakan
  * Output dari project Highlight adalah slide peresentasi dari fitur-fitur yang dikerjakan dalam proyek ini
  * Kontennya Real yang sudah diimplementasikan.

link Lebih lanjut terkait project highlight

-------------

===== Design Requirement =====
  * **Design Requirement** adalah form untuk mendapatkan referensi kebutuhan klien berdasakan
     * Brand identity
     * Kebutuhan warna
     * Moodboard
  * Setiap Design Requirement disimpan dalam folder project melalui google drive.

[[https://docs.google.com/spreadsheets/d/1KeSjxsbNdnOfpFGB6Gi5uispVC_Ljky3J00TfFu3328/edit?usp=sharing | Template Design Requirement]]


----
===== TLab Design Life Cycle =====
  * **TLab Design Life Cycle** adalah konsep/metodologi antar stakeholder agar selaras dalam proses pengembangan proyek.
  * TLab Design Life Cycle terdiri dari berbagai pase, diantaranya:
    * Dokumen kolaboratif
    * Brainstorming Idea
    * Prototyping
    * Learn & Measuring

[[tech:designlifecycle| Detail TLab Design Life Cycle]]

-------

===== User Journey =====
  * **User Journey** adalah proses untuk mencari dan menentukan apa saja kemungkinan yang akan terjadi saat pengguna menggunakan produk untuk mencapai tujuan-tujuannya.

[[tech:designlifecycle:brainstroming|Brainstorming Idea - User Journey]]


----
===== User Stories =====
  * **User Stories** adalah proses untuk mendefinisikan apa saja tujuan pengguna saat menggunakan produk.
  * Setiap Story memiliki 3 komponen penting, diantaranya:
    * Persona
    * Motivasi
    * Ekspektasi

[[tech:designlifecycle:brainstroming|Brainstorming Idea - User Stories]]


----
===== User Context =====
  * **User Context** adalah proses untuk menemukan beberapa kemungkinan kondisi pengguna saat ingin menggapai tujuan.


[[tech:designlifecycle:brainstroming|Brainstorming Idea - User Context]]


----
===== Wire Flow =====
  * **Wire Flow** adalah proses untuk menemukan beberapa beberapa alternatif alur untuk mencapai tujuan
  * Bentuknya seperti flow diagram

[[tech:designlifecycle:brainstroming|Brainstorming Idea - Wire Flow]]


----
===== Persona =====
  * **Persona** adalah proses untuk mencari dan menentukan karakteristik siapa saja pengguna yang akan menggunakan produk
  * Personalitas yang menggambarkan/mewakilkan kelompok pengguna yang dituju (target market).



[[tech:designlifecycle:brainstroming|Brainstorming Idea - Persona]]


----
===== Wireframe =====
  * **Wireframe** adalah penggabungan wireflow dalam figma disimpan dengan nama page wireframe
  * Tahapan di wire flow diganti dengan Lo-Fi design.

[[https://www.figma.com/file/grpz4K8lX3EZjNxrc5Hspm/Cari-Hadis?node-id=6%3A4 | Contoh Wireframe]]

-----
===== Lo-Fi =====
  * Lo-Fi, Low Fidelity adalah proses menggabungkan semua user journey ke dalam 1 aktifitas.
  * Pengerjaan Lo-Fi berdasarkan Paper Prototyping.
  * Lo-fi dibuat dengan wifeframe, dalam figma disimpan dengan nama page wireframe

[[tech:designlifecycle:prototyping|Prototyping - Lo-Fi]]

-----
===== Hi-Fi =====
  * Hi-Fi, High Fidelity adalah proses implementasi desain berdasarkan Product Brand Principle
  * Hi-Fi dalam figma disimpan dengan nama page **designing v.1**

[[tech:designlifecycle:prototyping|Prototyping - Hi-Fi]]

-----
===== Template =====
  * **Template** adalah proses implementasi dari Hi-Fi (web design) ke dalam code
  * Implementasi Code bisa dalam berbagai jenis tergantung proyeknya, diantaranya:
    * VueJS/NuxtJS
    * HTML
    * Laravel blade

-----
===== Handoff =====
  * Handoff adalah proses dimana ketika proses hi-fi sudah disepakati bersama
  * Handoff dalam figma disimpan dengan nama page **Handoff v.1**
  * Developer mengimplementasikan design di page handoff

-----
===== Usability Testing =====
  * Usability Testing adalah proses untuk mengukur kebergunaan & kenyamaan dari sebuah produk yang dibuat
  * Usability Testing yang dilakukan biasanya mengukur keberhasilan pengguna mencapai tujuannya

-----
===== A/B Testing =====
  * A/B Testing adalah proses untuk mengukur kebergunaan & kenyamaan dari 2 desain yang berbeda.
  * A/B Testing prosesnya seperti Usability Testing
  * A/B Testing bisa saja membandingkan 2 flow yang berbeda dengan tujuan yang sama.

-----
===== Merchandise =====
  * Merchandise atau Merchandising adalah perlengkapan untuk kebutuhan branding TLab
  * Pemberian Merchandise biasanya untuk
    * Peserta event TLab
    * Peserta magang
    * Kegitana kolaborasi TLab dengan pihak lain

-----

===== Stasionery =====
  * Stasionery adalah perlengkapan yang berhubungan dengan dokumen
  * Stasionery biasanya terdiri dari
    * Template google docs
    * Amplop
    * Map
    * id card

-----


===== Brand Identity =====
  * Brand Identity adalah aturan penggunaan Logo TLab
  * Beberapa aturannya berkaitan dengan
    * Penggunaan Logo berdasarkan jenisnya
    * Pengunaan Logo berdasarkan latar dan posisinya
    * Penggunaan warna identitas TLab
    * Do & Don't