Improving the UX & UI of a content management system through user research ✏️ 🔍

MODX is an open-source content management system (CMS) which has been around since 2004. It focuses on flexible content management and has powered over thousands of websites doing so. In 2018, Sterc Online Agency and MODX LLC (the company behind the product) planned on releasing the third version of the CMS: MODX 3. I was asked to join the team in order to evaluate the UX and UI of MODX 2 and kickstart the UX/UI redesign process for MODX 3. During this project, I worked together with development and the MODX community. 

In order to start evaluating the user experience of MODX 2, I firstly had to become acquainted with the users. By exploring the Slack community and interviewing the MODX Advisory Board, I gained insight in the different types of users, which I defined as: 

• Newbie users: Content Managers (non-developers)
• Casual users: Generic Developers
• Expert users: MODX Specialists

These user types helped me with empathising more effectively throughout the project.

After defining user types, I wanted to learn how people were experiencing the user interface of MODX 2. Due to the fact MODX has a highly active community, it was easy to find users who wanted to share their opinions. Therefore, I conducted a survey to map both primary pain points and user goals per user type. The results showed me where the biggest UX/UI improvements could be made, according to the community.

In addition to the survey results, I wanted to see how people were interacting with the system. Since experienced MODX users were unconsciously using a lot of workarounds on weak parts of the UI, I tapped in on a MODX introduction workshop where participants were using MODX for the first time. This gave me a ‘raw’ impression of how intuitive the interface really was for someone without any prior MODX experience. I observed the workshop participants interacting with the UI. Fly-on-the-wall style. 🦟

After collecting data from the survey and observations, I analysed the results. I summarised the primary pain points and user goals per user type by comparing the outcomes of different methods. I presented these results to the MODX Advisory Board to inform them about what options they had to improve the user experience for different types of users. They used my input in their decision-making process on what to include in the MODX 3 project scope.

For the MODX 3 project, the MODX Advisory Board decided to focus on optimising the primary user flows for the Content Manager user type. I was asked to kick off the UI redesign process. I started off by drawing flowcharts to identify the different steps of the relevant user flows. In addition, I started sketching wireframes to quickly explore what kind of layout and UI elements each screen needed. I discussed these concepts with both the project team and the user community to determine the direction of the UI design process.

After determining the direction, I started redesigning the UI by using Sketch and UXPin in order to improve the overall user experience for the Content Manager user type. I focused on the UI parts which were involved in the primary user flows I discovered during the research process. 

One example of what was discovered during the research phase, was that users from the Content Manager segment had a hard time choosing the right template from the dropdown list. This was caused by the fact that it was not clear how a template looked like before saving it. Users worked around this problem by jumping on to a trial-and-error strategy: select a template, save it, refresh the front-end and check if it is the right one. Didn’t get lucky? Try the next one. As you may understand, this was very frustrating in terms of user experience. Imagine having more than 10 templates… 

As a solution, I designed a template previewer which showed a thumbnail of the template selected. This way, the user could see what he or she was doing without saving and refreshing over and over. This considerably reduced the number of clicks needed to choose the right template for a page.

Along the design process I did a lot of testing in order to check how users were responding to new ideas. One example of this was testing different concepts for the MODX file tree. The tree is the most-used UI component of MODX and therefore very sensitive to change. I tested a lot of different concepts and iterated step by step. 

User interfaces are not static. In fact, user interfaces are highly variable. The way an interface responds to user actions has a strong influence on the user experience. Therefore, I did not stop at testing plain designs. I also tested multiple animation concepts. 

Before the designs were turned into code, I explained my thoughts behind every design choice that was made during the process in order to make sure every part of it found its way into the front-end. 

Also, during the development process I stayed involved via GitHub in order to help developers find solutions for any unexpected integration roadblocks which could have an impact on the user experience. 

I learned about the value of good user experience research. When asking the right questions to the right people, you’ll know what to focus on. This helps you to improve the user experience both efficiently and effectively which will have a positive influence on your return on investment.

During the user research process, I was genuinely surprised to see how much time users were losing while trying to select the right template for their MODX webpage. We added the template previewer so users could see what a template would look like before saving it. In terms of clicks, this tested to be much more efficient for users.

The project had many challenges, but the most difficult part was to find a balance between technical possibilities and an optimised user experience. Thankfully the team worked together closely, which enabled us to iterate quickly and find a suitable solution doing so. 

While the whole project was a huge learning experience, I especially enjoyed iterating on designs and testing those new designs with users. This feedback loop helped take ambiguity out of the designs, and it felt good to produce designs with the confidence that users would enjoy and understand it.