Approve web design based on criteria, not taste: A practical UX review before development

Category: Web design and UX

A new web design is often approved in a meeting where participants assess the colours, images and how modern the homepage looks. The problem is that an attractive design mock-up can conceal weak structure, unclear navigation and important actions that are difficult to find. When the problems are first discovered after development, they become more expensive to fix.

A better solution is to treat design approval as a professional review. Before you approve the look and feel, you should examine whether the solution helps real users understand the offering, find the right information and complete a task. The review does not need to be extensive, but it must be based on clear criteria.

Start with the task the page needs to solve

It is difficult to assess a design without knowing what the user is supposed to accomplish. Before the review, you should therefore define one primary task for each important page type.

For example, the main task of a service page may be to help a potential customer assess whether the service is right for them. The customer should then be able to request a meeting. A product page may need to enable users to compare alternatives and make a purchase. A recruitment page should help candidates understand the role and submit an application.

Phrase the task as a simple sentence:

• Visitors should be able to understand what the service includes and request a relevant conversation.
• Customers should be able to choose the right product without contacting customer service.
• Candidates should be able to assess the position and find the application process.

This sentence becomes the benchmark for the rest of the review. If a design element does not support the task, you should ask why it is taking up space.

1. Check the structure before discussing details

Start by looking at the page without assessing colours, images or decoration. Examine the order of the content and whether each section answers a natural question.

A service page could, for example, be built around this line of thought:

1. What does the company offer?
2. Who is the service for?
3. What problem does it solve?
4. How is the service delivered?
5. What does the customer need in order to make a decision?
6. What is the next step?

The order does not have to be the same on every page, but it should be deliberate. The company’s history should not automatically come before the information customers need to assess the offering.

Also look for content competing for attention. Multiple prominent messages, campaign panels and call-to-action buttons in the same area do not necessarily make the page more effective. They can make it harder to understand what matters most.

2. Test the navigation with specific questions

Navigation should not be assessed based on whether it looks tidy. It must be tested against what visitors are actually looking for. Create a short list of questions typical customers come to the website with.

• Which solution is right for a small business?
• How much does the service cost?
• How do I get help as an existing customer?
• Does the company have experience in my industry?
• Where can I find the contact person for my area?

Ask someone who has not participated in the project to show where they would click. Do not explain the menu in advance. If the person has to open several menu items at random, the terms or grouping are probably too focused on internal terminology.

Pay particular attention to umbrella terms such as «Solutions», «Expertise» and «Resources». Such terms can work, but only when the content beneath them is predictable for the target audience. The menu should reflect the customer’s understanding, not the organisational chart.

3. Assess typography as a function

Typography is not just about choosing a typeface. It determines how easily users can scan, read and understand the content. An expressive design can still work poorly if the text is small, the lines are long or the headings look too similar to one another.

Review the design with realistic text. Short sample headings and a few lines of placeholder text give a misleading impression. Add a long service name, an explanatory introduction, a bulleted list and link text that could actually be published.

Then look for the following:

• Is the body text comfortable to read on both mobile and large screens?
• Is there a clear distinction between the main heading, subheadings and body text?
• Are the lines a length that makes it easy to find the next line?
• Is the spacing between paragraphs and sections consistent?
• Can bold text be used to emphasise key points without making the entire page feel visually heavy?

Good typography makes the content hierarchy visible without requiring users to interpret the design.

4. Separate visual identity from decoration

The company’s identity should be expressed through colors, typography, imagery, language and composition. It should not depend on large graphic effects across every surface.

Ask whether the design still feels like the company’s when used on a standard information page with few images. If the identity disappears as soon as the top banner is removed, the expression is often not defined strongly enough.

Also check whether the identity can withstand practical use. It must be possible to publish new pages without each page requiring bespoke design. The color palette should have clear roles, such as background, text, emphasis, warning and action. The image style should be specific enough for editors to choose imagery that remains coherent over time.

The goal is not for every page to be identical. The goal is for variation to take place within recognizable parameters.

5. Make accessibility part of design approval

Accessibility cannot be added as a technical checkpoint at the end. Several fundamental decisions are made during the design phase.

Check the contrast between text and background, but do not stop there. Information must not be conveyed through color alone. For example, an error message should include explanatory text, not just a red border. Links must be recognizable as links, and buttons should have labels that describe the action.

Also consider keyboard use and visible focus. A user navigating without a mouse must be able to see which element is active. The order should follow the visual and logical structure of the page.

Enlarge the text and see what happens. Text should not disappear, overlap or be hidden behind fixed elements. Also test the mobile view with longer headings and button labels. A design that only works with short words is not robust enough for Norwegian content.

6. Consider conversion as a journey, not button color

Conversion is often reduced to the placement and color of an action button. However, the most important work happens before the click. Users must understand the offer, find it relevant and know what happens next.

Check that the action matches the user’s decision stage. “Order now” may be right for a simple product, but for a comprehensive business service, “Request an initial assessment” may be more precise. The button text should make a realistic promise.

The information surrounding the action should reduce uncertainty. Briefly explain what the customer can expect after submitting the form, what information is needed, and whether the inquiry is non-binding when that is actually the case.

Avoid giving all actions the same visual weight. One primary action can be supplemented with a quieter alternative, such as reading a relevant customer story or seeing how the delivery process works.

Test more states than the perfect mockup

Design is often presented with good images, short names and ideal content. The finished website must handle much more variation. Therefore, ask to see critical components in several states.

• Mobile menu with all levels open.
• Form with error messages and confirmation.
• Card with a long heading and no image.
• Search results with no matches.
• Button with a long Norwegian action label.
• Page with little content and page with lots of content.
• Visible focus on links, fields and buttons.

This reveals whether the design is a flexible system or merely a collection of well-composed screenshots.

Use a simple approval matrix

Summarize the assessment in a short matrix covering structure, navigation, typography, identity, accessibility and conversion. For each area, record the status, the specific problem, the person responsible and what must be resolved before development.

Avoid feedback such as “make it clearer” or “it feels a little anonymous.” Instead, describe the problem and its consequence:

• Prices are located under two internal menu items and are difficult to find.
• The body text becomes too narrow on mobile when the fact box is displayed alongside it.
• The primary and secondary buttons have equal visual weight.
• Errors in the form are indicated by color alone.
• The service page explains the delivery, but not who it is suitable for.

Comments like these can be prioritized, resolved and verified. Personal preferences can still be discussed, but they should not have the same status as problems that hinder understanding or use.

Finish with a short task test

Before final approval, someone outside the project team should try a clickable prototype. Three to five relevant tasks are often enough to uncover significant weaknesses. Ask the person to think aloud, but do not help along the way.

Note where the person hesitates, which words are misunderstood and whether they find the right action. You do not need to wait for a comprehensive report. The goal is to identify clear problems before they are built into the solution.

A web design is ready for development when key tasks can be completed, the content has a clear hierarchy, the identity works on standard pages, and the solution can withstand realistic content and different ways of using it. Then you are not just approving how the website looks. You are approving how it is meant to work.