UX design guide: from wireframe to prototype, the complete guide
Good UX design is not a luxury but a necessity. In a world where users decide within seconds whether to stay on a website or move on, the user experience decides the success or failure of your digital product. In this comprehensive guide we take you through the whole UX design process, from research through wireframes and prototypes to usability testing.
At GoldenWing we have been shaping digital experiences for companies in Austria and the German speaking market for more than 3 years. Our experience from numerous web design projects goes into this guide.
What is UX design?
UX design (user experience design) covers every aspect of a user's interaction with a company, its services and its products. It goes far beyond visual design and refers to the whole experience, from the first impression to long term use.
The term was coined by Don Norman at Apple in 1993 and has since become the central design principle of digital products.
The five dimensions of UX:
| Dimension | Description | Example |
|---|---|---|
| Usefulness | Does the product solve a real problem? | A contact form instead of only an email address |
| Usability | How easy is it to operate? | Navigation with at most 3 clicks to the goal |
| Findability | Does the user find what they look for? | A clear menu structure, a search function |
| Accessibility | Can everyone use the product? | Compatible with screen readers, good contrast |
| Desirability | Is using it a pleasure? | Appealing design, micro interactions |
You find more of the basics in our glossary entry on user experience.
UX versus UI: what is the difference?
The terms UX and UI are often used interchangeably, a common mistake. They describe different but complementary disciplines.
| Aspect | UX design | UI design |
|---|---|---|
| Focus | The whole experience, functionality | Visual design, aesthetics |
| The question | "Does it work well?" | "Does it look good?" |
| Methods | Research, wireframes, testing | Colour palettes, typography, icons |
| Output | Flowcharts, wireframes, prototypes | Mockups, style guides, UI kits |
| Analogy | The architecture of a house | The interior of the house |
| Tools | Figma, Miro, UserTesting | Figma, Sketch, Adobe XD |
The short formula: UX makes a product useful, UI makes it beautiful. Both together give you a product users enjoy.
A common problem in practice: companies invest a lot in UI (a slick design) and little in UX (usability). The result is a website that looks great but nobody can operate. At GoldenWing we therefore always start with UX and lay UI on top, never the other way round.
The 5 phase UX design process
The UX design process follows the design thinking framework developed at the d.school in Stanford. It is iterative, not linear, which means you jump back and forth between phases.
Phase 1: empathise, understanding users
The empathise phase is about understanding the needs, motivations and frustrations of your users. Without that understanding you design in the dark.
Methods:
- Interviews: conversations of 45 to 60 minutes with 5 to 8 users
- Observation: watching users complete tasks (contextual inquiry)
- Surveys: quantitative data to complement qualitative insight
- Analytics: Google Analytics, Hotjar heatmaps, session recordings
- Empathy maps: a visual summary of what users say, think, feel and do
Output: empathy maps, interview transcripts, usage statistics
Phase 2: define, defining the problem
From the research findings you derive a clear statement of the problem, the so called problem statement or a "how might we" question.
An example:
- Bad: "our website needs a redesign."
- Good: "how can we enable the managing directors of smaller companies to find and request a fitting service package within 2 minutes?"
Methods:
- Affinity mapping (forming clusters from the research data)
- User journey mapping (more on this in our guide)
- Formulating problem statements
- Refining personas
Phase 3: ideate, developing solutions
In the ideate phase you generate as many ideas for a solution as possible before committing to one.
Methods:
- Brainstorming (quantity before quality)
- Crazy 8s (sketching 8 ideas in 8 minutes)
- Mind mapping
- Competitive analysis (how do others solve the problem?)
- Dot voting (the team votes on the best ideas)
The rule: in the ideate phase there are no bad ideas. Criticism comes only in the evaluation phase.
Phase 4: prototype, building solutions
In the prototype phase the best ideas are turned into testable models. This is where wireframes and prototypes come in, more on them in the next sections.
Phase 5: test, validating with real users
The test phase closes the circle: you test your prototypes with real users and iterate based on the feedback. We cover usability testing in detail further down.
User research: the basis of every UX decision
User research is not an optional ingredient, it is the foundation. Without research your design rests on assumptions, and assumptions are the mother of all UX mistakes.
Qualitative versus quantitative research
| Aspect | Qualitative | Quantitative |
|---|---|---|
| The question | "Why?" and "how?" | "How many?" and "how often?" |
| Method | Interviews, observation | Surveys, analytics |
| Sample size | 5–15 participants | 100+ participants |
| Output | Insights, quotes, patterns | Statistics, charts |
| Use | Exploration, understanding | Validation, prioritisation |
The most important research methods
1. User interviews
The most valuable research tool. In one to one conversations of 45 to 60 minutes you learn what users really think and need.
Best practices:
- Ask open questions: "tell me about…" instead of "do you like…?"
- Do not suggest or judge
- Tolerate silence, the best insights come after pauses
- Record and transcribe (with consent)
2. Card sorting
Users sort content into the categories that make sense to them. Ideal for developing the information architecture (navigation, menu structure).
3. Heatmaps and session recordings
Tools such as Hotjar or Mouseflow show where users click, how far they scroll and where they leave. Indispensable for analysing an existing website.
4. A/B testing
Two variants of a page are tested against each other. Indispensable for decisions based on data about CTAs, headlines and layouts.
5. Diary studies
Users document their experience over a longer period (1 to 4 weeks). Ideal for products used regularly.
Wireframing: structure before design
Wireframes are the blueprints of your website or app. They show the structure, the layout and the information architecture, without visual details such as colours, images or typography.
Why wireframes are indispensable
- A focus on function: without visual distraction everyone involved can discuss structure and content.
- Fast iteration: changing a wireframe takes minutes, changing a design takes hours.
- Early stakeholder feedback: clients can approve the structure before expensive design work begins.
- Technical planning: developers understand the requirements early.
Low fidelity versus high fidelity wireframes
| Aspect | Low fidelity | High fidelity |
|---|---|---|
| Level of detail | Rough, schematic | Detailed, pixel precise |
| Tool | Paper, whiteboard, Balsamiq | Figma, Sketch, Adobe XD |
| Time needed | Minutes per page | Hours per page |
| Use | Ideation, first concepts | Final sign-off, developer handoff |
| Interactivity | None | Clickable links possible |
| Cost | Very low | Medium |
Wireframe tools compared
| Tool | Price | Strengths | Weaknesses |
|---|---|---|---|
| Figma | Free or from 15 € a month | Collaboration, prototyping, the industry standard | A learning curve for beginners |
| Sketch | From 10 € a month | Intuitive, a large plugin ecosystem | macOS only |
| Balsamiq | From 9 € a month | Ideal for low fidelity, fast sketches | No high fidelity possible |
| Adobe XD | Discontinued | – | No longer developed |
| Whimsical | Free or from 10 € a month | Fast, simple, flowcharts | Fewer prototyping features |
Our recommendation: at GoldenWing we work with Figma, it is the industry standard, it offers collaboration in real time and it covers the whole process from wireframe to prototype.
A wireframe checklist
Every wireframe should contain at least:
- Navigation and the menu structure
- The content hierarchy (H1, H2, body copy)
- The placement of calls to action
- Form fields and labels
- Image placeholders with size information
- The footer structure
- The mobile variant (responsive)
- Annotations for interactions
Prototyping: low fidelity and high fidelity
A prototype is an interactive model of your website or app. Unlike a static wireframe, users can click through a prototype and experience the interactions.
Low fidelity prototypes
Low fidelity prototypes are quickly built, rough models, often made of paper or with simple tools.
Where to use them:
- Validating a concept early
- Internal workshops
- Fast iteration (5 to 10 variants a day are possible)
Methods:
- Paper prototyping: hand sketched screens on paper that are "swapped" by hand
- Digital low fidelity: clickable wireframes in Figma or Balsamiq
- Wizard of Oz: a human simulates the technology behind the interface
High fidelity prototypes
High fidelity prototypes look and feel like the finished product. They contain real content, colours, images and animations.
Where to use them:
- Usability testing with a realistic experience
- Stakeholder presentation and sign-off
- Developer handoff (Figma to code)
- Investor pitches
Best practices for high fidelity prototypes:
- Use real content instead of lorem ipsum
- Implement realistic interactions (hover, click, scroll)
- Test on real devices, not only in the browser
- Document edge cases (error states, empty states, loading times)
- Build a design system or component library in parallel
The prototyping workflow at GoldenWing
Our proven sequence for web design projects:
- A kickoff workshop: clarify goals, audience and constraints
- Wireframes (low fidelity): 3 to 5 page types as the basic structure
- Feedback round 1: discuss the wireframes with the client
- Wireframes (high fidelity): a refined version with content planning
- UI design: apply colours, typography and images to the wireframes
- Prototype: a clickable Figma prototype for testing
- Usability test: 5 users test the prototype
- Iteration: adjustments based on the test results
- Handoff: the final design plus specs to development
Take a look at our previous projects to see the process in practice.
Usability testing: validating with real users
Usability testing is the most important quality assurance step in the UX process. You watch real users interact with your product and identify problems you would never have noticed yourself.
The five user rule
Jakob Nielsen showed that 5 users uncover 85 percent of all usability problems. That means usability testing need be neither expensive nor time consuming. Half a day with 5 test persons already delivers actionable insight.
Types of usability test
| Type | Description | Cost | Time needed |
|---|---|---|---|
| Moderated (on site) | Tester and moderator in the same room | Medium | 1–2 days |
| Moderated (remote) | Through Zoom or Teams with screen sharing | Low | 0.5–1 day |
| Unmoderated (remote) | Users test on their own (tools like Maze, UserTesting) | Low | Flexible |
| Guerilla testing | Spontaneous tests with passers-by (in a café for example) | Very low | 1–2 hours |
| A/B testing | Two variants tested against each other live | Medium | 1–4 weeks |
Writing a usability test script
A good test script contains:
- An introduction: welcome, explain the purpose, obtain consent
- Warm-up questions: general questions about the person and their media use
- Tasks: 5 to 7 concrete scenarios the user should solve
- Follow-up questions: "what did you expect?" and "what surprised you?"
- Closing questions: the overall impression, the SUS score (system usability scale)
Example tasks:
- "You are looking for a web design agency for your company. Find out which services are offered."
- "You want to enquire about a specific project. How would you go about it?"
- "You want to learn about the prices. Find the relevant information."
The most common usability problems
From our more than 3 years of experience at GoldenWing we keep seeing the same patterns:
- Unclear navigation: users do not find the content they want
- Missing calls to action: users do not know what the next step is
- Too much text: users scan, they do not read, and important information gets lost
- Slow load times: users leave the page before it has loaded fully
- Mobile problems: touch targets too small, horizontal scrolling, forms that are not optimised
Nielsen's 10 usability heuristics
Jakob Nielsen's 10 heuristics are the universal rule book for usable interfaces. They have formed the basis of every UX evaluation since 1994.
1. Visibility of the system status
The system has to inform the user at all times about what is happening, through appropriate feedback within an appropriate time.
Example: a loading bar when a form is submitted, a confirmation message after a newsletter sign-up.
2. A match between the system and the real world
The system should speak the language of the user, with familiar words, phrases and concepts.
Example: "cart" instead of "order aggregator", "send message" instead of "submit form".
3. User control and freedom
Users often select functions by accident and need a clearly marked emergency exit.
Example: an undo function, a back button, the option to cancel.
4. Consistency and standards
Users should not have to wonder whether different words, situations or actions mean the same thing.
Example: buttons designed the same way, identical navigation on every page, the same terminology.
5. Error prevention
Even better than good error messages is careful design that prevents errors in the first place.
Example: inline validation in forms, confirmation dialogues before destructive actions.
6. Recognition rather than recall
Minimise the memory load on the user. Objects, actions and options should be visible.
Example: recently visited pages, saved searches, visible filters.
7. Flexibility and efficiency
Shortcuts, invisible to the beginner, can speed up the interaction for the experienced user.
Example: keyboard shortcuts, favourites, quick actions.
8. Aesthetic and minimalist design
Dialogues should not contain irrelevant information. Every additional piece of information competes with the relevant ones.
Example: use whitespace, remove unnecessary elements, focus on the core message.
9. Error recognition, diagnosis and recovery
Error messages should be written in plain language, describe the problem exactly and suggest a constructive solution.
Example: "your email address is missing an @ sign" instead of "error 422: invalid input".
10. Help and documentation
Even though a system should ideally be usable without documentation, it can be necessary to provide help.
Example: tooltips, an FAQ section, onboarding tutorials, chat support.
Mobile UX: more than responsive design
Responsive design alone is not enough. Mobile UX calls for its own thinking, its own patterns and its own priorities.
Mobile first design principles
- Mind the thumb zone: the most important interactive elements have to sit within reach of the thumb (the lower two thirds of the screen).
- Touch targets: at least 44 by 44 px for tappable elements (Apple human interface guidelines).
- Form optimisation: as few fields as possible, native keyboard types (email, phone, number).
- Performance: mobile users are often out and about on a weak connection, every KB counts.
- Context: mobile users have different intentions than desktop users, so prioritise accordingly.
Mobile UX patterns
| Pattern | Description | Where to use it |
|---|---|---|
| Bottom navigation | The main navigation at the bottom of the screen | Apps, PWAs |
| Hamburger menu | A three line icon for hidden navigation | Websites, apps with many menu items |
| Pull to refresh | Pulling down to update | Feeds, lists |
| Skeleton screens | A placeholder layout while loading | Everywhere (instead of a spinner) |
| Floating action button | A round button for the main action | Material design apps |
| Swipe actions | Swiping for secondary actions | Email apps, lists |
Progressive web apps
Progressive web apps combine the best of web and app: they are reachable through the browser, they work offline and they can send push notifications. For many companies they are a cost efficient alternative to native apps.
The cost of UX design
What does professional UX design cost? Here are realistic benchmarks for the Austrian market.
Cost overview
| Service | Price range | Duration |
|---|---|---|
| UX audit (an existing website) | 1,500–4,000 € | 1–2 weeks |
| User research (5–8 interviews) | 2,000–5,000 € | 2–3 weeks |
| Wireframes (5–10 pages) | 2,000–6,000 € | 1–3 weeks |
| High fidelity prototype (clickable) | 3,000–8,000 € | 2–4 weeks |
| Usability testing (5 users) | 1,500–4,000 € | 1–2 weeks |
| A complete UX project | 8,000–25,000 € | 6–12 weeks |
When investing in UX pays off
Every euro invested in UX returns 100 euros on average (Forrester Research). The arithmetic is simple:
- A higher conversion rate: 1 percent more conversion means X euros more revenue
- Fewer support requests: intuitive interfaces reduce support costs
- Lower development costs: finding a mistake in the design is 10 times cheaper than finding it in the code
- Better customer retention: satisfied users come back and recommend you
Contact us for an individual quote for your UX project.
UX design trends 2026
1. Personalisation supported by AI
Interfaces that adapt to user behaviour in real time. Personalised navigation, content recommendations and adaptive layouts.
2. Voice user interfaces
Voice control is increasingly built into web interfaces, as a complement rather than a replacement for visual interaction.
3. Spatial design
With Apple Vision Pro and Meta Quest, spatial UX design becomes relevant. 3D interfaces, spatial navigation and immersive experiences.
4. Ethical design
Usability also means no dark patterns, transparent use of data, accessibility as the standard rather than a bonus.
5. Design systems
Large companies rely on scalable design systems (component libraries plus tokens plus guidelines) that keep things consistent across all touchpoints.
Frequently asked questions
What does a UX audit for my existing website cost?
A professional UX audit costs between 1,500 and 4,000 euros in Austria, depending on the size and complexity of the website. The audit covers a heuristic evaluation, an analytics review, a comparison with competitors and a prioritised action plan. At GoldenWing we deliver the audit report within 1 to 2 weeks.
How long does a complete UX design process take?
For a mid sized website (10 to 30 pages) expect 6 to 12 weeks from kickoff to the final design handoff. The duration depends on the size of the project, the number of stakeholders and the depth of iteration. At GoldenWing we work in agile two week sprints so you see interim results regularly.
Do I need UX research if I already know my audience?
Yes, definitely. Even when you know your audience well, there is always a difference between what you believe you know and what the data show. User research uncovers blind spots and delivers objective insight. Even experienced UX designers are regularly surprised by research findings.
Which tool is best for wireframing?
For most projects we recommend Figma. It is free for individuals, it offers collaboration in real time and it covers the whole workflow from wireframe to high fidelity prototype. For fast low fidelity wireframes Balsamiq is a good alternative, and for flowcharts Whimsical works excellently.
What is the difference between a wireframe and a mockup?
A wireframe shows the structure and the layout without visual details, it is like a floor plan. A mockup is a visually finished design with real colours, typography and images, it shows how the end product will look. In between sits the prototype, which adds interactivity (clickable, animated).
How do I test the UX of my website without a big budget?
You can gather valuable feedback even on a small budget. Use guerilla testing (ask 5 acquaintances to solve tasks on the website), heatmap tools (Hotjar has a free plan), Google Analytics for quantitative data and the 10 heuristics by Nielsen as a self audit checklist. Even these simple measures uncover the most serious UX problems.
Design systems: keeping the whole product consistent
A design system is far more than a collection of UI components. It is a shared language between designers and developers that ensures consistency, efficiency and scalability. Companies such as Airbnb, Shopify and Deutsche Telekom have reduced their development time by 30 to 50 percent through design systems.
The parts of a design system
1. Design tokens
Design tokens are the smallest units of a design system: colours, font sizes, spacing, animation speeds and shadows. They are defined centrally and can be translated into code automatically.
- Colour tokens: primary, secondary, error, success, warning plus their shades
- Spacing tokens: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
- Typography tokens: font family, font size, line height, weight
- Shadow tokens: elevation levels for depth and hierarchy
2. The UI component library
Reusable components such as buttons, forms, cards, navigation and modals. Every component has:
- Variants: primary, secondary, outline, ghost
- States: default, hover, active, disabled, loading, error
- Sizes: small, medium, large
- Documentation: when and how the component is used
3. The pattern library
Recurring UX patterns such as login flows, onboarding sequences, search functions or checkout processes. Patterns are more complex than single components and describe how several elements work together.
4. Guidelines and principles
Rules for tone of voice, imagery, iconography and accessibility. These guidelines make sure new team members create consistent designs as well.
Tools for design systems
- Figma: the standard for building design systems and component libraries
- Storybook: isolated development and documentation of UI components
- Tokens Studio (formerly Figma Tokens): exporting design tokens from Figma straight into code
- Chromatic: visual testing for components, it detects unintended visual changes
Introducing a design system: a pragmatic approach
For most Austrian companies a complete design system like the ones at Google or Atlassian is oversized. Start pragmatically:
- Take stock: collect all existing UI elements from your website or app
- Consolidate: identify inconsistencies (7 different button styles for example)
- Define a core set: settle on the 15 to 20 most important components
- Document: create simple documentation in Figma or Storybook
- Iterate: extend the system step by step, based on what the team needs
A pragmatic design system for a smaller company can be built in 2 to 4 weeks and then saves 20 to 40 percent of development time on every new feature.
UX writing: microcopy that converts
UX writing, also known as microcopy, covers all the text elements in an interface: button labels, error messages, tooltips, placeholder text, confirmation messages and navigation labels. These short texts have a surprisingly large influence on the conversion rate.
Why microcopy matters so much
A study by Google shows that well written error messages can raise the form completion rate by up to 22 percent. The reason: microcopy reduces uncertainty, answers questions at the right moment and guides users safely through complex processes.
The principles of good microcopy
1. Clarity before creativity
A button saying "try it free now" converts better than one saying "let's go". Users have to understand immediately what happens when they click.
2. Phrase it around the benefit
Not "submit" but "request a quote"
Not "register" but "start for free"
Not "subscribe to the newsletter" but "get SEO tips"
3. Address fears
Add reassurance near forms and buttons:
- "No credit card required"
- "Cancel at any time"
- "Your data are transmitted encrypted"
- "We do not pass your email address on"
4. Human and empathetic
Error messages should help, not accuse:
- Bad: "invalid input in field 3"
- Good: "please enter a valid email address, for example name@company.at"
Microcopy for the Austrian market
In the German speaking market and in Austria in particular, specific rules apply:
- The formal address: use the formal "Sie" in business contexts. The informal "du" is only appropriate for explicitly young, casual brands.
- Local phrasing: use "E-Mail-Adresse" instead of "E-Mail", "Handynummer" instead of "Mobilnummer"
- Texts that comply with the GDPR: checkbox texts in forms have to meet the legal requirements and still be understandable
- Currency and formats: "EUR" or the euro sign, the date format DD.MM.YYYY, phone numbers with the country code +43
Testing microcopy
Test different variants with A/B tests:
- Button texts: "enquire now" versus "get a free quote"
- Form labels: "company" versus "business" versus "company name"
- Error messages: technical versus human phrasing
- CTA texts: active versus passive, short versus long
Even small changes to the text can shift the conversion rate by 5 to 15 percent. Invest time in optimising your microcopy, the return is enormous.
Accessibility in UX design: accessible from the start
Accessibility is not only an ethical obligation, it is increasingly a legal requirement. The Austrian accessibility act (BaFG), in force in Austria from June 2025, obliges companies to make their digital products and services accessible.
Who benefits from accessibility?
- 15 to 20 percent of the population live with some form of disability
- Older users (over 65) often have limitations of sight, motor skills or cognition
- Situational limitations: users with a broken arm, in a loud environment or in bright sunlight
- All users benefit from better legibility, clear navigation and a logical structure
Understanding the WCAG guidelines
The web content accessibility guidelines (WCAG) 2.2 define three levels of conformance:
- Level A: the minimum requirements (alt text for images, keyboard navigation)
- Level AA: the standard for most websites (colour contrast 4.5:1, form labels)
- Level AAA: the highest level (sign language videos, contrast 7:1)
The Austrian accessibility act follows WCAG 2.1 level AA, which is the minimum requirement for Austrian companies.
The most important accessibility measures
Visual:
- Colour contrast: at least 4.5:1 for normal text, 3:1 for large text. Check it with the WebAIM contrast checker.
- Not colour alone: never use colour as the only distinguishing feature (mark red error messages with an icon and text as well)
- Scalable text: the website has to stay fully usable at 200 percent zoom
- Focus indicators: visible outlines on focused elements for keyboard users
Structural:
- Semantic HTML: use '<nav>', '<main>', '<article>', '<aside>' instead of generic '<div>' elements
- ARIA labels: for interactive elements without visible text (icon buttons for example)
- Heading hierarchy: a logical order H1 > H2 > H3 without jumps
- Landmark regions: mark the main areas of the page with ARIA landmarks
Interactive:
- Keyboard navigation: every function has to be reachable by keyboard (tab, enter, escape, arrow keys)
- Skip links: a hidden link at the top of the page that jumps straight to the main content
- Forms: every input field needs an associated label, error messages have to be clear and understandable
- Timeouts: users have to be able to extend or switch off time limits
Accessibility testing tools
- axe DevTools (a browser extension): an automated WCAG check right in the browser
- WAVE (web accessibility evaluation tool): a visual overlay showing accessibility problems
- Screen reader testing: test with VoiceOver (macOS), NVDA (Windows) or TalkBack (Android)
- The Lighthouse accessibility score: a first overview, but it covers only around 30 percent of the WCAG criteria
Building accessibility into the design process
Accessibility is not an add-on afterwards, it has to be anchored in the design process from the start:
- User research: include people with disabilities in the research
- Wireframing: define the focus order and the landmark structure already in the wireframe
- Design: settle contrast, font sizes and touch targets (at least 44 by 44 px)
- Development: implement semantic HTML, ARIA attributes and keyboard interaction
- Testing: automated tests AND manual tests with assistive technology
UX metrics: measuring the success of UX work
UX design is not an art whose success is judged subjectively, it is a discipline driven by data. The right metrics help you prove the ROI of your UX investments and make well founded design decisions.
Metrics based on behaviour
Task success rate
The percentage of users who complete a given task successfully. Measure it for critical flows such as registration, checkout or a contact enquiry.
- A good value: above 85 percent for simple tasks, above 70 percent for complex ones
- How to measure it: usability testing with defined tasks, funnel analysis in analytics
Task completion time
How long do users need to complete a task? Compare the actual time with the expected ideal time. Large deviations point to UX problems.
Error rate
How often do users make mistakes while using the product? Track:
- Form validation errors per field
- Clicks on elements that are not clickable (rage clicks)
- Steps back in the navigation (a sign of disorientation)
Metrics based on attitude
System usability scale (SUS)
A standardised questionnaire of 10 questions that measures perceived usability on a scale from 0 to 100.
- Below 50: a serious usability problem
- 50 to 68: below average
- 68 to 80: above average
- Above 80: excellent
The SUS is particularly valuable because it is comparable, you can compare your scores with industry benchmarks and with earlier versions.
Net promoter score (NPS)
"How likely is it that you would recommend our product?" (0 to 10). The NPS measures overall satisfaction and correlates strongly with retention.
- Promoters (9 to 10): enthusiastic users
- Passives (7 to 8): satisfied but not loyal users
- Detractors (0 to 6): dissatisfied users
- NPS = percentage of promoters minus percentage of detractors
A good NPS for digital products in the German speaking market is +30 to +50.
Customer effort score (CES)
"How easy was it to complete your task?" (1 to 7). The CES measures the perceived effort and is a strong predictor of customer loyalty. Low values (little effort) correlate with more repeat use and less churn.
Business metrics related to UX
Connect UX metrics with business figures to prove the ROI of UX investments:
- Conversion rate: what percentage of visitors become customers?
- Cart abandonment rate: how many users abandon the checkout? (the industry average is 65 to 70 percent)
- Support ticket volume: fewer UX problems mean fewer support requests
- Customer lifetime value: good UX raises retention and with it the value of a customer
- Time to value: how quickly do new users experience the first moment of insight?
Building a UX measurement framework
Implement a structured measurement framework:
- Define goals: what exactly should the UX work improve? (raise the checkout completion rate from 30 to 40 percent, for example)
- Measure the baseline: where do you stand today? Document the current state before the change
- Implement tracking: set up event tracking in Google Analytics 4, Hotjar or Mixpanel
- Evaluate regularly: monthly UX reports with trend analysis
- Iterate: optimise based on the data and measure again
A tip from practice: build a UX dashboard with the 5 to 8 most important metrics and review it every two weeks. Combine quantitative data (analytics) with qualitative insight (usability tests, user feedback) to get the full picture.
Collaboration in the UX process: involving stakeholders and handling feedback
Outstanding user experience design never happens in a vacuum. The best digital products are the result of structured collaboration between UX designers, developers, product managers, marketing teams and, decisively, the stakeholders on the company side. In Austrian companies in particular, where decision paths are often hierarchical, a well considered collaboration process is the key to a successful project.
Why involving stakeholders decides success or failure
Studies show that UX projects in which stakeholders are involved early and continuously have a success rate 47 percent higher than those where the design team works in isolation. The reason is obvious: stakeholders bring knowledge critical to the business that no desk research can replace.
- Business goals and priorities: only the departments know which conversion goals really matter
- Understanding of customers: sales teams know the most common objections and questions of the audience first hand
- Technical constraints: the IT department can point out limitations early, before expensive redesigns become necessary
- Compliance and regulation: in the German speaking market the GDPR and industry specific rules play a central role
Stakeholder mapping: identifying the right people
Before you schedule the first workshop you should map the stakeholders systematically. Categorise everyone involved by influence and interest:
- High influence, high interest (management, the product owner for example): these people have to be involved in decisions actively. Schedule regular alignment meetings and obtain their explicit approval for critical design decisions.
- High influence, low interest (the head of IT, the legal department for example): inform these stakeholders proactively about progress and potential effects on their areas. Detailed design reviews make less sense here.
- Low influence, high interest (customer service, the content team for example): use their expertise as a valuable source of input for user insight without burdening them with decision making responsibility.
- Low influence, low interest (external partners for example): keep this group up to date with summary updates.
Structured feedback methods for efficient alignment
Unstructured feedback is the biggest enemy of a productive UX process. When stakeholders discuss colours, layouts and copy spontaneously in a meeting, that rarely leads to usable results. Rely on proven methods instead:
Design critiques instead of free discussion: give every feedback session a clear structure. Define in advance the questions you need answered. For example: "does this layout support guiding the user to the contact form?" instead of "what do you think of the design?"
Asynchronous feedback with annotation tools: tools such as Figma, Miro or InVision let stakeholders comment directly on the design. That saves meeting time and delivers more precise feedback. Set a feedback deadline of at most 48 hours so the process does not stall.
Dot voting for prioritisation: when several design options are up for debate, give every stakeholder a limited number of votes. That prevents endless discussion and makes preferences transparent.
Processing feedback and resolving conflict
Not every piece of stakeholder feedback is equally relevant, and contradictory feedback is the rule rather than the exception. Develop a clear framework for handling it:
- Categorise every piece of feedback as "supported by data" (based on user research or analytics) or "based on opinion" (a personal preference)
- Prioritise feedback supported by data above subjective opinion as a matter of principle
- Document every design decision with its reasoning in a decision log
- Communicate transparently why certain suggestions are not implemented, that creates trust and understanding
When stakeholders disagree, the principle "user first, business second, opinion last" has proven itself in the German speaking market. If you can support a design decision with user data, that evidence should outweigh individual taste. When solid data are missing, schedule a quick A/B test or usability test to found the decision objectively.
Workshop formats for productive collaboration
For Austrian companies these proven workshop formats are worth using:
- A design sprint (5 days): ideal for complex problems where stakeholders from various departments develop and test a prototype together
- Stakeholder interviews (60 minutes per person): structured one to one conversations at the start of the project to identify expectations, goals and potential conflicts early
- Co-creation workshops (3 to 4 hours): developing ideas together with sticky notes, sketches and rapid prototyping, particularly effective when subject experts and designers work as equals
- Review sessions (90 minutes): regular presentations of the current state of the design with structured feedback against predefined criteria
The key is to see stakeholders not as a disturbance but as a valuable source of knowledge. If you set the collaboration process up properly you benefit from deeper insight, greater acceptance and ultimately a better product for your users.
Conclusion: UX design as a competitive advantage
Good UX design is not a cost factor, it is an investment with a measurable return. In a market where products become ever more interchangeable, the user experience is often the decisive differentiator.
The most important steps:
- Understand your users (research, personas, journey maps)
- Structure before you style (wireframes, information architecture)
- Test prototypes instead of discussing designs (usability testing)
- Iterate based on data (analytics, test results)
- Think mobile first (touch targets, performance, context)
Would you like to take the user experience of your website or app to the next level? At GoldenWing we accompany you through the whole UX process with more than 3 years of experience. Contact us for a first conversation without obligation.
Professional UX and UI design for your website: web design from Vienna, from the wireframe phase to the finished design.



