Research White Paper: UX Design, Information Architecture and Wireframing for Websites, Web Apps and eCommerce

Designing Better Magento, WordPress and Joomla Experiences Through Information Architecture, Wireframing, Prototyping and Conversion-Centered UX

Primary platforms: Magento / Adobe Commerce, WordPress / WooCommerce, Joomla
Example frontend: Hyvä Theme for Magento
Wireframing example: WireframeSketcher
Audience: SME owners, product managers, marketers, UX/UI designers, web developers, eCommerce teams and digital-transformation consultants

Executive Summary

A successful website is not simply a collection of attractive pages.

It is a user interface built on an information architecture, a set of user journeys, a content strategy, a visual system and a conversion strategy.

This distinction is particularly important for Magento, WordPress, WooCommerce and Joomla projects. These platforms make it relatively easy to install a theme, add extensions and publish pages. The difficult part is deciding what the user should see, what the user should do, how the information should be organized, and how the experience should lead toward a measurable business outcome.

A poorly planned website can therefore become expensive even when the underlying CMS is technically sound.

The central argument of this white paper is:

UX design should begin before theme development—not after the website has already been built.

A disciplined UX process should move through:

Business objectives → user research → personas → information architecture → content architecture → user journeys → wireframes → prototypes → visual design → development → usability testing → analytics → continuous optimization.

This approach is especially valuable for eCommerce because navigation, product discovery, search, product comparison, checkout and post-purchase communication directly influence revenue.

The principles of Information Architecture are particularly important. Rosenfeld, Morville and Arango describe IA around fundamental systems including organization, labeling, navigation, search and metadata, while their design process connects research and strategy with sitemaps, wireframes, prototypes and implementation. (Google Books)

The result is a more disciplined approach to Magento, WordPress and Joomla design.

1. The UX Problem: Why Attractive Websites Still Fail

A common mistake in web development is to begin with:

"Which theme should we use?"

The better question is:

"What experience are we trying to create for the user, and what business problem must that experience solve?"

A website may have:

• a modern theme,
• professional photography,
• animations,
• sliders,
• dozens of plugins,
• hundreds of products,
• sophisticated hosting,
• SEO extensions,

and still produce poor results.

Why?

Because technology does not automatically create usability.

A website can fail because:

• users cannot find products;
• navigation is confusing;
• important information is buried;
• calls-to-action compete with each other;
• pages contain too much information;
• checkout is complicated;
• mobile layouts are poorly designed;
• forms are unnecessarily long;
• search produces poor results;
• content is written for the organization instead of the customer;
• the visual hierarchy does not communicate priorities;
• users do not understand what to do next.

This is fundamentally a UX and information-architecture problem.

2. UX Is a Business Architecture Problem

UX should not be treated solely as graphic design.

A useful model is:

Business Strategy

↓

Marketing Strategy

↓

Content Strategy

↓

Information Architecture

↓

User Journeys

↓

Interaction Design

↓

Wireframes

↓

Visual Design

↓

Development

↓

Testing

↓

Analytics & Optimization

Each layer depends on the preceding layer.

For example, designing a product page before understanding the product-selection process can result in a visually impressive page that does not help customers make decisions.

3. AIDA as a UX and Conversion Framework

This white paper applies the AIDA principle to UX without treating AIDA merely as a copywriting formula.

AIDA can become a useful framework for understanding the customer's journey.

A — Attention

The interface must immediately communicate:

• Where am I?
• What is this?
• Why should I care?
• What problem does this solve?

I — Interest

The website should help users investigate.

Examples include:

• categories;
• product specifications;
• demonstrations;
• comparison tables;
• FAQs;
• case studies;
• educational articles;
• reviews.

D — Desire

The experience should reduce uncertainty.

Users need answers to questions such as:

• Is this right for me?
• Can I trust this company?
• Is the product compatible?
• What does it cost?
• How quickly can I receive it?
• What happens if something goes wrong?

A — Action

The interface should make the next step obvious.

Examples:

• Buy Now
• Add to Cart
• Request a Quote
• Book a Consultation
• Download White Paper
• Contact Sales
• Start Free Trial

A powerful UX principle follows:

Every important page should have a clearly understood next action.

4. Information Architecture: The Foundation of UX

Information Architecture—or IA—is one of the most important disciplines for large websites.

The classic reference is:

Information Architecture: For the Web and Beyond, by Louis Rosenfeld, Peter Morville and Jorge Arango.

The fourth edition addresses organization, labeling, navigation, search, metadata, research, strategy, sitemaps and wireframes. (Google Books)

The book remains particularly relevant to CMS and eCommerce projects because modern websites are essentially information systems.

4.1 The Major IA Components

Organization

How information is grouped.

For an eCommerce store:

Products

→ Electronics
→ Networking
→ Servers
→ Accessories

But categorization must reflect how customers think, not merely how the organization is structured internally.

Labeling

Labels must be understandable.

For example:

"Solutions"

may be ambiguous.

A customer may understand:

• IT Services
• Managed IT
• Cloud Services
• Cybersecurity
• eCommerce Development

more easily.

Navigation

Navigation answers:

"Where can I go from here?"

Typical structures include:

• global navigation;
• local navigation;
• contextual navigation;
• footer navigation;
• breadcrumbs;
• filters;
• search.

Search

Search becomes critical when a website contains substantial content or many products.

For Magento or WooCommerce, search should support:

• product names;
• SKUs;
• categories;
• attributes;
• synonyms;
• common misspellings;
• technical terminology.

Metadata

Metadata helps organize and retrieve information.

For eCommerce this can include:

• SKU;
• brand;
• product type;
• size;
• colour;
• compatibility;
• price;
• availability;
• specifications.

5. The Website Should Be Designed as a System

A major design mistake is treating each page independently.

Instead, design a system of pages and components.

For example:

Homepage | +-- Category | | | +-- Product Listing | | | +-- Product Detail | | | +-- Cart | | | +-- Checkout | +-- Content | +-- Article | +-- Case Study | +-- White Paper

This allows designers and developers to identify relationships between pages before implementation.

6. Sitemap Before Wireframe

A sitemap should normally precede detailed wireframing.

Example for a B2B technology company:

HOME │ ├── SERVICES │ ├── IT Consulting │ ├── Cloud │ ├── Cybersecurity │ ├── eCommerce │ └── Digital Transformation │ ├── SOLUTIONS │ ├── Magento │ ├── WordPress │ ├── Joomla │ └── IoT │ ├── INDUSTRIES │ ├── Manufacturing │ ├── Retail │ ├── Professional Services │ └── SMEs │ ├── RESOURCES │ ├── White Papers │ ├── Research │ ├── Tutorials │ └── Blog │ ├── ABOUT │ └── CONTACT

This provides a structural blueprint before visual design begins.

7. User Journeys Are More Important Than Individual Pages

A user rarely thinks:

"I want to visit your product-detail template."

The user thinks:

"I need to find a product that solves my problem."

Therefore UX designers should model tasks and journeys.

Example: eCommerce journey

Google Search ↓ Landing Page ↓ Category ↓ Filter ↓ Product Comparison ↓ Product Detail ↓ Add to Cart ↓ Checkout ↓ Payment ↓ Confirmation

Every transition is an opportunity for friction.

8. Wireframing: The Missing Step in Many Web Projects

Wireframing is the process of designing the structure and interaction of a screen before committing to detailed visual design.

This is valuable because changing a wireframe is cheap.

Changing a production website is expensive.

A wireframe can answer:

• What content belongs here?
• What is the primary CTA?
• Where should navigation appear?
• What should be above the fold?
• How should products be compared?
• What information is essential?
• What happens when the user clicks?
• What does the mobile layout look like?

9. WireframeSketcher as a Practical Wireframing Tool

A particularly useful tool for this workflow is WireframeSketcher.

WireframeSketcher supports wireframes, mockups and prototypes for web, desktop and mobile applications. It is available as a standalone application and as an Eclipse plug-in, and supports Windows, macOS and Linux. (WireframeSketcher)

The current official site lists version 7.4.3, released March 22, 2026. (WireframeSketcher)

Its sketch-oriented visual style is particularly useful during early UX discussions because stakeholders can focus on structure rather than arguing about colours, fonts and photography. (WireframeSketcher)

Recommended workflow

Requirements ↓ Sitemap ↓ User Journey ↓ Low-Fidelity Wireframe ↓ Interactive Prototype ↓ Stakeholder Review ↓ Usability Test ↓ High-Fidelity UI ↓ Development

This is much less expensive than:

Theme ↓ Development ↓ Client dislikes design ↓ Redesign ↓ Development again

10. Low-Fidelity vs High-Fidelity Wireframes

Low-Fidelity

Focus on:

• information;
• layout;
• hierarchy;
• navigation;
• functionality.

Example:

+----------------------------------+ | LOGO NAVIGATION | +----------------------------------+ | | | HERO / VALUE PROP | | | | [PRIMARY CTA] | | | +----------------------------------+ | BENEFIT | BENEFIT | BENEFIT | +----------------------------------+ | PRODUCTS / SERVICES | +----------------------------------+ | TRUST / TESTIMONIALS | +----------------------------------+ | CTA | +----------------------------------+ | FOOTER | +----------------------------------+

High-Fidelity

Adds:

• typography;
• colours;
• imagery;
• icons;
• exact components;
• visual branding;
• detailed interactions.

The mistake is moving into high fidelity too early.

11. Common UX Design Mistakes

Mistake 1: Designing Before Understanding the User

A company may design what management wants rather than what customers need.

Solution

Conduct:

• customer interviews;
• analytics analysis;
• competitor research;
• search analysis;
• support-ticket analysis;
• usability testing.

Mistake 2: Designing Around the CMS

Another common mistake is asking:

"What can WordPress do?"

or:

"What can Magento do?"

The better question is:

"What experience should the customer have?"

The CMS should implement the experience rather than dictate it.

Mistake 3: Theme-First Design

Installing a theme and then trying to fit the business into it often produces:

• unnecessary components;
• inconsistent layouts;
• poor conversion paths;
• excessive plugins;
• design compromises.

Better approach

Business Requirements ↓ UX ↓ IA ↓ Wireframe ↓ Design System ↓ Theme ↓ Development

12. Magento UX Design

Magento/Adobe Commerce is fundamentally different from a simple brochure website.

The UX must accommodate:

• large product catalogs;
• configurable products;
• customer accounts;
• search;
• filtering;
• comparison;
• cart;
• checkout;
• promotions;
• shipping;
• payment;
• inventory;
• B2B purchasing;
• multiple stores;
• multiple currencies;
• customer-specific pricing.

Therefore Magento UX should be designed as an eCommerce system, not simply as a collection of attractive pages.

13. Hyvä Theme as a UX Architecture Example

Hyvä Theme provides an excellent case study for understanding the relationship between UX design and frontend architecture.

Hyvä is a Magento 2 frontend built with Magento's templating system and uses technologies including Tailwind CSS and Alpine.js. Its documentation describes a focus on performance and reduced complexity. (Hyvä Docs)

The important UX lesson is not simply:

"Hyvä is fast."

The larger lesson is:

A frontend architecture can either support or obstruct good UX implementation.

Hyvä's component-oriented approach can help developers translate a UX system into reusable frontend components.

Its documentation also provides a UI Library with reusable components and a matching Figma file, providing a useful bridge between design and development. (Hyvä Docs)

14. Wireframing a Hyvä Magento Store

A recommended process is:

Step 1 — Define the IA

Home ↓ Category ↓ Product Listing ↓ Product Detail ↓ Cart ↓ Checkout

Step 2 — Create Wireframes

Create:

• homepage;
• category page;
• search results;
• product listing;
• product detail;
• mini-cart;
• cart;
• checkout;
• account dashboard.

Step 3 — Create Components

For example:

Header Navigation Search Breadcrumb Product Card Price Rating Add-to-Cart Product Gallery Filter Pagination Cart Checkout Form Footer

Step 4 — Build the Design System

Define:

• typography;
• spacing;
• buttons;
• forms;
• cards;
• colours;
• icons;
• alerts;
• tables;
• responsive behaviour.

Step 5 — Implement the Theme

Develop the approved UX and UI rather than inventing the design during coding.

15. WordPress and WooCommerce UX

WordPress is extremely flexible, which creates another UX problem:

Too much flexibility can create inconsistency.

A WordPress project can accumulate:

• multiple page builders;
• plugins;
• themes;
• widgets;
• custom post types;
• forms;
• popups;
• tracking scripts.

The resulting interface may become inconsistent.

WooCommerce introduces additional UX requirements:

• category navigation;
• product filtering;
• product variations;
• reviews;
• cart;
• shipping;
• coupons;
• checkout;
• customer accounts.

Therefore a WordPress/WooCommerce design system should establish rules before page construction.

16. Joomla UX

Joomla is particularly appropriate for structured content-heavy websites and portals.

UX planning should consider:

• categories;
• nested categories;
• menus;
• articles;
• tags;
• custom fields;
• search;
• user groups;
• access control;
• multilingual content;
• modules.

For Joomla, information architecture is therefore especially important.

A poorly designed category/menu architecture can create a technically functional website that users find difficult to navigate.

17. Responsive UX Must Start at the Wireframe Stage

Mobile should not be treated as a desktop website compressed into a smaller screen.

Consider:

DESKTOP [Product] [Product] [Product] [Product] MOBILE [Product] [Product] [Product]

But responsive UX involves much more than changing columns.

Designers must reconsider:

• navigation;
• menus;
• filters;
• tables;
• product galleries;
• checkout fields;
• CTA placement;
• typography;
• touch targets;
• modal dialogs.

18. eCommerce Product Page UX

A product page should answer the customer's most important questions.

Above the fold

Product Name ★★★★★ Reviews Price Availability Key Value Proposition [Add to Cart] Shipping Information Trust Signal

Further down:

Description Specifications Compatibility Reviews FAQ Shipping Returns Related Products

The exact ordering depends on customer research and product category.

19. Checkout UX

Checkout is one of the highest-value UX areas in eCommerce.

Common mistakes include:

• requiring unnecessary account creation;
• excessive fields;
• unclear shipping costs;
• unexpected fees;
• confusing validation;
• weak error messages;
• poor mobile forms;
• too many steps;
• distracting promotional elements.

The checkout should answer:

What do I need to do now?

rather than:

What else can I show the customer?

20. UX Writing Is Part of Interface Design

Words are interface components.

Compare:

Submit

with:

Request a Free Consultation

The second communicates the result of the action.

Similarly:

Error

is less helpful than:

Please enter a valid Canadian postal code.

Good UX writing reduces cognitive effort.

21. Accessibility Should Be Designed, Not Added Later

Accessibility should be considered from the beginning.

Design teams should consider:

• keyboard navigation;
• semantic HTML;
• colour contrast;
• focus states;
• alternative text;
• readable typography;
• form labels;
• error messages;
• screen-reader compatibility;
• touch target sizes.

Accessibility is therefore part of UX quality—not simply a compliance exercise.

22. Design Systems

A mature website should use a design system.

Example:

DESIGN SYSTEM │ ├── Typography ├── Colour ├── Spacing ├── Grid ├── Buttons ├── Forms ├── Cards ├── Navigation ├── Alerts ├── Tables ├── Product Components └── Checkout Components

This improves:

• consistency;
• development speed;
• maintainability;
• accessibility;
• scalability.

23. UX Testing

Never assume the design works simply because stakeholders like it.

Test it.

Example usability test

Give a participant the task:

"Find a laptop suitable for business travel under $1,500 and determine whether shipping is available."

Observe:

• Where do they start?
• Do they understand navigation?
• Can they find filters?
• Do they understand product specifications?
• Can they determine shipping?
• Do they know what to do next?

Measure:

• task completion;
• time to completion;
• errors;
• hesitation;
• abandonment;
• satisfaction.

24. Analytics Completes the UX Cycle

UX should become a continuous improvement process.

Design ↓ Develop ↓ Launch ↓ Measure ↓ Analyze ↓ Improve ↓ Test ↓ Repeat

Useful metrics include:

Acquisition

• organic traffic;
• paid traffic;
• referral traffic.

Engagement

• engagement rate;
• page views;
• search usage;
• content interaction.

eCommerce

• product views;
• add-to-cart rate;
• checkout initiation;
• checkout completion;
• conversion rate;
• average order value.

UX

• task completion;
• search refinement;
• rage clicks;
• form abandonment;
• customer support requests.

25. UX ROI

UX should ultimately be connected to business outcomes.

A simple conceptual model is:

UX Improvement → Reduced Friction → Better Engagement → Higher Conversion → Higher Revenue

For a B2B website:

Better IA → Better Content Discovery → Better Lead Qualification → More Qualified Leads

For eCommerce:

Better Product Discovery → More Product Views → More Add-to-Carts → More Purchases

For a portal:

Better Navigation → Faster Task Completion → Higher User Satisfaction

26. Recommended UX Toolchain

A practical UX toolchain can include several categories.

Activity	Example Tools
Information architecture	Miro, FigJam, diagrams.net
Sitemap	Slickplan, FlowMapp, Miro
Wireframing	WireframeSketcher, Balsamiq
UI design	Figma, Penpot, Adobe XD
Prototyping	Figma, Axure
UX testing	UserTesting, Maze
Analytics	Google Analytics, Matomo
Heatmaps	Microsoft Clarity, Hotjar
Accessibility	WAVE, axe
Design systems	Figma, Storybook
Magento frontend	Hyvä
Development	Git, Docker, CI/CD

The best tool is not necessarily the most feature-rich tool.

The best tool is the one that supports the team's workflow and makes communication between business, UX, design and development easier.

27. Recommended Books

1. Information Architecture: For the Web and Beyond

Louis Rosenfeld, Peter Morville and Jorge Arango

This should be one of the foundational books for the proposed methodology.

It covers:

• organization;
• labeling;
• navigation;
• search;
• metadata;
• research;
• strategy;
• sitemaps;
• wireframes;
• prototypes;
• design documentation. (Google Books)

O'Reilly — Information Architecture, 4th Edition

2. Don't Make Me Think

Steve Krug

Excellent introduction to usability and practical web design.

Key lesson:

Make interfaces obvious rather than forcing users to figure them out.

3. The Design of Everyday Things

Don Norman

A foundational work for understanding:

• affordances;
• feedback;
• mental models;
• human error;
• interaction design.

4. About Face

Alan Cooper, Robert Reimann, David Cronin and Christopher Noessel

Useful for understanding interaction design and user-centered product development.

5. Designing for Interaction

Dan Saffer

Useful for interaction design, behavior and product experience.

6. 100 Things Every Designer Needs to Know About People

Susan Weinschenk

Useful for connecting psychology with practical interface decisions.

28. Recommended Learning Path

For a Magento/WordPress/Joomla development organization, UX training should not begin with Photoshop or Figma.

A better sequence is:

Stage 1 — UX Fundamentals

Study:

• usability;
• user-centered design;
• cognitive load;
• visual hierarchy;
• interaction design.

Stage 2 — Information Architecture

Study:

• taxonomy;
• navigation;
• labeling;
• search;
• metadata;
• content models.

Stage 3 — User Journeys

Learn to document:

• personas;
• scenarios;
• customer journeys;
• task flows;
• conversion funnels.

Stage 4 — Wireframing

Learn:

• low-fidelity wireframes;
• responsive wireframes;
• component thinking;
• interactive prototypes.

Use WireframeSketcher as a practical wireframing environment. Its official documentation includes tutorials and guidance for creating interactive prototypes and working with its interface. (WireframeSketcher)

Stage 5 — UI Design

Learn:

• typography;
• colour;
• grids;
• spacing;
• component systems;
• responsive design.

Stage 6 — Platform Implementation

Apply the UX system to:

• Magento;
• Hyvä;
• WordPress;
• WooCommerce;
• Joomla.

Stage 7 — Testing

Learn:

• usability testing;
• accessibility testing;
• analytics;
• A/B testing;
• conversion optimization.

29. Proposed UX Development Methodology for SMEs

A practical SME methodology can be summarized as:

Phase 1 — Discover

Understand:

• business;
• customers;
• competitors;
• products;
• services;
• marketing objectives.

Phase 2 — Structure

Create:

• personas;
• customer journeys;
• content inventory;
• taxonomy;
• sitemap;
• navigation architecture.

Phase 3 — Design

Create:

• wireframes;
• interaction flows;
• prototypes;
• design system.

Phase 4 — Validate

Conduct:

• stakeholder review;
• usability testing;
• accessibility review;
• mobile testing.

Phase 5 — Build

Implement:

• CMS;
• theme;
• components;
• integrations;
• analytics.

Phase 6 — Optimize

Measure:

• traffic;
• engagement;
• conversions;
• abandonment;
• customer feedback.

Then repeat the cycle.

30. AIDA-Based UX Implementation

The methodology can ultimately be visualized as:

ATTENTION │ Clear Value Proposition │ ▼ INTEREST │ Navigation + Content + Search │ ▼ DESIRE │ Trust + Evidence + Comparison │ ▼ ACTION │ CTA + Checkout + Lead Capture │ ▼ MEASUREMENT │ ▼ OPTIMIZATION

This connects UX with marketing without allowing marketing messages to overwhelm usability.

31. Design Mistakes to Avoid — Executive Checklist

Before approving a website design, ask:

Strategy

• What business objective does this page support?
• Who is the user?
• What task is the user trying to complete?

Information Architecture

• Can users find what they need?
• Are categories understandable?
• Is navigation logical?
• Is search effective?

UX

• Is the next action obvious?
• Is the page overloaded?
• Is the interface consistent?
• Does mobile work naturally?

eCommerce

• Can users discover products?
• Can they compare products?
• Are specifications understandable?
• Are shipping and returns clear?
• Is checkout simple?

Accessibility

• Can the site be used without a mouse?
• Are forms understandable?
• Is text readable?
• Are focus states visible?

Conversion

• Is the CTA clear?
• Does the page build trust?
• Does the content answer objections?
• Is the customer being asked to do too much?

32. The Strategic Role of UX

UX should not be considered an isolated design department.

For a modern digital business, UX connects:

Marketing + Content + SEO + Information Architecture + Design + Development + Analytics

This is particularly important for SME digital transformation.

A website is simultaneously:

• a marketing channel;
• a sales channel;
• a customer-service channel;
• a knowledge base;
• an eCommerce platform;
• a brand experience;
• a data collection system.

Therefore its architecture should be designed accordingly.

33. Conclusion

The central lesson of this white paper is simple:

Do not begin a website project by designing pages. Begin by designing the experience.

Magento, WordPress and Joomla can all provide powerful foundations for websites, portals and eCommerce systems. But the platform itself does not determine whether the resulting experience will be successful.

The organization must first determine:

1. Who are the users?
2. What are they trying to accomplish?
3. How should information be organized?
4. What should the customer journey look like?
5. What should each screen accomplish?
6. What should the wireframe look like?
7. How will the design be tested?
8. How will success be measured?

The Information Architecture discipline provides the structural foundation. Wireframing provides an inexpensive way to explore and validate the structure. A design system provides consistency. UX testing provides evidence. Analytics provides continuous feedback.

WireframeSketcher is a useful practical tool within this process because it supports rapid wireframing and prototyping across web, desktop and mobile projects. (WireframeSketcher)

Hyvä provides an especially interesting Magento example because it demonstrates how a modern frontend architecture can translate reusable design components into a performant Magento storefront. Hyvä's documentation describes its frontend as using Tailwind CSS and Alpine.js and provides guidance for building custom themes and working with its UI component ecosystem. (Hyvä Docs)

The ultimate objective is not simply to create a beautiful website.

It is to create a website that is:

Findable → Understandable → Usable → Trustworthy → Accessible → Persuasive → Measurable → Profitable.

That is the real purpose of UX design.

Suggested next step

For a Magento, WordPress/WooCommerce or Joomla project, the recommended deliverable sequence is:

Business Brief → Personas → Customer Journey → Content Inventory → IA/Sitemap → Wireframes → Prototype → Design System → Theme/UI → Development → Usability Testing → SEO → Analytics → Conversion Optimization.

This turns UX from an artistic activity into a repeatable digital-transformation methodology.

• RESEARCH METHOD
• SOFTWARE ENGINEERING
• HARDWARE SOFTWARE CODESIGN
• CONSULTING ENGINEERING
• WHY IASR