UI/UX Design Process: What Happens Before a Single Line of Code

Changing a button on a wireframe takes a designer five minutes. Changing the same button after it is built can mean updating the front end, the back end, the database and the tests. The later a problem is found, the more it costs.

Designing first gives you three things: (the next 3 lines are a bullet list, with the word before each colon in bold)

• Clarity: founders, designers and developers all see the same product before money is spent building it.
• Early feedback: real users can click through a prototype and tell you what confuses them, while changes are still cheap.
• Accurate estimates: developers can quote time and cost far more reliably from finished screens than from a written brief.

UI vs UX, in one line: UX (user experience) is how the product works and feels to use. UI (user interface) is how it looks. You need both, and UX comes first.

We start by understanding the business and the people who will use the product. We talk to the founder and, where possible, to real users. We look at competitors to see what users already expect and where there is room to do better.

You get: a short brief covering goals, target users, the main problem to solve, and what success looks like.

Next we map every journey a user takes, such as signing up, placing an order or finding a report. We decide what screens are needed and how they connect. This is where we cut steps that do not need to exist.

You get: a user flow diagram and a sitemap or screen list.

Wireframes are simple black-and-white layouts of each screen. They show what goes where, without colours or images getting in the way. Because they are quick to change, this is the best time to argue about layout and content.

You get: low-fidelity wireframes for every key screen.

Now the product gets its look: colours, typography, icons, spacing and imagery, all matched to your brand. We build a small design system of reusable buttons, forms and cards, so the product stays consistent as it grows.

You get: high-fidelity screens in Figma and a design system.

We link the screens into a clickable prototype that feels like a real app. Then we put it in front of 5 or more real users and watch where they hesitate or get stuck. We fix those problems before development starts.

You get: a tested prototype you can also use to pitch investors or early customers.

Finally, developers get everything they need: final screens, spacing and sizes, assets, interaction notes and edge cases such as empty states and error messages. At Yexoria, our designers and developers work in the same team, so handoff is a conversation, not a file dump.

You get: a build-ready Figma file and a clear spec for development.

1. Jumping straight to visual design. A beautiful screen with a confusing flow is still confusing. Fix the flow first.
2. Designing for yourself, not your users. Founders know their product too well. Test with people who have never seen it.
3. Ignoring mobile. For most products, many users arrive on a phone. Design mobile screens from the start, not as an afterthought.
4. Forgetting the boring screens. Empty states, error messages, loading screens and forgotten-password flows are where users get stuck most often.
5. Separating design and development teams. When designers hand off and walk away, details get lost. Keep them talking until launch.

Yexoria is a design studio and software company under one roof. Our designers and engineers work as one team, from the first research call to launch day. That means the product you approve in Figma is the product that gets built.

Planning a new app, website or product? Book a free 30-minute discovery call and we will help you plan the design before you spend on development.

Frequently asked questions