Many business owners have experienced the "design surprise": you approve a few attractive homepage mock-ups, development starts, and weeks later you see a product that looks nothing like what you imagined - or looks right but is awkward to use. The cause is rarely a lack of talent. It is usually a missing or rushed design process.
A good UI/UX process is a sequence of small, low-risk decisions that build on each other. This guide explains each stage, what it produces, what you contribute, and how long-term problems get prevented early.
The process at a glance
| Stage | Purpose | Key output | Your role |
|---|---|---|---|
| 1. Brief | Agree goals and constraints | Design brief | Share goals, audience, brand, examples |
| 2. Research | Understand users and context | Research summary, personas or user types | Give access to customers or staff |
| 3. Structure | Organise content and tasks | Sitemap, user flows | Confirm priorities |
| 4. Wireframes | Lay out screens without styling | Low-fidelity wireframes | Focus feedback on content and flow |
| 5. Prototype and test | Validate with real users | Clickable prototype, test findings | Observe sessions if possible |
| 6. Visual design | Apply brand and polish | High-fidelity screens, style guide | Feedback on look and feel |
| 7. Handoff | Prepare for development | Specs, components, assets | Final approval |
| 8. Build review | Check the built product | Design QA notes | Approve before launch |
Stage 1: The brief
A strong brief saves weeks. It answers:
- What is the business goal? More enquiries, higher online sales, fewer support calls, faster staff workflows?
- Who are the users? Customers, dealers, field staff, administrators - each may need different things.
- What must users be able to do? List the five to ten most important tasks.
- What are the constraints? Brand guidelines, platform (website, Android, iOS, web app), languages, integrations, launch dates.
- What do you like and dislike? Links to products you admire - and those you do not - with a sentence on why.
Stage 2: Research
Research does not have to be large or slow to be valuable. Depending on the project, it can include:
- Stakeholder interviews - what the owner, sales team and support team hear from customers.
- User interviews - short conversations with five or so real users about how they work today and what frustrates them.
- Analytics review - where visitors come from, which pages they use, where they drop off.
- Competitor review - what similar businesses do well and badly.
- Context of use - are users on low-end Android phones, in a noisy shop, on a factory floor, or at a desk with two monitors?
The output is a short summary of who the users are, what they need and what gets in their way. For Indian audiences this stage often surfaces practical needs - Hindi or regional language support, WhatsApp as a preferred contact channel, UPI at checkout, or users who prefer calling over filling forms.
Stage 3: Structure - sitemaps and user flows
Before drawing screens, designers organise:
- Information architecture - which pages or sections exist and how they are grouped and labelled.
- User flows - the steps for each key task, such as "browse to purchase", "request a quote" or "approve a purchase order".
Flows are where unnecessary steps are removed. If booking a service takes seven screens, can it take four?
Stage 4: Wireframes
Wireframes are simple, grey-box layouts that show what goes where: headings, content blocks, forms, buttons and navigation. They deliberately leave out colours and images.
Why this matters for you: feedback at this stage is about content and flow, not taste. It is far easier to move a section, cut a field or rethink a screen in a wireframe than after it has been fully designed - and much easier than after it has been built.
Tip: resist commenting on colours and fonts at this stage. Ask instead, "Can a first-time user understand what to do here?"
Stage 5: Prototype and test
Designers link wireframes or early designs into a clickable prototype, usually in Figma, so it can be tapped through on a phone like a real product.
Then comes the most valuable hour in the whole project: watching real users try it.
- Give each tester a realistic task: "Find a sofa that fits a small living room and get it delivered to Jaipur."
- Watch silently. Note where they pause, tap the wrong thing or give up.
- Ask a few questions afterwards about what they expected.
Small rounds of testing with a handful of people regularly reveal the biggest problems. Fix them, then test again if needed.
Stage 6: Visual (UI) design
Once structure and flows are validated, the visual layer is applied:
- Typography - readable sizes, clear hierarchy, fonts that support Hindi or other scripts if needed.
- Colour - brand colours used consistently, with enough contrast for readability.
- Components - buttons, inputs, cards, tables, alerts and navigation designed once and reused.
- States - loading, empty, error, success and disabled states for each component.
- Responsive layouts - how each screen adapts from small phones to large desktops.
- Accessibility - contrast, focus indicators and tap-target sizes in line with WCAG guidance.
The result is a set of high-fidelity screens and a style guide or component library, which keeps future additions consistent. For growing products, this often becomes the start of a full design system.
Stage 7: Developer handoff
Handoff is not "emailing a folder of images". A professional handoff includes:
- Organised design files with clearly named screens and components.
- Spacing, sizes, colours and typography available to developers through the design tool.
- Exported icons, illustrations and images in the right formats.
- Notes on interactions and animations.
- Edge cases: long names, missing images, zero search results, slow connections.
Designers and developers should walk through the designs together before development starts. On our projects, designers and custom software or mobile app developers sit in the same team, which makes this stage much smoother.
Stage 8: Design review of the build
Before launch, designers review the built product on real devices and compare it against the designs: spacing, fonts, states, responsiveness and interactions. Small differences add up; this review keeps quality consistent.
After launch, analytics, recordings and user feedback show what to improve next. Design is a cycle, not a one-time event.
How the emphasis changes by project type
The stages stay the same, but where the effort goes differs:
- Marketing websites - more weight on content structure, messaging and visual brand. Research is often lighter, leaning on analytics, search data and competitor review.
- Mobile apps - onboarding, navigation patterns for iOS and Android, notifications and offline states need extra attention. Apple's Human Interface Guidelines and Google's Material Design are the usual references.
- Business software and dashboards - research with the staff who use the system all day matters most, along with dense data tables, bulk actions, keyboard shortcuts and permission-based views.
- E-commerce - search, filters, product pages and checkout get the most testing time, because small improvements there directly affect orders.
Common process mistakes
- Skipping research and designing from opinions.
- Jumping straight to high-fidelity designs, so everyone debates colours while flows remain broken.
- Too many decision-makers giving conflicting feedback. Nominate one person to consolidate feedback.
- Designing only the "happy path" and forgetting errors, empty states and edge cases.
- No handoff conversation, leaving developers to guess.
- Approving designs on a desktop monitor when most users are on phones.
How to give useful design feedback
| Instead of | Try |
|---|---|
| "I don't like it" | "This feels too corporate for our young audience" |
| "Make it pop" | "The main button does not stand out enough from the rest" |
| "Add more things to the homepage" | "Customers often ask about delivery areas - where would that go?" |
| "Change the colour" | "The red feels like an error message; can the primary action use another colour?" |
Describe the problem and let designers propose solutions.
Key takeaways
- A clear brief and light research prevent most design surprises.
- Agree on structure and flows in wireframes before discussing visual style.
- Test a clickable prototype with real users - it is the easiest point to fix problems.
- Insist on proper handoff and a design review of the built product.
- Give feedback as problems, not instructions, and through one consolidated voice.
Start your design project with us
MetaFox Technologies has a 25+ person in-house team in Jaipur, 6+ years of experience and 1,500+ projects behind it, with designers and developers working together. Book a free consultation to talk through your website, app or software, and we will propose a design process with a written scope and quote. Learn more about our UI/UX design services.
