How we work

A process
built for
no surprises.

Every project follows the same four-phase framework. Not because it's rigid — but because we've learned this sequence is the one that consistently produces work we're proud of and clients who come back.

🗺
Avg. project timeline
8 – 16 weeks
📞
Client touchpoints
Weekly check-ins + async updates
Revisions included
Unlimited in design phase
🚀
Post-launch support
30 days included, extendable
01
Phase one

Discover

Before a single wireframe, we need to understand your world — your users, your competitors, your constraints, and your ambitions. This phase is about asking questions most studios skip.

Duration: 1–2 weeks

What we deliver

🗺

Project Brief

A living document that captures goals, success metrics, audience personas, and project scope. Becomes the north star for every decision.

🔍

Competitive Audit

Analysis of 5–8 comparable products — what works, what doesn't, where the white space is. We find the angles others missed.

👥

User Personas

Research-based profiles of your actual users. Not fictional archetypes — real behavioral patterns from interviews and data.

🏗

Technical Architecture

Stack recommendations, infrastructure decisions, and integration mapping before any code is written. Prevents costly pivots later.

📅

Project Roadmap

Week-by-week timeline with milestones, dependencies, and review checkpoints. You'll always know exactly where we are.

💬

Kick-off Workshop

A focused 3-hour session with your key stakeholders and our core team. Aligns expectations, surfaces assumptions, starts with shared understanding.

Step by step

1.1 Stakeholder interview & goal alignment +
We sit down (or call) with everyone who has a stake in the outcome. We ask uncomfortable questions: What does success actually look like? What happens if this doesn't work? Who is the one person this needs to please most?
  • 60–90 min structured interview
  • Decision-maker mapping
  • Conflict identification between stakeholder goals
1.2 User research & behavioral analysis +
We talk to 5–10 real or potential users, not just read about them. If you have existing analytics, we dig in. We want to understand the mental model of your audience — what they expect, what frustrates them, where they abandon.
  • User interviews (moderated or guerrilla)
  • Analytics audit (if existing product)
  • Journey mapping of current state
1.3 Competitive landscape mapping +
We study your competitors — including international ones — to identify patterns, conventions, and differentiation opportunities. What are they all doing wrong? What's the one thing nobody has done yet?
  • 5–8 competitor teardowns
  • Feature and UX comparison matrix
  • Positioning gaps identified
1.4 Technical feasibility & stack decision +
Before any design work, we decide what we're building with. This isn't arbitrary — it's based on your scale requirements, team capabilities, budget, and timeline. We'll document why each choice was made so you're never locked in blindly.
  • Stack recommendation with rationale
  • Integration & API mapping
  • Infrastructure & hosting plan
  • Risk assessment
1.5 Scope lock & contract finalization +
We define exactly what's in scope — and what isn't. This is the contract everyone signs. No surprises later. Any scope additions go through a formal change order with impact assessment. Boring? Yes. Necessary? Absolutely.
  • Detailed scope document
  • Out-of-scope definition
  • Change order process established
  • Final timeline confirmation

Tools we use

Notion
Figma FigJam
Google Meet
Hotjar
Google Analytics
Linear
Slack
Miro
Discover phase output · Project Brief + Competitive Map Week 1–2
02
Phase two

Design

This is where ideas become tangible. We move from abstract goals to concrete screens, from "users want X" to "here's exactly how they'll get X." Design is not decoration — it's decision-making.

Duration: 2–4 weeks

What we deliver

🗂

Information Architecture

Sitemap, user flows, and navigation structure. The skeleton before the skin.

📐

Wireframes

Lo-fi structural layouts for every key screen. Fast, iterative, focused on logic not aesthetics.

🎨

Visual Design System

Colors, typography, spacing, iconography, component library. Everything defined before any screen is polished.

📱

Hi-Fi Mockups

Pixel-perfect screens for all key states and viewports. This is what the finished product will look like.

▶️

Interactive Prototype

A clickable Figma prototype that feels real. You can walk through your product before a line of code is written.

📋

Design Handoff Package

Annotated specs, component documentation, and asset exports for developers. Zero ambiguity in implementation.

Step by step

2.1 Information architecture & user flow mapping +
We map every path a user can take. Every screen, every edge case, every error state. If you can't draw it, you can't build it. We draw it first.
  • Sitemap for all content/pages
  • User flow diagrams per key task
  • Edge case & empty state planning
2.2 Wireframing & structural review +
Lo-fi wireframes for every key screen — fast and dirty on purpose. We want your feedback on structure and logic, not colors and fonts. Changes here cost an hour; changes in hi-fi cost a day.
  • All key screen wireframes (desktop + mobile)
  • Client review session with structured feedback
  • 2 rounds of revision included
2.3 Brand & visual language definition +
Before touching the product screens, we define the visual system. Color palette rationale. Typography stack with size scale. Spacing grid. Iconography style. Motion language. Everything documented before a single hi-fi screen is designed.
  • Color system with semantic naming
  • Type scale (6+ levels)
  • Component library foundation
  • Motion & animation principles
2.4 Hi-fidelity design & prototype +
Full-detail design of every screen, including hover states, loading states, empty states, and error states. Then assembled into a clickable prototype you can actually use to feel the flow.
  • All screens at hi-fidelity (Figma)
  • Responsive variants (desktop, tablet, mobile)
  • Interactive prototype with transitions
  • Stakeholder review & approval
2.5 Usability testing & iteration +
We test the prototype with 5–8 real users before development. This is where assumptions get challenged. One usability test finds more problems than 5 client reviews. We fix what we find.
  • Moderated usability sessions
  • Issue severity ranking
  • Pre-dev design iteration round

Tools we use

Figma
Figma Prototype
Framer
Maze (usability)
Notion
Lottie Files
Zeplin (handoff)
Design phase output · Hi-Fi prototype in Figma Week 3–6
03
Phase three

Develop

Design approved, scope locked, architecture decided. Now we build — with discipline, with tests, and with the same obsession for detail that went into the design. Code is craft too.

Duration: 4–8 weeks

What we deliver

⚙️

Sprint Releases

Two-week sprints with a working, testable build at the end of each. You see real progress every fortnight, not just status reports.

🔗

API & Integrations

Payment gateways, third-party APIs, CMS connections — all integrated, all tested. No orphaned endpoints.

🧪

Test Suite

Unit tests, integration tests, and E2E tests for all critical paths. We don't ship untested code — ever.

📖

Code Documentation

Inline comments, README files, and architectural decisions logged. Your future developers will thank you.

🔒

Security Audit

OWASP top-10 review, dependency vulnerability scan, and penetration testing for critical paths before launch.

Performance Optimization

Core Web Vitals pass, image optimization, lazy loading, and caching strategy. We target Lighthouse 90+ across the board.

Step by step

3.1 Environment setup & CI/CD pipeline +
Dev, staging, and production environments configured on day one. Automated deployment pipeline set up so no human error sneaks into production. Every PR runs tests before merge.
  • Repo structure & branching strategy (GitFlow)
  • CI/CD pipeline (GitHub Actions / Vercel)
  • Staging URL shared with client from week one
3.2 Sprint planning & task breakdown +
All features broken into story-pointed tasks before development starts. Priorities set, dependencies mapped. You'll have access to our Linear board — full transparency on what's being built and when.
  • Full backlog in Linear
  • Sprint planning session (client invited)
  • Weekly async status updates
3.3 Component-first development +
We build the design system as code first — a component library that matches Figma 1:1. Then we compose screens from those components. This approach means consistency at scale and components you can reuse forever.
  • Storybook component library
  • Design token sync with Figma
  • Responsive implementation for all breakpoints
3.4 Integration & backend development +
APIs, databases, authentication, third-party services — all wired together and tested. We write integration tests for every endpoint. Nothing goes to staging unless it passes.
  • RESTful or GraphQL API development
  • Database schema & migration files
  • Payment & 3rd-party integrations
  • Authentication & authorization
3.5 QA & cross-device testing +
Manual QA on real devices — not just browser emulators. Every user flow tested. Every edge case hit. Bugs logged, prioritized by severity, and fixed before the next sprint ends. No known critical bugs at launch.
  • Testing matrix: 5+ browsers, iOS + Android
  • Accessibility audit (WCAG 2.1 AA)
  • Load testing for expected traffic peaks
  • Bug triage & resolution cycle

Tools we use

React / Next.js
TypeScript
Tailwind CSS
Node.js
PostgreSQL
Postman
Storybook
GitHub Actions
Vercel
Linear
Develop phase · Sprint board + component architecture Week 5–12
04
Phase four

Deploy & Grow

Launch is not the finish line — it's the starting gun. We deploy with precision, monitor obsessively, and stay with you through the critical first weeks. Then we help you build on what we built.

Duration: 1–2 weeks + ongoing

What we deliver

🚀

Launch Plan

Hour-by-hour deployment checklist, rollback plan, and go-live criteria. No cowboy deployments — ever.

📡

Monitoring Setup

Uptime monitoring, error tracking, and performance dashboards. You'll know about problems before your users do.

📚

Handoff Documentation

Admin guides, CMS tutorials, and developer onboarding docs. Your team can run this independently after we hand it over.

🛡

30-Day Support Window

Bug fixes, minor adjustments, and questions answered within 24 hours. No charge for the first 30 days post-launch.

📊

Analytics & Baseline

GA4, Hotjar, and custom event tracking set up. We establish baseline metrics so you know what "normal" looks like.

🔄

Growth Retainer (optional)

Monthly iterations based on real user data. A/B tests, new features, and optimizations — on a predictable monthly budget.

Step by step

4.1 Pre-launch checklist & final staging review +
48 hours before launch: the full checklist. SEO meta, Open Graph, redirects, SSL, GDPR compliance, browser test matrix, performance scores. Nothing launches without a green light on every item.
  • 60-point pre-launch checklist
  • Stakeholder sign-off on staging
  • DNS & infrastructure pre-warm
4.2 Deployment & go-live +
We deploy during low-traffic hours. Automated with manual oversight. Rollback ready in under 5 minutes if anything unexpected appears. Our team stays on call for 24 hours post-launch.
  • Blue-green or rolling deployment
  • Post-deploy smoke testing
  • 24-hour on-call coverage
4.3 Post-launch monitoring & stabilization +
Week one is always the most interesting. Real users do unexpected things. We watch error logs, performance metrics, and user sessions. We fix before you have to report it.
  • Daily error log review (week 1)
  • Performance benchmarking vs. targets
  • Real user session recordings review
4.4 Team handoff & knowledge transfer +
We don't disappear after launch. We run walkthrough sessions with your team, answer every question, and make sure whoever's running this day-to-day is genuinely confident doing so.
  • Admin & CMS walkthroughs (recorded)
  • Developer onboarding docs
  • Architecture Q&A session
4.5 30-day retrospective & roadmap planning +
One month after launch, we sit down to review what the data says. What users are actually doing vs. what we expected. What to build next. This is where good products become great ones — by listening to real behavior, not assumptions.
  • Data review: analytics + heatmaps + sessions
  • Feature prioritization workshop
  • Phase 2 roadmap proposal (if applicable)

Tools we use

Vercel / AWS
Sentry (errors)
Google Analytics 4
Hotjar
Uptime Robot
GitHub Releases
Notion (docs)
Deploy phase · monitoring dashboard + analytics baseline Week 13–16+

The full
12-week picture.

For a typical mid-size project. Timelines scale with scope — we'll give you an accurate estimate after discovery.

DISCOVER
DESIGN
DEVELOP
DEPLOY
Discover (wk 1–2)
Design (wk 3–5)
Develop (wk 5–11)
Deploy & Grow (wk 12+)

What makes
a great collaboration.

We've done this enough times to know what separates projects that fly from projects that drag. Here's the honest guide.

✦ Do this
Consolidate feedback from all stakeholders before sending it. One voice, one revision round.
Give us access to your actual users early. Nothing is more valuable than a 30-minute user interview.
Make decisions quickly. Delays on your end compound into delays on ours.
Share examples of things you love (and hate). Reference is worth 1000 words.
Trust the process. We've earned the right to push back on scope creep.
✕ Avoid this
Sending feedback from 5 different people who haven't talked to each other. We can't action contradictions.
Changing the scope mid-development without a change order. It sounds small — it almost never is.
Going quiet for weeks then expecting to catch up instantly. Communication gaps cost everyone time.
Approving design then revisiting structural decisions during development. Design sign-off is final.
Asking "can we just add one small thing" without logging it. Nothing is ever just one small thing.

Things people
always ask us.

How much does a project typically cost?+
Honestly, it depends — but that's not a dodge. A landing page and a full booking platform are different orders of magnitude. Our starting point for a complete web project is Rp 45 juta (discovery + design + development). Mobile apps start at Rp 65 juta. We'll give you a precise estimate after the discovery session, where we'll understand exactly what you're building. We don't do fixed prices based on a one-line brief — that's how budget surprises happen.
Can we skip the discovery phase and go straight to design?+
We understand the impulse, but we don't offer this as an option. Every project we've ever had to rescue — from another agency or from in-house — skipped discovery. The cost of a 1–2 week discovery is always less than the cost of redesigning after 6 weeks of building the wrong thing. Discovery isn't a formality we invented to charge more. It genuinely changes what we build.
How many revisions do we get on the design?+
Unlimited revisions in the design phase — we iterate until you're genuinely happy. What we do ask is that feedback is consolidated and focused on the wireframe or hi-fi stage it's meant for. Once designs are approved and development has started, structural design changes are treated as scope additions. This isn't punitive — it's because redesigning a built component costs 10x more than redesigning a Figma frame.
Do you work with clients outside Yogyakarta?+
Yes — about 40% of our clients are based outside Yogyakarta, including Jakarta, Surabaya, Bali, and Singapore. We've built a fully async-capable process: shared Notion workspace, weekly video calls, and a Linear board you can check anytime. The only thing we ask is at least one in-person kick-off for projects over Rp 100 juta — we find it sets the tone better than anything else.
What happens if we want to add features mid-project?+
We love that you're excited about the product. New feature requests go through a change order process: we document the addition, estimate the impact on timeline and budget, and you decide whether to add it, defer it, or remove something else to make room. Nothing gets added without your explicit sign-off on what it costs. The backlog is always visible and prioritized together.
Who owns the code and design assets after launch?+
You own everything — 100%. Upon final payment, all source code, design files, and assets are transferred to you. We retain the right to display the project in our portfolio (you can opt out of this). We don't use licensing tricks or lock you into hosting with us. If you want to take the project to another developer after we're done, that's your right and we'll make it as easy as possible.
Do you offer ongoing maintenance after the project?+
Yes — we offer two models. Break-fix support: you reach out when something breaks, we fix it at an hourly rate. Growth retainer: a fixed monthly fee that covers maintenance, minor feature additions, and monthly strategy sessions based on your data. Most clients who work with us on significant projects end up on a retainer because they don't want to explain their codebase to someone new every 6 months.

Ready to start
the right way?

The best time to talk is before you've already decided what you're building. Let's figure that out together.