Website Redesign & WordPress Implementation

Overview

Paragon is a UX consultancy specialized in usability research, digital strategy, and web positioning. As a service-based, B2B consultancy, its website plays a critical role in building credibility and generating qualified leads.

This project focused on restructuring and redesigning the digital experience to align the brand’s positioning with a clearer value proposition, stronger trust signals, and a mobile-first foundation built for scalability.

Tools

Project Snapshot

  • Role:
    UX Research · UI Iteration · WordPress Development
  • Duration:
    8 Weeks (Oct 2025)
  • Team:
    6 cross-functional collaborators (Manager, Team Lead, Research, Architecture, UI)
  • Business Model::
    B2B UX Consultancy focused on lead generation
  • Tools
    Figma · Miro · WordPress · Adobe Creative Cloud
  • Status::
    Mobile-first live · Desktop version in development
mobile01

The Challenge

The existing website lacked structural clarity and failed to communicate the consultancy’s expertise effectively. It did not generate the expected impact in terms of trust, differentiation, or conversion.

Strategic Objective

Create a website that builds trust, reinforces credibility, and clearly communicates the brand’s value proposition — while improving lead generation and conversion pathways.

This required aligning research insights, structure, visual system, and implementation into one cohesive experience.

Strategic Approach

Instead of beginning with UI, we rebuilt the experience from the inside out.

Process

Core user flows mapping content discovery paths and conversion points, from homepage exploration to subscription and community entry.

Analysis

Review of user research outputs (interviews, personas, qualitative insights) provided by the research team

Findings

Card sorting to align content structure with user mental models

Understanding

Competitive analysis and IA benchmarking

Definition

Definition of sitemap and core user flows

Prototyping

Mid-to-high fidelity prototyping in Figma

Testing

User testing on the Figma prototype

Iterations on

- Navigation and content grouping
- Homepage structure
- Visual hierarchy and color usage

Implementation

Mobile-first WordPress implementation from scratch

Research & Discovery

Competitor Analysis

My initial role focused on UX research and foundational insights.

  • Conducted user interviews
  • Developed user personas
  • Created empathy maps
  • Contributed to competitor analysis
  • Helped identify user expectations and decision drivers

We analyzed over 30 competitor websites (direct, indirect, and best-in-class), narrowing down to 6 key references.

Key Insights

  • Clear, concise communication builds authority
  • Minimalist, card-based layouts increase scannability
  • High-contrast design improves readability and perceived professionalism
  • Limited, purposeful interactions reduce friction
  • Trust signals and structured service explanations are critical in B2B consultancy models

These findings informed both structural and visual decisions moving forward.

User Flows

Information Architecture

This included:

  • Auditing the existing hierarchy and content logic
  • Redefining the sitemap and full navigation system
  • Designing structured user flows aligned with business goals
  • Definition of page relationships and content grouping

The objective was to simplify the experience while strengthening the conversion path.

Site Map

UI Iteration & Design System

Low-fi wireframes were built in Figma for all website’s pages to establish a clear information structure and identify potential issues early on, before moving into the design process.
After validating the Lo-Fi structure, we moved into Hi-Fi design.

  • Color palette refinement centered around purple, pink and light blue
  • Accessibility-driven contrast testing
  • Component iteration and system adjustments
  • CTA hierarchy optimization
  • Design system adjustments based on evolving requirements

Late in the design phase, several predefined color variables and components required restructuring. Instead of patching inconsistencies, I recalibrated the system to maintain coherence and scalability.

This reinforced system-level thinking and adaptability under real project constraints.

Design System

Typography: Optimized for readability in long-form content

Color system: Designed to reinforce hierarchy and guide attention.

Mobile-First WordPress Implementation

The website was designed and developed mobile-first from scratch.

We implemented the approved designs directly in WordPress, ensuring:

  • Structural fidelity between design and production
  • Reusable and scalable layout architecture
  • Clean visual hierarchy and spacing
  • Performance-conscious layout logic

Desktop and tablet versions are currently being developed, expanding on the validated mobile foundation.

The outcome was not just a redesigned interface — but a deployable, scalable platform.

handmobile

User testing revealed friction in homepage navigation and visual clarity.

Impact

While performance metrics were not publicly available, structural and experiential improvements were clear:

  • Stronger value proposition clarity
  • Reduced navigation friction
  • More intentional conversion paths
  • Consistent visual system adopted team-wide
  • Scalable architecture prepared for growth

This project demonstrates my ability to connect UX structure, UI systems, and WordPress implementation into a cohesive digital product.

Mobileservicios

Key Takeaways

While no hard metrics were available, the project delivered clear qualitative outcomes:

  • Architecture precedes aesthetics.
  • Credibility is built through clarity, not decoration.
  • System thinking prevents late-stage fragmentation.
  • Mobile-first enforces prioritization.
  • Cross-functional collaboration strengthens strategic alignment.

Visit the live website:

uxparagon.com