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.
Research White Paper
UX Design, Information Architecture and Wireframing for Websites, Web Applications and eCommerce-Designing Better Magento, WordPress and Joomla Experiences Through UX Research, Information Architecture, Wireframing, Prototyping and Conversion-Centered Design
Technology examples: Magento / Adobe Commerce, Hyvä Theme, WordPress / WooCommerce, Joomla
Wireframing example: WireframeSketcher
Strategic ecosystem: KeenComputer.com + IAS-Research.com + KeenDirect.com
1. Executive Summary
A successful website is not simply an attractive collection of pages.
It is an integrated user experience, information architecture, software system and marketing platform.
This is particularly important for Magento, WordPress, WooCommerce and Joomla projects. Modern CMS platforms can make it easy to install themes, extensions and templates, but technology alone does not guarantee that customers will find information, understand products, trust the organization or complete a purchase.
The real challenge is therefore:
How do we transform business requirements into an intuitive digital experience that users can understand and businesses can measure?
This white paper proposes a structured methodology:
Business Strategy → User Research → Information Architecture → User Journey → Wireframe → Prototype → UI Design → Theme Development → Testing → Analytics → Optimization
The methodology combines:
- Information Architecture;
- UX research;
- customer journeys;
- wireframing;
- interaction design;
- responsive design;
- accessibility;
- design systems;
- AIDA-based conversion thinking;
- eCommerce UX;
- SEO;
- analytics;
- continuous optimization.
The approach is particularly applicable to Magento/Hyvä, WordPress/WooCommerce and Joomla.
It also creates a natural division of responsibility among three complementary organizations:
IAS-Research → Research & Innovation
KeenComputer → Technology & Engineering
KeenDirect → eCommerce, Marketing & Revenue
This creates a complete transformation lifecycle from research to engineering to commercialization. A similar three-layer model is already reflected in published strategic material describing IAS-Research as the innovation layer, KeenComputer as the engineering layer and KeenDirect as the commercialization layer. (Keen Computer)
2. The Fundamental Problem
Many organizations begin a website project with:
"Which theme should we buy?"
That is usually the wrong starting point.
The better sequence is:
What does the customer need to accomplish?
followed by:
How should the information be organized?
and then:
What interface will make that journey simple?
Only after these questions should the organization select the theme, CMS architecture and implementation technology.
3. UX Is More Than Visual Design
UX encompasses:
- research;
- information architecture;
- interaction design;
- content;
- navigation;
- accessibility;
- performance;
- usability;
- visual hierarchy;
- conversion;
- customer satisfaction.
UI is only one component.
A beautiful website can still be unusable.
Conversely, a visually simple interface can generate excellent business results if it makes the customer's task easy.
4. Information Architecture as the Foundation
The principles of Information Architecture: For the Web and Beyond by Louis Rosenfeld, Peter Morville and Jorge Arango provide an important foundation for this methodology.
Information architecture addresses areas such as:
- organization;
- labeling;
- navigation;
- search;
- metadata;
- taxonomy;
- sitemaps;
- wireframes;
- prototypes.
For a CMS or eCommerce project, IA determines how customers discover information.
For example:
HOME │ ├── PRODUCTS │ ├── CATEGORY A │ ├── CATEGORY B │ └── CATEGORY C │ ├── SERVICES │ ├── SOLUTIONS │ ├── RESOURCES │ ├── ABOUT │ └── CONTACT
This structure should be determined from user needs and business objectives rather than from the default menu structure supplied by a CMS.
5. AIDA as a UX Framework
AIDA can be integrated into the UX architecture.
Attention
The user immediately understands:
- who you are;
- what you offer;
- what problem you solve.
Interest
The interface makes it easy to investigate:
- products;
- services;
- features;
- educational content;
- case studies.
Desire
The website reduces uncertainty through:
- demonstrations;
- reviews;
- specifications;
- comparisons;
- testimonials;
- trust signals.
Action
The next step becomes obvious:
- Buy Now;
- Add to Cart;
- Request Quote;
- Contact Sales;
- Book Consultation;
- Download White Paper.
Thus:
AIDA should influence the information hierarchy, not merely the advertising copy.
6. Wireframing Before Development
One of the most expensive mistakes in website development is designing directly inside the CMS.
A better workflow is:
Business Requirements ↓ User Research ↓ Information Architecture ↓ Customer Journey ↓ Wireframe ↓ Prototype ↓ UI Design ↓ Development ↓ Testing
The earlier a design mistake is discovered, the cheaper it is to fix.
7. WireframeSketcher
WireframeSketcher is a useful example of a dedicated wireframing tool for this methodology.
It supports wireframes, mockups and prototypes for web, desktop and mobile applications.
Its sketch-oriented approach is particularly useful during the early design phase because stakeholders can focus on:
- structure;
- navigation;
- content hierarchy;
- functionality;
- user flow;
rather than becoming distracted by colours, photographs and branding.
For an SME project, the process could therefore be:
WireframeSketcher → Prototype → UI Design → Theme Development
rather than:
Theme → Coding → Client Disagreement → Redesign → Rework
8. UX Design Mistakes
Mistake 1 — Theme First
The organization chooses a theme before understanding the user.
Solution
Design the information architecture and wireframes first.
Mistake 2 — Designing for the Organization
Corporate websites often organize information according to internal departments.
Customers think in terms of:
"I have a problem. Can you solve it?"
Solution
Organize navigation around customer tasks and problems.
Mistake 3 — Too Many Choices
A navigation bar containing 15–20 options creates cognitive overload.
Solution
Use:
- grouping;
- hierarchy;
- progressive disclosure;
- search;
- contextual navigation.
Mistake 4 — Weak Calls-to-Action
A page may contain:
- Learn More;
- Contact;
- Download;
- Buy;
- Subscribe;
- Request Demo;
all competing for attention.
Solution
Identify the primary CTA and make secondary actions visually subordinate.
9. Magento UX
Magento/Adobe Commerce requires substantially more sophisticated UX than a basic corporate website.
The UX must account for:
- product discovery;
- categories;
- faceted search;
- filters;
- product attributes;
- configurable products;
- product comparison;
- customer accounts;
- shopping cart;
- checkout;
- shipping;
- payment;
- promotions;
- B2B workflows.
Therefore:
Magento UX should be designed as a commerce system rather than a collection of webpages.
10. Hyvä Theme as a Magento UX Example
Hyvä provides an excellent example of how frontend architecture can support a UX strategy.
Hyvä's Magento frontend ecosystem uses technologies including Tailwind CSS and Alpine.js, and its documentation includes reusable UI components and development guidance. (Keen Computer)
The important lesson is not merely that Hyvä can provide a modern Magento frontend.
The more important architectural principle is:
A UX design system should be translated into reusable frontend components.
For example:
UX DESIGN SYSTEM ↓ Button Card Navigation Search Product Card Product Gallery Filter Form Alert Modal ↓ Hyvä Components ↓ Magento Storefront
This reduces the gap between UX design and implementation.
11. WordPress and WooCommerce UX
WordPress provides enormous flexibility.
That flexibility can become a problem.
A site can accumulate:
- multiple page builders;
- plugins;
- widgets;
- popups;
- inconsistent templates;
- competing navigation systems.
WooCommerce adds:
- product catalogues;
- variations;
- product filters;
- cart;
- checkout;
- customer accounts;
- shipping;
- payment.
Therefore WordPress/WooCommerce projects benefit from the same methodology:
IA → Wireframe → Design System → Theme → Development → Testing
12. Joomla UX
Joomla is particularly useful for structured content, portals and information-rich websites.
UX architecture should address:
- categories;
- articles;
- menu structures;
- modules;
- tags;
- custom fields;
- search;
- user groups;
- access control;
- multilingual content.
A Joomla website can therefore benefit enormously from Information Architecture before template customization begins.
13. Mobile UX
Mobile design should not simply shrink desktop pages.
For example, a desktop product catalogue might use:
[PRODUCT] [PRODUCT] [PRODUCT] [PRODUCT]
Mobile might require:
[PRODUCT] [PRODUCT] [PRODUCT]
But responsive UX also changes:
- navigation;
- filtering;
- search;
- forms;
- product galleries;
- comparison;
- checkout.
Therefore responsive behavior should be designed during wireframing.
14. UX and SEO
UX and SEO should not be treated as separate activities.
Good information architecture can improve:
- crawlability;
- internal linking;
- content discoverability;
- topical organization;
- navigation;
- search visibility.
A well-designed website therefore creates alignment between:
Search Engine → Landing Page → Information Architecture → Content → Conversion
15. UX and Conversion Optimization
A useful conversion model is:
Traffic ↓ Landing Page ↓ Information Discovery ↓ Product / Service Evaluation ↓ Trust ↓ CTA ↓ Conversion
UX optimization should therefore identify where users leave the journey.
For example:
10,000 Visitors ↓ 4,000 Product Views ↓ 1,200 Add to Cart ↓ 700 Checkout ↓ 500 Purchases
The UX team can investigate the largest drop-offs rather than simply redesigning the homepage.
16. The Role of KeenComputer.com
KeenComputer — Technology, Web Engineering and Digital Transformation
KeenComputer should occupy the technology implementation and digital-transformation layer.
Current KeenComputer material describes capabilities spanning Joomla, WordPress, Magento, software engineering, cloud infrastructure, Docker, Kubernetes, Linux, security and enterprise content management. (Keen Computer)
UX-related responsibilities can include:
- CMS architecture;
- Magento implementation;
- WordPress development;
- WooCommerce development;
- Joomla development;
- Hyvä implementation;
- API integration;
- database architecture;
- cloud deployment;
- Docker;
- DevOps;
- performance optimization;
- cybersecurity;
- analytics integration.
KeenComputer's UX role
KeenComputer translates:
UX Specification → Production Web Application
For example:
UX Wireframe ↓ UI Design ↓ Magento / WordPress / Joomla ↓ Docker ↓ Cloud / VPS ↓ Security ↓ Performance ↓ Production
KeenComputer's published portfolio explicitly positions the company around enterprise content management, web/application infrastructure and modern software engineering. (Keen Computer)
17. The Role of IAS-Research.com
IAS-Research — Research, Innovation and Advanced Engineering
IAS-Research should occupy the research, innovation and advanced technology layer.
IAS-Research describes its capabilities across electrical and computer engineering, VLSI, embedded systems, IoT, AI/ML, full-stack software, DevOps and cloud technologies. (IAS Research)
For UX projects, this becomes particularly valuable when the website is actually the front end of a sophisticated technical system.
Examples
An industrial website may require:
- IoT dashboards;
- digital twins;
- engineering data visualization;
- AI assistants;
- RAG systems;
- technical knowledge bases;
- predictive analytics;
- engineering simulation interfaces.
IAS-Research can therefore help answer:
What should the application do, and what technology should exist behind the user interface?
Its systems-engineering approach is particularly relevant to complex multidisciplinary applications. (IAS Research)
18. IAS-Research and UX for Engineering Applications
Consider an Industrial IoT dashboard.
The user may need to understand:
- machine status;
- temperature;
- vibration;
- energy consumption;
- alarms;
- predictive-maintenance recommendations.
The interface cannot simply be visually attractive.
It must communicate engineering information correctly.
Therefore:
Engineering Requirements ↓ System Architecture ↓ Data Model ↓ User Tasks ↓ Information Architecture ↓ Dashboard Wireframe ↓ Visualization ↓ IoT Platform
This is where IAS-Research's engineering and research capabilities can complement conventional UX design.
19. The Role of KeenDirect.com
KeenDirect — eCommerce, Marketing and Revenue
KeenDirect should occupy the commercialization and revenue layer.
Published strategic material describes KeenDirect in terms of Magento, WordPress, Joomla, WooCommerce, SEO, content strategy, conversion optimization and marketing automation. (Keen Computer)
This is crucial because a technically excellent website can still fail if it does not generate business results.
KeenDirect can focus on:
- eCommerce;
- Magento;
- WooCommerce;
- product merchandising;
- SEO;
- GEO;
- content marketing;
- landing pages;
- lead generation;
- conversion optimization;
- CRM integration;
- marketing automation;
- customer acquisition;
- analytics.
The objective becomes:
Turn good UX into measurable commercial performance.
20. The Three-Organization UX Ecosystem
The three organizations can therefore be positioned as:
CUSTOMER PROBLEM │ ▼ ┌───────────────────┐ │ IAS-RESEARCH │ │ Research & │ │ Innovation │ │ AI / IoT / │ │ Engineering │ └─────────┬─────────┘ │ ▼ ┌───────────────────┐ │ KEENCOMPUTER │ │ UX Implementation │ │ Software / Cloud │ │ DevOps / Security │ └─────────┬─────────┘ │ ▼ ┌───────────────────┐ │ KEENDIRECT │ │ eCommerce │ │ Marketing │ │ SEO / CRO │ │ Revenue │ └─────────┬─────────┘ │ ▼ CUSTOMER │ ▼ REVENUE
This gives the white paper a stronger strategic proposition:
IAS-Research asks:
What should we build, why should we build it, and how should it work?
KeenComputer asks:
How do we design, engineer, deploy, secure and operate it?
KeenDirect asks:
How do we attract customers, convert them and generate revenue?
This three-layer positioning is consistent with current published material describing the organizations as research/innovation, engineering and commercialization layers. (Keen Computer)
21. Complete UX-to-Revenue Lifecycle
The combined methodology becomes:
MARKET │ ▼ CUSTOMER NEED │ ▼ IAS-RESEARCH Research / Innovation │ ▼ INFORMATION ARCHITECTURE │ ▼ WIREFRAME │ ▼ PROTOTYPE │ ▼ KEENCOMPUTER Engineering / Technology │ ▼ Magento / Hyvä / WordPress WooCommerce / Joomla │ ▼ DEPLOYMENT │ ▼ KEENDIRECT Marketing / eCommerce SEO / CRO / CRM │ ▼ CUSTOMER │ ▼ REVENUE │ ▼ ANALYTICS │ └──────────► OPTIMIZATION
22. Example: SME Magento Transformation
Consider an SME selling technical products.
Problem
The existing Magento store has:
- poor navigation;
- confusing categories;
- slow product discovery;
- weak mobile UX;
- high checkout abandonment.
Phase 1 — IAS-Research
Research:
- customer requirements;
- product taxonomy;
- technical product relationships;
- search terminology;
- complex product-selection requirements.
Phase 2 — Wireframing
Create:
- sitemap;
- customer journey;
- category wireframes;
- product-page wireframes;
- checkout wireframes.
Phase 3 — KeenComputer
Implement:
- Magento;
- Hyvä;
- search;
- product filtering;
- responsive components;
- cloud/VPS infrastructure;
- security;
- caching;
- analytics.
Phase 4 — KeenDirect
Optimize:
- SEO;
- product content;
- landing pages;
- conversion funnels;
- email marketing;
- CRO.
Phase 5 — Measure
Track:
- organic traffic;
- product engagement;
- add-to-cart;
- checkout;
- conversion;
- revenue.
This creates a complete transformation rather than merely a theme redesign.
23. UX Deliverables
A professional project should ideally produce:
Discovery
- Business Requirements Document
- Personas
- Customer Journey Maps
- Competitive Analysis
Information Architecture
- Content Inventory
- Taxonomy
- Sitemap
- Navigation Model
Interaction Design
- User Flows
- Task Flows
- Wireframes
- Interactive Prototype
UI
- Design System
- Component Library
- Responsive Screens
- Accessibility Specification
Development
- Theme architecture
- CMS architecture
- Component specifications
- API specifications
- Analytics requirements
Optimization
- UX test results
- Conversion analysis
- Search analysis
- Analytics dashboard
- Improvement roadmap
24. Recommended UX Toolchain
|
Function |
Tools |
|---|---|
|
Information Architecture |
Miro, FigJam, diagrams.net |
|
Sitemap |
Miro, FlowMapp, Slickplan |
|
Wireframing |
WireframeSketcher, Balsamiq |
|
UI Design |
Figma, Penpot |
|
Prototyping |
Figma, Axure |
|
Usability Testing |
Maze, UserTesting |
|
Analytics |
Google Analytics, Matomo |
|
Heatmaps |
Microsoft Clarity, Hotjar |
|
Accessibility |
WAVE, axe |
|
Magento Frontend |
Hyvä |
|
Development |
Git, Docker, CI/CD |
|
CMS |
Magento, WordPress, Joomla |
25. Recommended Books
Information Architecture
Information Architecture: For the Web and Beyond
Louis Rosenfeld, Peter Morville & Jorge Arango
Usability
Don't Make Me Think
Steve Krug
Human-Centered Design
The Design of Everyday Things
Don Norman
Interaction Design
About Face
Alan Cooper and colleagues
Human Behavior
100 Things Every Designer Needs to Know About People
Susan Weinschenk
These books provide a strong theoretical foundation before moving into specific tools such as WireframeSketcher, Figma or platform-specific design systems.
26. Recommended SME UX Process
For KeenComputer, IAS-Research and KeenDirect, the recommended methodology is:
STEP 1 — Research
IAS-Research
Research the business, technology and user problem.
STEP 2 — Information Architecture
Joint
Define:
- personas;
- taxonomy;
- sitemap;
- navigation;
- user journeys.
STEP 3 — Wireframing
Joint UX Team
Use WireframeSketcher to develop:
- desktop;
- tablet;
- mobile;
- application;
- eCommerce workflows.
STEP 4 — UI Design
Develop:
- design system;
- typography;
- components;
- responsive layouts.
STEP 5 — Engineering
KeenComputer
Implement the solution using:
- Magento;
- Hyvä;
- WordPress;
- WooCommerce;
- Joomla;
- APIs;
- Docker;
- cloud infrastructure.
STEP 6 — Commercialization
KeenDirect
Develop:
- SEO;
- content;
- eCommerce;
- conversion funnels;
- CRM;
- email marketing;
- CRO.
STEP 7 — Continuous Improvement
All three organizations collaborate around:
Analytics → Research → Engineering → Marketing → Optimization
27. Final Strategic Proposition
The real opportunity is to move away from the traditional:
"We build websites."
model.
The stronger proposition is:
"We design and engineer digital experiences that connect customer needs, information architecture, technology and revenue."
The three organizations provide complementary capabilities:
|
Organization |
Primary Role |
UX Contribution |
|---|---|---|
|
IAS-Research |
Research & Innovation |
User/problem research, systems engineering, AI, IoT, advanced applications |
|
KeenComputer |
Engineering & Technology |
CMS, Magento, Hyvä, WordPress, Joomla, cloud, DevOps, security, performance |
|
KeenDirect |
Commercialization |
eCommerce, SEO, marketing, CRO, CRM, customer acquisition and revenue |
The strategic model is therefore:
IAS-Research discovers and innovates.
KeenComputer engineers and deploys.
KeenDirect markets, converts and commercializes.
This turns UX from a visual design exercise into a complete digital transformation and business-growth methodology.
And that is ultimately the most important message for an SME: