Design System for Joomla!

User-Centered Redesign of Joomla! CMS.

Scope

To retain and attract new users, Joomla needed a complete revamp to be more user-centered.

To retain and attract new users, Joomla needed a complete revamp to be more user-centered.

Goal

Retain existing user and attract new user by improving usability and ease of use.

Core Team

1 UX researcher,

1 Designer System manager (me),

2 Full-stack developers.

1 UX researcher, 1 Designer System manager (me), 2 Full-stack developers.

My Role

Design-System

Heuristic Evaluation

Usability Testing

A/b Testing

Completion Time

3 months

Link

Github Repo

Context -

As of 2014 market share of Joomla! is curving downward; meanwhile, its learning curve is going upward, even for veteran developers. It needed a complete redesign of the entire system to align with its user’s needs.
By 2014, Joomla's market share was declining, and its learning curve was steepening, even for experienced developers.

A complete system redesign was necessary to meet evolving user and market needs.

  • The company I worked for developed the most used page-builder based on Joomla CMS.

  • Our product was the most popular page-builder in the market and generated significant revenue for the company.

  • However, in 2019, we noticed a decline in revenues, and after investigating, we discovered that the problem was with Joomla itself.

  • Joomla has become too complex for even skilled developers to use effectively and hasn't gained new users since 2018.

Our company's Joomla-based page-builder was once the market leader, generating significant revenue.

However, we noticed a decline in 2019 due to Joomla's increasing complexity, hindering user adoption and growth.

To retain and attract new users, Joomla needed a complete revamp to be more user-centered.

My team and I volunteered for this open-source project.
To revitalize Joomla and attract new users, we volunteered to lead a complete user-centered redesign.
To retain and attract new users, Joomla needed a complete revamp to be more user-centered.

The Experience Vision

The Biggest Challenge was the buy-in from the stakeholders. As it was an open-source CMS, advisory board members, many contributors, community managers and maintainers were actively involved. Sadly, almost all of them are engineers and have no prior experience in human-centered design approaches.
The Biggest Challenge was securing buy-in from stakeholders, most of whom were engineers unfamiliar with human-centered design.

Our Approach -

Step: 1
Quantitative testing of existing design -

Goal:

  • Gather data on existing UX metrics of Joomla, such as user satisfaction, task completion rate, error rate, time on task, bounce rate, and conversion rate.

  • Benchmark Joomla against its competitors or industry standards to identify critical pain points.

  • Set clear goals and UX outcomes based on the most important pain points for the redesign project.

  • Collect Joomla's UX metrics: user satisfaction, task completion, errors, time on task, bounce and conversion rates.

  • Benchmark Joomla against competitors to identify key pain points.

  • Set clear goals and UX outcomes for redesign based on critical pain points.

Process -

23
Interview sessions with existing users
23
Different usability test on 50 user
17 hrs
of expert Heuristic Evaluation (HE)

Process -

23
Interviews
23
Usability test
17 hrs
of expert HE

Process -

23
Interview sessions with existing users
23
Different usability test on 50 user
17 hrs
of expert Heuristic Evaluation (HE)
Step: 2
Gather, Share & Prioritize the test results -

Process

Process:

Process:

– Categorize and prioritize UX ideas, research findings, and other rich topics efficiently with stakeholders.

– Quantify the results of the affinity diagramming process by counting the number of ideas that fall into each category.

– Prioritize the categories based on their frequency and impact to focus on the most valuable areas for users to improve.

150

Total Number of Ideas Selected

150

Total Ideas Selected

150

Total Ideas Selected

Affinity diagramming

Affinity diagramming

Affinity diagramming

Step: 3
Idea Implementation and Design System -

Design Previews

Step: 4
Measure the design improvements -
Design improvements -
90%

90%

User preference

User preference

Task Completion

Error rate

User satisfaction

63% Faster
63%

Task time from 8min to 3min

Faster task on time rate

67% Reduced

User error from 15% to 5%

67%

Reduced User error from

45% Increased
45%

SUS score from 55 to 80

Increased SUS score from

Outcomes -

The new design was officially accepted as the primary design for the next Joomla update.
Additionally, the new design system improved the company's efficiency and reduced development time and costs by 20%.
The new design system improved the company's efficiency and reduced development time and costs by 20%.

The redesign drove Joomla's growth in Q1 2020 by - increasing +3% of CMS market share & acquiring +8% new users.