UX Design Process: Build Better User Experiences

The UX design process is the structured methodology that takes a website or digital product from a business brief to a user experience that genuinely works — one that helps visitors find what they need, understand what the business offers, and take the actions both parties want. At ALF Design Group, our UX design process runs across eight phases: discovery, user research, user flows and information architecture, wireframing, UI design, prototyping, testing and iteration, and handoff. Each phase has a specific output and a specific role in ensuring that design decisions are grounded in evidence rather than assumption. This guide explains what each phase involves, why it matters, and how the ALF process applies it in practice for Singapore businesses.

Good UX design is not visible in the finished product — and that is exactly the point. When a user navigates a website that was designed well, they do not notice the navigation, the content hierarchy, or the interaction patterns. They simply find what they came for, understand the offer clearly, and act. The design has done its job invisibly.

That invisibility is the result of a deliberate process — one that begins with understanding users and business goals before any visual decisions are made, and that continues through research, testing, and refinement until the experience serves its audience reliably. This guide covers that process: what it is, what each phase involves, and why businesses that invest in it consistently outperform those that skip it and go straight to design.

For the commercial case for UX investment — what it produces in measurable business outcomes — see our guide on how UX/UI can improve your website's conversions. For the full website design process including development and launch, see how to design a website: a step-by-step process. What follows is focused specifically on the UX design methodology — the phases of research, strategy, and design that precede and inform the build.

What Is UX Design — and What It Is Not

User Experience (UX) design is the discipline of shaping how users interact with a digital product — how it is structured, how it responds to user actions, what information is presented where, and how the entire journey from arrival to conversion feels. It encompasses information architecture, interaction design, content strategy, visual hierarchy, and accessibility.

What UX design is not: it is not a synonym for visual design. A website can be visually polished and still deliver poor UX — if content is hard to find, navigation is confusing, or the hierarchy does not match what users are looking for. Conversely, a visually simple site can deliver excellent UX if it is structured around user needs and tested against real user behaviour. The distinction matters because businesses that treat UX as a visual discipline tend to evaluate it on aesthetics rather than outcomes — and miss the actual levers that drive user engagement, time on site, and conversion.

It is also not a one-time project. User expectations evolve; business priorities shift; the competitive landscape changes; analytics reveal new friction points. A UX design process that ends at launch and is never revisited will gradually drift out of alignment with the users it was designed to serve. The best UX outcomes come from treating UX as a continuous practice — building iteration and measurement into the ongoing life of the site, not just the build phase.

Macro UX vs Micro UX: Designing the Whole System

A useful framework for thinking about UX at different levels of scope: macro UX and micro UX.

Macro UX — the full user journey

Macro UX addresses the complete experience a user has across an entire website — the flow from their first point of arrival (a search result, an ad, a referral link) through every page and interaction they encounter to the conversion action they take or the frustration that causes them to leave. Macro UX decisions include information architecture (how the site is structured), navigation patterns, content sequencing, and the logic of the user journey. These decisions are made before any visual design begins, typically in the form of site maps, user flows, and wireframes.

Micro UX — the usability of each element

Micro UX addresses the usability and experience quality of individual elements within the site — how a button behaves on hover, how a form handles an input error, how a dropdown menu reveals its options, how a page loads progressively. These are the details that users do not notice when they work correctly and immediately notice when they do not. Micro UX decisions are implemented during the UI design and prototyping phases, and validated through usability testing.

A coherent UX design process works at both levels simultaneously: macro decisions ensure the overall journey serves user goals; micro decisions ensure that every interaction within that journey is smooth and trustworthy. Neglecting either level produces a product that is structurally sound but frustrating in use, or smooth in its individual interactions but structurally confusing.

Why UX Design Matters for Singapore Businesses

Singapore's digital market has specific characteristics that make UX quality commercially significant. Users in Singapore are mobile-dominant, digitally sophisticated, and accustomed to high-quality digital experiences from the applications and services they use daily. The tolerance for poor UX — confusing navigation, slow loading, unclear value propositions, forms that do not work on mobile — is low, and the decision to leave a site and search for an alternative takes seconds.

In Singapore's B2B market — professional services, financial services, technology, healthcare — website quality is a direct proxy for service quality. A potential client evaluating an agency, consultancy, or specialist firm will form an impression of the organisation's competence and attention to detail from the quality of their website experience before any human conversation takes place. Strong UX in this context is not a differentiator — it is a credibility threshold.

Singapore's government investment in digital transformation through programmes like the PSG and EDG has also raised the average quality of digital presence across the SME sector, which means the baseline against which any individual business website is evaluated is higher than it was five years ago. For the broader context of UX design in Singapore's market, see our report on the state of UX design in Singapore.

Phase 1: Discovery — Understanding Before Designing

Every effective UX design process begins with discovery — a structured effort to understand the business context, user goals, and design constraints before any design decisions are made. Discovery produces the foundation that all subsequent phases build on; without it, design decisions are based on assumption rather than evidence.

The discovery phase typically involves:

• Stakeholder interviews — understanding business goals, KPIs, user acquisition channels, and what success looks like from the organisation's perspective
• Goal and KPI definition — translating business objectives into measurable design success criteria: conversion rate, engagement depth, task completion rate
• Brand and tone alignment — ensuring UX decisions reflect the brand's values and visual identity, not just its functional requirements
• Competitive landscape review — understanding the digital experience standards users have been exposed to in the relevant market and sector

The output of discovery is alignment: all stakeholders understand what the project is trying to achieve, who it is trying to serve, and what the design process will prioritise. This alignment prevents the most common cause of UX project failure — design decisions that optimise for stakeholder preferences rather than user needs.

Phase 2: User Research — Empathy Before Architecture

User research is the phase where UX designers develop genuine understanding of the people who will use the product — their motivations, behaviours, frustrations, and mental models. It is the discipline that separates UX design from pure interface design, and it is the phase most commonly skipped under time or budget pressure.

Two types of research are relevant at different stages of the process. Exploratory research — conducted before any design begins — surfaces the user needs and behaviour patterns that should inform the design's structure. Evaluative research — conducted during and after design — tests whether specific design decisions are working as intended. For the full methodology of each, see our guides on exploratory UX research methods and evaluative UX research and testing.

Key research activities

• User interviews — structured conversations with target users to understand their goals, behaviours, and frustrations
• User surveys — scaled quantitative data collection for patterns that individual interviews cannot confirm
• Heatmaps and session recordings — behavioural data from actual users on live pages, revealing where users click, scroll, and abandon
• Stakeholder interviews — internal research to understand product constraints, support escalations, and known user pain points from the business side
• Competitor analysis — evaluating the UX of comparable products to identify industry conventions users expect and opportunities to differentiate

Research tools

Hotjar provides heatmaps, session recordings, and on-site surveys that reveal how real users behave on live pages — the most direct source of evidence for what is and is not working in an existing design. Microsoft Clarity offers a free alternative with heatmaps and session recordings that integrates cleanly with Google Analytics. Maze is a remote usability testing platform that allows researchers to test prototypes and designs with real users at scale, gathering quantitative data on task completion rates and navigation paths.

Phase 3: User Flows and Information Architecture

With discovery and research complete, the process moves to structure. User flows map the journeys users take through the product — the sequence of pages and interactions from entry point to conversion. Information architecture defines how content is organised, categorised, and labelled so that users can navigate it intuitively.

User flows

A user flow is a map that traces the path a specific type of user takes to accomplish a specific goal. The most common flows for a Singapore business website: homepage → services → contact (for lead generation), homepage → product → cart → checkout (for e-commerce), blog article → service page → enquiry form (for content-driven lead generation). Designing with flows in mind means every page is built around what the user is likely to do next, not just what it needs to contain.

FlowMapp is a dedicated tool for creating and communicating user flows and site maps — particularly useful for collaborative review with stakeholders. Figma's diagramming tools offer an equivalent for teams already working within the Figma environment. For simpler flows, sketching on paper remains one of the most efficient methods — the value is in the thinking process, not the tool.

Information architecture

Information architecture (IA) is how content is structured, grouped, and labelled across a website. Good IA means users can find what they need without conscious effort; poor IA means they have to search, explore, and often give up. The principles ALF follows:

1. Identify — what content exists and what content users actually need
2. Classify — how that content is logically grouped from the user's perspective, not the organisation's
3. Map — the navigation structure and internal linking that makes the classification navigable

IA validation methods include card sorting (asking users to group content categories intuitively, revealing the mental model they apply) and tree testing (asking users to find specific content in a proposed structure, identifying where the structure fails to match their expectations). For how IA decisions translate into navigation design, see our guide on intuitive navigation best practices.

Phase 4: Wireframing — Structure Before Style

Wireframes are low-fidelity representations of a page's structure — the layout of elements, the hierarchy of information, and the placement of interactive components — without visual design applied. They are the working drawings of UX design: rough, fast to produce, and focused entirely on how the page functions rather than how it looks.

The value of wireframing is in the discipline it enforces. By stripping away colour, typography, and imagery, wireframing forces decisions about structure and hierarchy that are easy to defer when visual design is already applied. A wireframe review identifies whether the page's information hierarchy serves the user's goals, whether the conversion path is clear, and whether the content sequencing follows the user's likely reading and decision pattern.

Wireframes should be shared with stakeholders and reviewed before any UI design begins. Changes to structure at the wireframe stage are inexpensive; the same changes after high-fidelity designs are produced create significant rework. Investing in thorough wireframe review is one of the most commercially efficient investments in the UX design process.

Phases 5 and 6: UI Design and Prototyping in Figma

With wireframes validated, the process moves to visual design. High-fidelity mockups apply the brand system — typography, colour, iconography, spacing — to the approved wireframe layouts, producing a pixel-accurate representation of what the final product will look like. At ALF Design Group, all UI design is produced in Figma, which enables real-time collaboration with stakeholders, component-based design that ensures consistency, and direct design-to-Webflow handoff. For the full detail of how we use Figma in our design process, see our guide on why Figma is the ultimate tool for UX designers.

Prototypes are interactive versions of the mockups — clickable, navigable representations of the final product that allow users to test flows and interactions before any code is written. Prototyping in Figma produces a shareable link that stakeholders and test participants can explore on their own devices, providing realistic test conditions and revealing usability issues that static mockup review cannot surface. For the specific value and methodology of prototyping, see our prototyping service page.

Phase 7: Testing and Iteration — Validate Before You Build

Testing is where the assumptions embedded in every preceding phase are confronted with real user behaviour. No matter how thorough the research and how experienced the designer, user testing consistently surfaces friction points, confusion, and failure modes that were not anticipated. This is not a failure of the design process — it is the design process working correctly. The purpose of testing before build is to identify and resolve those issues at a stage where they are still inexpensive to fix.

Usability testing involves observing real users attempting to complete specific tasks on the prototype, noting where they succeed, struggle, or fail. The most actionable usability testing sessions are those with specific, pre-defined tasks rather than open-ended exploration — because task-specific testing produces clear evidence about whether specific design decisions work for the intended user behaviour. For a structured usability testing methodology, see our guide on how to conduct a usability audit.

Iteration follows testing: findings are prioritised by impact, design decisions are revised, and the revised versions are tested again if the changes are significant. This iterative cycle is not a sign of design failure — it is what produces design quality. The number of iterations required depends on the complexity of the product and the quality of the initial research; a well-researched design will require fewer testing cycles than one built on assumptions.

Phase 8: Handoff and Build

The handoff phase bridges UX design and development. In a well-run process, the handoff is not a moment of transition but a continuation — the designer and developer have been in dialogue throughout, and the developer's technical constraints have informed the design rather than being discovered after it is finalised.

A complete Webflow handoff includes: finalised Figma files with named layers, documented components, and explicit responsive notes at each breakpoint; a style guide or design system documenting typography scales, colour tokens, spacing rules, and component states; and a written brief covering any interactions, animations, or custom logic that requires specific implementation attention.

For ALF Design Group projects, the handoff is typically into our own Webflow build — eliminating the designer-to-developer gap entirely, since the same team that designed the product builds it. For clients bringing their own development teams, our handoff documentation is structured to answer the questions a developer will have without requiring additional design consultation. For more on this transition, see our guide on improving designer–developer partnerships.

The ALF Design Group UX Process at a Glance

UX as a Continuous Practice

The eight phases described above are the structure of a single UX design engagement. But UX design does not end at launch — and businesses that treat it as a one-time project consistently see the quality of their digital experience degrade over time as user expectations rise, the competitive landscape evolves, and the product accumulates changes that were made without UX governance.

A continuous UX practice means establishing the measurement infrastructure — analytics, heatmaps, session recordings, periodic user interviews — that makes UX improvement evidence-based rather than intuition-driven. It means reviewing key flows and pages against new data on a regular cadence. And it means treating the site as a product that is continuously improved, not a project that is delivered and forgotten.

For Singapore businesses investing in digital presence, this distinction has real commercial significance. A website that compounds UX improvements over two years will significantly outperform one that was well-designed at launch and then left unchanged — in rankings, in conversion rates, and in the user experience signals that influence both. Our UX and UI design service includes ongoing UX review as an option alongside project-based engagements.

Frequently Asked Questions

What is the UX design process?

The UX design process is the structured methodology that takes a digital product from a business brief to a user experience that genuinely serves its audience. It typically runs through discovery, user research, user flows and information architecture, wireframing, UI design, prototyping, testing and iteration, and handoff. Each phase has a specific output and builds on the previous one — discovery informs research, research informs architecture, architecture informs wireframes, and so on. The process is designed to ensure that design decisions are based on evidence about user needs rather than assumption or preference.

How long does a UX design process take?

It depends on the scope and complexity of the product. For a standard Singapore business website (five to fifteen pages), a thorough UX process — covering discovery, research, user flows, IA, wireframes, UI design, and prototyping — typically takes four to eight weeks. For more complex products (web applications, SaaS platforms, e-commerce with custom user journeys), the process is longer. The phases most commonly compressed under time pressure — discovery and user research — are the ones that produce the most expensive problems later if skipped. Investing in them upfront consistently reduces total project time by reducing rework.

Do I need user research for a small website?

Yes — but the depth of research should be proportionate to the complexity of the product and the stakes of getting it wrong. For a simple five-page service website, informal research (reviewing existing analytics, interviewing two or three recent clients about their experience, checking competitor sites) may be sufficient. For a site that is a primary lead generation tool, or for a product with complex user journeys, more structured research produces significantly better outcomes. The question is not whether to do research but how much research is proportionate to the commercial importance of the decisions it will inform.

What is the difference between UX design and UI design?

UX design addresses the structural and strategic layer of a digital product: how it is organised, how users navigate through it, and whether the overall experience serves their goals. UI design addresses the visual and interactive layer: how the product looks, how elements behave on interaction, and how the visual system communicates the brand. UX typically precedes UI — structure and flow should be validated before visual design is applied. In practice the two disciplines are deeply intertwined: strong UI design reinforces the UX decisions made at the structural level, and poor UI can undermine a strong UX foundation.

What tools does a UX designer use?

The core tool stack for modern UX design: Figma for wireframing, UI design, and prototyping; Hotjar or Microsoft Clarity for behavioural research (heatmaps, session recordings) on live products; Maze for remote usability testing on prototypes; FlowMapp for user flow and site map creation. Supplementary tools include Miro or FigJam for collaborative workshops and journey mapping, and Google Analytics or Mixpanel for quantitative behavioural data. The right tool combination depends on the phase of the process and the type of research or design being conducted.

How does UX design affect SEO?

UX design affects SEO through two mechanisms. First, user engagement signals — dwell time, scroll depth, bounce rate, pages per session — are influenced by UX quality and are incorporated into Google's quality assessment of pages. A well-designed page that users engage with deeply will perform better in rankings over time than a keyword-optimised page that users abandon quickly. Second, information architecture decisions — heading hierarchy, content grouping, internal linking structure — directly affect how Google crawls and interprets the site's content. Good IA is simultaneously good UX and good technical SEO.

What should I look for when hiring a UX design agency in Singapore?

Portfolio evidence of the UX process — not just final visual outputs, but wireframes, research documentation, and case studies that explain the decisions made and why. A clearly described design process that includes user research, not just visual design. Evidence of user testing — agencies that test and iterate produce better outcomes than those that deliver finished designs without validation. References or case studies from Singapore clients in relevant sectors. Transparency about how decisions are made and how client feedback is incorporated. Our guide on how to choose the right UX designer in Singapore covers the full evaluation framework.

Conclusion

The UX design process is not a series of boxes to tick before the real work of building begins — it is the real work. The research, strategy, and structure that the process produces are what determine whether a website serves its users effectively, and whether those users convert into the commercial outcomes the business needs. Skipping the process to save time almost always produces a site that requires expensive revision sooner than one where the process was followed.

At ALF Design Group, UX design is central to every project we take on — not as a prerequisite to building in Webflow, but as the strategic foundation that makes Webflow's execution capabilities deliver their full value. If you want to understand what a UX-led approach would produce for your specific project, our UX and UI design service is the starting point — or reach out to our team to discuss your brief directly.

{{build-better-experience="/directory"}}