UI Workflow & Process Guideline

Department

	Section
1	Purpose
2	Scope
3	Definitions
4	Operating Model
5	Roles & Responsibilities
6	Step-by-Step Process
7	Asana Card Templates
8	UI Workflow Checklist (Creative Use)

Purpose

This guideline defines how Kiluth’s Creative department executes UI work: design system setup, visual design, design refinement, and handoff to development.

Outcome
UI work is executed consistently, handoffs are clear, and sign-off proofs are easy to find. Development can start with complete UI design artifacts.

Scope

This guideline covers the UI workflow from UX handoff through handoff to development:

	Included
1	Design system setup (design audit, design system foundation, component library)
2	Visual design (style exploration, style selection, high-fidelity design, responsive design)
3	Design refinement (internal review, stakeholder review, design iteration, design sign-off)
4	Design handoff (design organization, design specs, design handoff to DEV, design QA)

This guideline does not cover:

	Not included
1	UX research and wireframing (see UX Workflow & Process Guideline)
2	Development execution (see Technology guidelines)
3	Project planning and task assignment (see Delivery Production & Resource Allocation Guideline)

Definitions

Term	Definition
Checkpoint	A required completion point before proceeding to the next step
Decision point	A branching choice (e.g., iterate vs. proceed) with an explicit recorded outcome
Sign-off proof	Evidence that a step is approved (email confirmation or signed document; signed document required for contract-related decisions)
Design system	A collection of reusable components, patterns, and guidelines used to maintain visual consistency (per project, not shared)
Style exploration	Initial visual direction exploration (mood boards or key screen designs)
High-fidelity design	Complete visual design with colors, typography, spacing, and visual details
Design specs	Detailed annotations for spacing, colors, typography, and interactions needed for development
UI handoff artifacts	Complete set of deliverables needed for development to start (design files, specs, assets, style guide)

Operating Model

	Operating Model
1	Asana is the system of record for work tracking, approvals, and handoffs.
2	Use checkpoints and decision points: don’t move forward until the previous step is “done”, and branches are explicit.
3	Handoff order: upstream defines handoff artifacts/exit criteria; downstream defines execution after handoff.

Outcome
At any point, we can answer: what’s the current state, who owns it, and what’s needed to move forward.

Roles & Responsibilities

Role	Responsibility
UI Designer	Executes UI work: design system setup, visual design, refinement, and handoff to development
Project Manager (PM)	Creates UI tasks during post-activation estimation (with dependency on UX wireframe approval), tracks progress, coordinates stakeholder reviews
Account Executive (AE)	Coordinates client sign-offs, maintains sign-off proof links
UX Designer	Provides UX handoff artifacts (wireframes, user flows, interaction specs)
Development (DEV)	Receives UI handoff artifacts and executes implementation
Stakeholders	Reviews and approves UI deliverables at defined checkpoints

Step-by-Step Process

Phase 1: Design System Setup

	Step
1	Design audit (Checkpoint): Review existing brand guidelines, colors, typography, and components. Document findings.
2	Design system foundation (Checkpoint): Define or update color palette, typography scale, spacing system, and icon library. Create design system document (per project, not shared). Link in Asana.
3	Component library (Checkpoint): Create reusable components (buttons, inputs, cards, etc.) with variants and states. Link component library in Asana.

Outcome
Design system is established, components are defined, and visual foundation is ready for high-fidelity design.

Phase 2: Visual Design

	Step
4	Style exploration (Checkpoint): Create 2–3 style directions (mood boards or key screens). Present to stakeholders. Link explorations in Asana.
5	Style selection (Checkpoint): Select direction based on stakeholder feedback. Proceed when stakeholder sign-off proof is linked (Sign-off proof: [Link]).
6	High-fidelity design (Checkpoint): Design all screens from approved wireframes. Use design system consistently. Link designs in Asana.
7	Responsive design (Checkpoint): Adapt designs for mobile, tablet, and desktop breakpoints. Link responsive designs in Asana.

Outcome
Visual design direction is approved, all screens are designed, and responsive breakpoints are covered.

	Step
8	Internal review (Checkpoint): Review with Creative team. Check consistency, accessibility, and alignment with brand. Document feedback.
9	Stakeholder review (Checkpoint): Present designs to stakeholders. Collect feedback and iterate. Link review notes in Asana.
10	Design iteration (Decision point): Update designs based on feedback. Record decision: major changes? → iterate and re-review / minor changes → proceed to sign-off.
11	Design sign-off (Checkpoint): Final approval from stakeholders. Proceed when sign-off proof is linked (Sign-off proof: [Link]).

Decision point: Stakeholder feedback

Outcome	Action
Major changes requested	Iterate designs. Re-run internal review and stakeholder review.
Minor changes requested	Make minor updates. Proceed to design sign-off.
Approved	Proceed to design sign-off.

Outcome
Designs are refined, approved, and ready for handoff to development.

Phase 4: Design Handoff

	Step
12	Design organization (Checkpoint): Organize design files (naming, grouping, annotations). Ensure all screens are included. Link organized files in Asana.
13	Design specs (Checkpoint): Add annotations for spacing, colors, typography, and interactions. Export assets (icons, images). Link specs and assets in Asana.
14	Design handoff to DEV (Checkpoint): Deliver complete UI handoff package. Link in Asana. Proceed when development starts.
15	Design QA (Checkpoint): Review implemented designs against specs. Document issues and provide fixes. Link QA notes in Asana.

Outcome
UI handoff artifacts are complete, development can start, and design QA ensures implementation matches design.

Asana Card Templates

UI Style Exploration Review Request

	Asana Card Template
Title	Review UI style exploration: [Client Name] – [Project Title]
Assignee	Stakeholders (PM coordinates)
Description	Please review UI style exploration for direction selection: References • Project card: [Link] • UX wireframes: [Link] • UX handoff artifacts: [Link] • Style explorations: [Link] Review focus • Visual direction alignment • Brand consistency • User experience fit Checkpoint Proceed when style direction is selected and stakeholder sign-off proof is linked (Sign-off proof: [Link]).

UI Design Sign-Off Request

	Asana Card Template
Title	UI design sign-off: [Client Name] – [Project Title]
Assignee	Stakeholders (PM coordinates)
Description	Please provide final sign-off for UI designs: References • Project card: [Link] • High-fidelity designs: [Link] • Responsive designs: [Link] • Design system: [Link] Sign-off • Sign-off proof: [Link] (stored/linked by AE) • Optional quote (1 line): [Quote] Note: if the design sign-off affects contract-related decisions, use a signed document.

UI Handoff to DEV

	Asana Card Template
Title	UI handoff to DEV: [Client Name] – [Project Title]
Assignee	Development team
Description	UI design is complete. Please begin development: UI handoff artifacts • Design files: [Link] • Design specs: [Link] • Assets (icons, images): [Link] • Style guide: [Link] • Design system: [Link] References • Project card: [Link] • UX handoff artifacts: [Link] • Design sign-off proof: [Link] Checkpoint Proceed when development starts.

UI Workflow Checklist (Creative Use)

Design System Setup

	Checklist
1	☐ Design audit completed; findings documented
2	☐ Design system foundation defined (colors, typography, spacing, icons); linked in Asana
3	☐ Component library created; linked in Asana

Visual Design

	Checklist
1	☐ Style exploration completed (2–3 directions); linked in Asana
2	☐ Style direction selected; stakeholder sign-off proof linked
3	☐ High-fidelity designs created for all screens; linked in Asana
4	☐ Responsive designs created (mobile, tablet, desktop); linked in Asana

	Checklist
1	☐ Internal review completed; feedback documented
2	☐ Stakeholder review completed; review notes linked
3	☐ Design iteration decision recorded (major changes iterated or minor changes documented)
4	☐ Design sign-off completed; sign-off proof linked

Design Handoff

	Checklist
1	☐ Design files organized (naming, grouping, annotations); linked in Asana
2	☐ Design specs completed (spacing, colors, typography, interactions); linked in Asana
3	☐ Assets exported (icons, images); linked in Asana
4	☐ UI handoff package complete: design files, specs, assets, style guide
5	☐ UI handoff task created and assigned to Development team
6	☐ Design QA completed; issues documented and fixes provided

Table of Contents