Loading
PL EN
UX/UI

UX/UI design for a business website: information architecture, User Journey and hi-fi mockups

UX/UI design for a business website: information architecture, User Journey and hi-fi mockups

Most business websites are built backwards: first a template is picked, then the content is squeezed into it, and finally everyone wonders why the contact form stays silent. Good UX/UI design reverses that order. First we understand who visits the site and why — only then do we decide how it should look.

1. The business goal comes before the first pixel

Every project starts with one question: what decision should the visitor make? Send an enquiry? Call? Buy? Book a slot? The answer shapes everything — section order, copy length, the number of buttons and what we measure after launch.

  • Primary goal — e.g. “quote request from the form”.
  • Secondary goals — booking a consultation, a phone call, downloading a PDF offer.
  • Success metric — conversion rate, leads per month, cost per acquisition.

2. Information architecture — the map before the city

Information architecture (IA) is how we organise content, navigation and naming. This is where the sitemap is created: the list of pages, their hierarchy and which content goes where. Good IA lets users find answers in 2–3 clicks and helps Google understand what each page is about.

In practice I organise content around search intent. If clients search for “custom WooCommerce store”, that phrase deserves its own well-described page or section — not a sentence lost on the “About” page.

3. User Journey — a path that ends with contact

A User Journey describes the client’s path: where they come from (Google, referral, campaign), what they want to check on the way (price, portfolio, reviews, timeline) and what might stop them. I break it into stages:

  1. Entry — the first 5 seconds: is it instantly clear what you offer and to whom?
  2. Verification — proof: case studies, numbers, client logos, process.
  3. Objections — how much, how long, what if something goes wrong?
  4. Decision — one simple, visible step: form, calendar, phone.

4. Wireframes — the skeleton without colours

Before colours and typography, grey wireframes show the layout, priorities and calls to action. It is the cheapest moment for changes: moving a section in a wireframe takes a minute, in finished code — hours.

5. Hi-fi mockups and a clickable prototype

Hi-fi mockups are the final look: colours, fonts, images, button states and the mobile version. In Figma I connect them into a clickable prototype you can test on your phone before a single line of code is written — plus a small design system that keeps future pages consistent and fast to build.

6. Accessibility and SEO from the first mockup

Text contrast, readable font sizes, a logical H1–H3 structure and descriptive links are not “extras for the end”. They improve accessibility (WCAG), SEO and conversion at the same time.

What you get after the design stage

  • a sitemap and information architecture,
  • a documented User Journey with content for each stage,
  • hi-fi mockups (desktop + mobile) and a clickable prototype,
  • a design system ready for WordPress, WooCommerce or React.

This is the first of two stages of cooperation. The design is yours — you can build it with me or any other developer. Indicative prices are in the pricing (UX/UI design from PLN 2,500 net).

Want to see how your website could work? Book a free consultation.