Clients sometimes ask why design cannot just start with 'the pretty screens'. The answer is that every screen is a set of decisions about what the user needs, in what order, and how they get there, and making those decisions in code is ten times more expensive than making them in Figma.
This is the process we follow for websites, apps and software products, and what each stage produces.
1. Research and discovery
Before drawing anything we need to understand three things: the business goal (leads, sales, retention, efficiency), the users (who they are, what they are trying to do, what frustrates them now) and the constraints (brand, technology, content, budget). This usually involves stakeholder interviews, a review of the existing product or site, competitor analysis and, where possible, conversations with real users. Output: a short brief everyone agrees on.
2. Information architecture and user flows
We map what exists and how it connects: the site map for a website, the screen inventory for an app. Then we draw the key user flows, the sequence of steps a user takes to complete the things that matter most, such as booking, buying or onboarding. This is where most usability problems are prevented, because a flow with eight steps is obvious on paper and invisible in a mockup. Output: site map or screen map, and flow diagrams for primary tasks.
3. Wireframes
Wireframes are low-fidelity layouts in grey boxes: what goes on each screen, in what hierarchy, with what content. No colours, no imagery. The point is to agree on structure before taste enters the conversation. We review wireframes with the client and adjust quickly; changes here cost minutes. Output: wireframes for every key template or screen.
4. Visual design
With structure agreed, we apply the visual layer: typography, colour, spacing, imagery, iconography and motion, all in line with the brand. We design a small set of core screens first, agree on the direction, then extend it across the full set. For products we build a component library at the same time so the design stays consistent and the developers get reusable pieces. Output: high-fidelity Figma designs and a component library.
5. Prototyping and testing
Clickable prototypes let stakeholders and test users move through the real flows before anything is built. Five short usability sessions reveal most major problems. We fix them in the design, where they are cheap. Output: an interactive prototype and a list of adjustments made.
6. Developer handover
Design is not finished until developers can build it accurately. We deliver organised Figma files with named components, spacing and type scales documented, assets exported, and notes on states (hover, empty, error, loading) that are usually forgotten. Our designers stay available during the build, which is simpler when, as at Devontix, design and development sit in the same studio.
Why not skip steps?
Every skipped step reappears later as rework. Skipping research produces a beautiful product for the wrong user. Skipping flows produces screens that do not connect. Skipping wireframes produces debates about colour while structure problems hide. The process is not bureaucracy; it is the cheapest sequence in which to make decisions. The FeelGood Peptides store is a good example of a mobile experience that only worked because the flows were designed before the theme was built.
Where clients get involved, and where they should not
The process works best when stakeholders engage at the decision points: the brief, the flows, the wireframes and the first visual direction. Those are the moments where feedback changes the outcome cheaply. It works worst when feedback arrives late and at the pixel level, which turns design into negotiation. We set the review points in advance, explain what kind of feedback each stage needs, and keep a decisions log so settled questions stay settled.
Accessibility is part of good design
Designing for people who use screen readers, keyboards, voice control or simply have ageing eyes is not a compliance chore; it produces clearer interfaces for everyone. Practical rules we apply from the wireframe stage: sufficient colour contrast, text that scales, focus states on every interactive element, labels on every form field, and no information conveyed by colour alone. In several markets, including the US and the EU, accessibility is also a legal expectation for business sites.
Frequently asked questions
How long does UI/UX design take?
A marketing website: 2–4 weeks. A mobile app or web application: 4–8 weeks depending on screen count. It overlaps with development once the core screens are agreed.
Do I need user research for a small project?
You need proportionate research. For a small site, a few conversations and a competitor review are enough. Skipping it entirely is the risk.
What tools do you use?
Figma for design and prototyping, with the Adobe suite for illustration and brand assets where needed.
Founder & CEO of Devontix Solutions. Absaar leads strategy, automation planning and product thinking across every build, from the first discovery call to the running system. More about Absaar