ftfraztechDESIGN · CODE · AI
Let’s talk ↗
Product strategy

Why design should come before development

A clearer scope, fewer surprises and a better starting point for your product.

Product strategy: original editorial artwork

Start with the user’s task

A feature list describes what a product contains. A user journey explains what someone needs to accomplish. Before discussing colors or code, map the main task from entry to completion. Identify the information users need at each step.

Make decisions while changes are inexpensive

Wireframes let you compare structures without committing to implementation. A prototype helps you discuss navigation and behavior. This does not eliminate changes during development, but it gives the team a clearer shared reference.

Design enough to guide the build

Not every project needs months of research. A small website may need a clear content structure and responsive layouts. A complex application needs more attention to roles, errors and edge cases. Match the design effort to the uncertainty.

Keep the conversation going

A design file is not the end of collaboration. Designers and developers should review the implementation together, especially around responsive behavior, accessibility and loading states.

Start with a small discovery brief: supporting editorial illustration
Start with a small discovery brief · AI-generated illustration

Start with a small discovery brief

Write down the audience, their main task, the business outcome and the constraints already known. Keep assumptions separate from confirmed requirements. For example, a founder may believe users need an account before viewing products, but that is a decision to examine rather than a fact. A short brief gives the team a common reference and prevents early conversations from becoming a disconnected collection of favorite screens and visual styles.

Example: simplify a booking journey

Map how someone finds a service, selects a time, provides the necessary details and receives confirmation. Ask what information is required at each step. If the visitor must create a detailed profile before seeing availability, test whether that sequence is necessary. A wireframe lets the team compare alternatives before the development effort is committed. The goal is to resolve meaningful uncertainty, not to produce a large number of intermediate screens.

Review the states around the happy path

Include no availability, invalid input, a failed request and a returning user. These states often reveal requirements hidden by the ideal journey. Discuss them with the developer while the flow is still flexible. Decide which behavior needs confirmation from the business. A handoff that includes the surrounding states is more actionable than a polished sequence where every request succeeds and every field contains perfectly sized content.

Use approval to create a shared baseline

Review the agreed journey, representative screens and remaining questions together. Record what has been approved and what is still open. This does not make the design immutable; it makes later changes easier to discuss. When a new requirement arrives, the team can explain its effect on scope and timing. Design before code creates a clearer starting point for collaboration, not a promise that the project will never need adjustment.

← All articles
HAVE SOMETHING IN MIND?

Let’s make it
worth building.

Tell me about your project

From a rough idea to a product people enjoy using.