UX Website Redesign Process Explained

The ux website redesign process is what separates redesigns that improve business outcomes from redesigns that simply look different.

A site that converts at twice its predecessor's rate was built on user research, structured information architecture, and validated prototypes. A site that looks fresh but performs identically was not.

Most failed redesigns skipped the research phase, not the design phase.

This guide walks through each stage of the UX process in the order it must happen, with the tools, deliverables, and decision criteria for each phase.

Key Takeaways

• UX starts before design: User research, analytics analyzis, and competitive benchmarking happen before any wireframe is drawn or layout considered.
• Research is not optional: Designs built without user research impose team assumptions on the audience, and those assumptions are frequently wrong.
• Wireframes are communication tools: Their purpose is to validate structure before visual design investment, not to demonstrate design skill.
• Usability testing precedes development: Finding structural problems in wireframes costs hours to fix; finding them post-launch costs weeks.
• UX is iterative: Expect feedback loops between research, wireframing, and testing. This iteration is how UX quality is achieved.

Webflow Development Services

Webflow Experts On-Demand

Whether you're starting fresh or need a full revamp—we create fast, modern Webflow sites built for growth.

Let's talk

Phase 1: Research and Discovery

Research is the foundation that every subsequent phase depends on. Skipping or compressing this phase is the single most expensive decision in a UX redesign process.

Applying UX principles for website redesign starts with understanding what the current site does well, where it fails, and what users actually need before designing a replacement.

Analytics Audit: Understanding Current User Behavior

GA4 data from the current site contains a detailed account of where the redesign must improve. The analyzis must be systematic to surface the most actionable insights.

• Exit rate analyzis: Pages with high exit rates identify where users abandon their session and where the redesign must deliver improvements.
• Traffic source breakdown: Understanding which channels drive the most valuable traffic informs which pages must perform best for those specific visitor types.
• Conversion funnel mapping: Charting drop-off at each step of the primary conversion flow identifies the highest-leverage pages for UX improvement.
• Device and browser split: Mobile vs. desktop usage ratios determine how much design effort should prioritize each experience type.

Analytics data answers the "where" and "how much" questions. User research answers the "why." Both are required for a complete understanding of what the redesign must fix.

User Research: Interviews and Session Recordings

Qualitative research methods surface the motivations, frustrations, and mental models that quantitative data alone cannot explain.

• Customer interviews: Five to eight interviews focused on how users discover, navigate, and use the current site reveal the gaps between designed intent and actual behavior.
• Session recording analyzis: Hotjar or Microsoft Clarity recordings of real user sessions on the current site show hesitation, rage clicks, and navigation confusion patterns.
• Support ticket review: Recurring questions submitted to support teams often reflect site content that is hard to find, unclear, or missing entirely.
• Stakeholder interviews: Internal interviews with sales, support, and marketing teams surface the customer language, objections, and questions that the site should address.

User research that reveals three or four major navigation or content problems before wireframing begins typically pays for itself in reduced revision cycles alone.

Competitive UX Benchmarking

Systematically reviewing competitor websites for UX patterns identifies the conventions your redesign should adopt and the opportunities to differentiate meaningfully.

• Navigation structure analyzis: Document the primary navigation structures of four to six competitors to identify category label conventions and information architecture patterns.
• CTA placement mapping: Note where competitors place primary and secondary CTAs, what language they use, and which conversion mechanisms appear most frequently.
• Content hierarchy review: Compare how competitors sequence information on homepages and service pages to understand the patterns visitors have been conditioned to expect.
• Differentiation opportunities: Note where competitor sites consistently have poor UX, these are the areas where a superior redesign can create meaningful competitive advantage.

Competitive benchmarking takes one day to complete and produces a prioritized map of both table-stakes requirements and differentiation opportunities that informs the entire redesign.

Heuristic Evaluation of the Current Site

A systematic evaluation of the current site against established usability heuristics creates a prioritized problem list before any redesign decision is made.

• Nielsen's 10 heuristics: Visibility of system status, match to real world, user control, consistency, error prevention, recognition over recall, flexibility, aesthetic minimalism, error recovery, and documentation.
• Problem severity rating: Each heuristic violation is rated on severity from cosmetic to catastrophic, enabling prioritization of which problems must be solved first.
• Evidence documentation: Screenshots and annotations documenting each violation create a baseline that can be compared against the redesigned site after launch.
• Stakeholder communication: A heuristic evaluation report gives non-technical stakeholders a structured, evidence-based understanding of why a redesign is needed.

A heuristic evaluation of the current site takes two to four hours and produces the research foundation for the business case and the design brief simultaneously.

Phase 2: Defining the Information Architecture

Information architecture defines the structure that visual design will be applied to. Architecture decisions made without research produce sites that look beautiful and confuse visitors.

The hire a UX designer for redesign decision is most important at this phase, where information architecture expertise directly determines navigational effectiveness.

Site Mapping and Page Hierarchy

The site map defines every page in the new site, its position in the hierarchy, and its relationship to the navigation structure.

• Research-driven structure: Build the site map based on user interview insights and analytics data about which content serves which audience tasks.
• SEO integration: Map high-priority keywords to specific pages in the hierarchy to ensure the architecture supports both user tasks and organic search visibility.
• URL architecture decisions: Define URL structures at the site mapping stage so content migration, redirect planning, and analytics setup can begin in parallel.
• Stakeholder review gate: The site map is the right moment for stakeholder review, before wireframe investment makes structural changes expensive.

A reviewed and approved site map is the most important single document in a UX redesign process. Every subsequent deliverable builds on it.

User Journey Mapping

User journey maps define the specific paths that different user types take through the new site to complete their primary tasks.

• Primary journey identification: Identify the three to five tasks that represent the highest volume and highest-value user behaviors on the site.
• Step-by-step mapping: For each journey, map every page visit, decision point, and content interaction from arrival to completion of the goal.
• Emotional state annotation: Note the expected emotional state of the user at each step to inform copy tone, CTA language, and content emphasiz.
• Drop-off risk identification: Journey maps make the highest-risk abandonment points visible before wireframing begins, enabling proactive design responses.

Journey maps convert research insights into design specifications that the visual design team can apply directly to wireframe and layout decisions.

Card Sorting for Navigation Validation

Card sorting reveals how users naturally group content, providing the mental model data that should drive navigation category decisions.

• Open card sort process: Participants are given content items written on digital or physical cards and asked to group them in ways that feel intuitive to them.
• Category naming: After grouping, participants name each group. These names often directly inform the navigation label language the redesign should use.
• Pattern analyzis: When ten or more participants complete the exercise, clear grouping patterns emerge that reveal where user mental models align or diverge from internal categorization.
• Tool options: Optimal Workshop's OptimalSort and Maze both run remote card sorts efficiently with participant pools or recruited users.

Card sorting is the only reliable method for knowing whether a proposed navigation structure matches how users actually think about the site's content before it is built.

Phase 3: Wireframing and Prototype Development

Wireframing translates the approved information architecture into page layouts, conversion flows, and component structures before any visual design investment.

Detailed guidance on wireframes in website redesign covers the full range of wireframe types and their role at each stage of the UX process.

Low-Fidelity Wireframes for Structure Validation

Low-fidelity wireframes communicate page structure, content hierarchy, and conversion flow without visual design details that distract from structural feedback.

• Grayscale convention: Removing color and visual polish forces reviewers to focus on structure, hierarchy, and content decisions rather than aesthetic preferences.
• Placeholder content: Lorem ipsum text in body sections makes clear that content is not finalized, preventing premature copy editing discussions during structure review.
• Key element representation: Headings, body text, images, CTAs, and form fields should be represented at approximately correct proportions even without visual design.
• Rapid iteration: Low-fidelity wireframes should be created quickly and revised freely. Their value is in iteration speed, not in presentational quality.

Low-fidelity wireframes are the cheapest and most flexible form of design artifact. Iterations at this stage cost minutes. Iterations at build stage cost days.

Mid-Fidelity Wireframes With Real Content

Mid-fidelity wireframes advance the concept by adding real content, accurate spacing, and UI element definitions that prepare for high-fidelity visual design.

• Real content integration: Adding actual headlines, subheadlines, and body copy reveals whether the content fits the layout and whether the hierarchy communicates clearly.
• Spacing accuracy: Approximate spacing between elements that reflects final design intent prevents layout surprises when visual design is applied.
• Component identification: Name and categorize repeating UI elements as components at this stage to inform the design system work that follows in Phase 5.
• Responsive annotations: Note how each section of the layout behaves at mobile widths to prevent desktop-only thinking during visual design.

Mid-fidelity wireframes are typically the right level for stakeholder review before visual design investment begins. They are specific enough to evaluate and flexible enough to change.

Clickable Prototypes for Journey Testing

Connecting wireframe frames in Figma to simulate user journeys enables usability testing before any visual design or development work begins.

• Journey simulation: Link pages, buttons, and navigation items to simulate the primary user journeys mapped in Phase 2 without writing any code.
• Form interaction: Multi-step form flows, error states, and success screens can be simulated in prototype to test the full conversion experience.
• Navigation testing: Prototype navigation interactions test whether the proposed structure enables users to find what they need efficiently.
• Test preparation: A clickable prototype enables the usability testing described in Phase 4 to proceed with realistic journey simulation for each test task.

Clickable prototypes are the most important usability testing investment in a UX redesign process because they make testing possible before any development cost has been incurred.

Phase 4: Usability Testing

Usability testing validates that the proposed structure and content work for real users before visual design and development investment is committed.

The Figma in website redesign workflow, including prototype-based testing, is the standard for validating UX decisions before they become development commitments.

Moderated Usability Testing

Moderated testing involves a facilitator observing a participant completing tasks on the prototype and asking follow-up questions to understand behavior.

• Task design: Each test task should reflect a primary user journey from the journey maps: "find the pricing page and start a free trial" rather than "explore the site."
• Observation method: The facilitator observes and notes hesitation, incorrect paths, and explicit expressions of confusion without guiding the participant toward the correct path.
• Think-aloud protocol: Asking participants to verbalize their thinking as they navigate provides insight into the reasoning behind navigation choices and confusions.
• Recording for sharing: Screen and audio recording of sessions enables sharing key moments with stakeholders who did not observe the sessions live.

Five to six participants in moderated usability testing typically surfaces 80 percent of the major usability problems, according to research by Jakob Nielsen.

Unmoderated Testing With Maze or UsabilityHub

Unmoderated testing tools connect directly to Figma prototypes and enable larger sample sizes at lower cost than moderated sessions.

• Maze integration: Maze connects directly to Figma prototypes and records participant click paths, time-on-task, and task success rates automatically.
• UsabilityHub tests: First-click tests, preference tests, and five-second tests in UsabilityHub provide rapid feedback on specific design decisions without full journey testing.
• Sample size advantage: Unmoderated testing with 20 to 30 participants produces statistically more reliable completion rate data than a smaller moderated sample.
• Turnaround speed: Unmoderated tests can be completed and analyzed within 48 hours, making rapid iteration between prototype versions achievable.

Unmoderated and moderated testing are complementary rather than alternatives. Use moderated testing for discovery and unmoderated testing for validation of specific design hypotheses.

What to Do With Usability Test Findings

Test findings must be processed systematically to produce actionable design improvements rather than an undifferentiated list of observations.

• Issue categorization: Group findings by location (homepage navigation, contact form, service pages) and type (wayfinding, content comprehension, conversion path).
• Severity assessment: Rate each issue by frequency (how many participants encountered it) and impact (how significantly it impaired task completion).
• Effort vs. impact prioritization: Map issues on an effort-to-fix versus impact-on-success matrix to prioritize which wire frame revisions happen before visual design begins.
• Stakeholder reporting: A structured findings report with video clips from sessions communicates UX problems to non-UX stakeholders more effectively than written descriptions alone.

Usability test findings not acted upon before visual design begins simply become post-launch problems that are more expensive to fix. Testing's value is only realized in the iteration that follows.

Phase 5: High-Fidelity Design and Design System

High-fidelity visual design should be applied to a validated wireframe structure. Starting visual design before structure validation turns the most expensive design rework into a likely outcome.

Following website redesign best practices at this phase means treating the design system as the primary deliverable, not individual page designs.

Building on the Wireframe Foundation

The relationship between validated wireframes and high-fidelity design is sequential, not parallel. Visual investment in an unvalidated structure is a structural risk.

• Structural lock before visual start: Confirm that all significant wireframe revisions from usability testing are complete and approved before high-fidelity design begins.
• Component identification carry-forward: Components identified in mid-fidelity wireframes become the starting point for the design system component library in Figma.
• Content accuracy: Final copy should be provided before high-fidelity design begins to ensure typography, spacing, and layout decisions are made with real content in place.
• Design QA against wireframes: Each high-fidelity design should be checked against its wireframe to confirm that validated structural decisions have been implemented correctly.

Visual design applied to a validated wireframe is an execution task. Visual design applied to an unvalidated structure is both an execution task and a structural risk simultaneously.

Creating a Design System for Consistency

A design system is the set of reusable design tokens, components, and patterns that ensure visual consistency across every page of the site.

• Color tokens: Define primary, secondary, semantic, and neutral color values as named tokens that are applied consistently across all components and pages.
• Typography scale: Establish type size, weight, and line height values for each heading level and body text variation used across the site.
• Spacing system: A consistent spacing scale (8px base or similar) applied to all padding, margin, and layout gap values prevents visual inconsistency.
• Component library: Button variants, form field states, card patterns, and navigation components built as reusable Figma components that map to development components.

A design system is not an overhead cost. It is what makes a redesign maintainable, extensible, and visually coherent one year after launch when multiple designers and developers have touched it.

Designing for Accessibility

Accessibility requirements addressed during the design phase cost a fraction of the same requirements addressed during development or post-launch remediation.

• Color contrast ratios: Text on all backgrounds must meet WCAG 4.5:1 contrast ratio for normal text and 3:1 for large text, verified with a contrast checker before development.
• Focus state design: Visible keyboard focus indicators must be designed for every interactive element, not left to browser defaults that often fail contrast requirements.
• Touch target sizing: Interactive elements must meet minimum 44x44 pixel touch target size for mobile accessibility, designed into components rather than added after build.
• Alt text conventions: Document the conventions for alternative text for each image type used on the site so the development team applies them consistently.

Accessibility decisions made in design cost hours. Accessibility issues discovered in a post-launch audit cost weeks of development remediation and, in some cases, legal exposure.

Key UX Elements That Determine Redesign Success

Some UX factors have disproportionate impact on redesign outcomes. Understanding which ones to prioritize guides design effort effectively. The elements of successful redesign consistently include the same three high-leverage design decisions regardless of industry.

Clear Value Proposition Above the Fold

Every key landing page must communicate the primary value proposition within the first viewport. Users who cannot immediately understand what a site offers leave within seconds.

• One-sentence test: The homepage hero copy should answer "what do you do and for whom" in a single headline without requiring the visitor to scroll.
• Visual hierarchy support: The value proposition headline should have the highest visual weight on the page, not compete with a decorative hero image or animation.
• Supporting subheadline: A subheadline that adds specificity to the headline claim helps visitors self-qualify in the first two seconds of the visit.
• Immediate CTA: A primary CTA in the hero section captures high-intent visitors who are ready to act before they scroll further down the page.

Above-the-fold clarity is not a design trend. It is the condition for every subsequent UX element on the page to work.

Conversion Architecture: One Primary Action Per Page

Each page should drive one primary conversion action. Pages that present multiple competing primary CTAs consistently convert less than pages with a single clear primary action.

• Singular page intent: Define the one action each page should drive before designing it. All visual hierarchy, copy, and CTA placement flows from that definition.
• Primary CTA prominence: The primary CTA should be the most visually prominent interactive element on the page, positioned above the fold and repeated at the page bottom.
• Secondary CTA option: For users not ready to complete the primary action, a secondary CTA ("download the guide," "see case studies") captures engagement rather than losing the visitor entirely.
• Distraction audit: Review every page after design for elements that compete with the primary CTA for visual attention and eliminate or subordinate them.

Conversion architecture is a design discipline, not a copywriting discipline. The layout, visual hierarchy, and CTA placement decisions matter more than the specific words on the button.

Mobile UX as a First-Class Concern

Mobile UX must be designed as a distinct experience, not derived from the desktop design as an afterthought.

• Mobile-first workflows: Design the mobile experience in Figma before the desktop experience for new project types where mobile traffic exceeds 50 percent.
• Touch target priority: Navigation items, buttons, and form fields must be designed to minimum 44x44 pixel touch targets from the start, not retrofitted after desktop completion.
• Mobile navigation patterns: Hamburger menus, bottom navigation bars, and priority-plus patterns each serve different mobile use case profiles and should be selected deliberately.
• Form input optimization: Mobile forms should use appropriate input types, autocomplete attributes, and minimal field counts to reduce the friction of form completion on a small screen.

LOW/CODE Agency treats mobile UX as a primary design deliverable on every project, recognizing that mobile-first design produces better outcomes at every screen size.

Conclusion

A rigorous UX website redesign process takes more time upfront. It also eliminates the post-launch problems that cost more to fix than the entire research phase would have cost to conduct.

Every hour spent in discovery and validation prevents days of remediation after launch.

Start this week by running a heuristic evaluation of your current site using Nielsen's 10 usability heuristics.

Note the three biggest problems you find. That list is your UX redesign priority brief, and it costs nothing to produce.

Webflow Development Services

Webflow Experts On-Demand

Whether you're starting fresh or need a full revamp—we create fast, modern Webflow sites built for growth.

Let's talk

LOW/CODE Agency Leads Every Redesign With a Research-First UX Process

LOW/CODE Agency applies a structured UX process to every website redesign: user research and analytics audit, information architecture design, wireframe development, usability testing, and design system creation before any development begins.

We work as a strategic product team, not a dev shop. Every engagement includes a Phase 1 research deliverable that gives stakeholders evidence-based design direction before a single layout decision is made.

• User Research and Analytics Audit: GA4 analyzis, user interviews, session recording review, and heuristic evaluation delivered as a research brief that drives every subsequent design decision.
• Information Architecture Design: Site mapping, user journey mapping, and card sorting research producing a validated content structure before wireframes begin.
• Wireframe Development: Low, mid, and high-fidelity wireframes in Figma built sequentially with stakeholder review gates at each stage to prevent expensive late revisions.
• Usability Testing: Moderated and unmoderated usability testing on Figma prototypes before visual design investment, with structured findings and design recommendations.
• Design System Creation: Token-based color, typography, spacing, and component system in Figma and in-platform, ensuring visual consistency and maintainability post-launch.
• Accessibility Integration: WCAG 2.1 AA compliance checked and documented at every design phase, from color contrast to focus state design to touch target sizing.
• Post-Launch Conversion Optimization: Ongoing A/B testing, heatmap analyzis, and UX iteration for retainer clients based on real user behavior data after launch.

Our clients include Coca-Cola, American Express, and Sotheby's. We have shipped over 350 digital products worldwide. Explore our UX-driven website redesign services or Start with a scoping call to discuss your UX redesign goals.