User Tools

Site Tools


tech:designguidence

This is an old revision of the document!


TLab Design Guidance

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

TLab Design Guidance in a nutshell

Development State

  • 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
  • A/B testing
  • Usability Testing
  • Handoff

Company State

  • 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.

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

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.

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

Brainstorming Idea - User Stories


User Context

  • User Context adalah proses untuk menemukan beberapa kemungkinan kondisi pengguna saat ingin menggapai tujuan.

Brainstorming Idea - User Context


Wire Flow

  • Wire Flow adalah proses untuk menemukan beberapa beberapa alternatif alur untuk mencapai tujuan
  • Bentuknya seperti flow diagram

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).

Brainstorming Idea - Persona


Wireframe

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

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

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

Prototyping - Hi-Fi


Template

  • Template adalah proses implementasi dari Hi-Fi (web design) ke dalam code
  • Code bisa dalam bentuk:
    • VueJS/NuxtJS
    • HTML
    • Laravel

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

Tujuan + Deskripsi + contoh

GSM

Tujuan + Deskripsi + contoh

Brand Identity

Tujuan + Deskripsi + contoh

tech/designguidence.1620809544.txt.gz · Last modified: 2021/05/12 15:52 by agilbaka