Company: Ibexa - eZ Systems
This is a case of a customer request asking for a specific improvement that we ended up adding it to the product.
Customer is in News industry, with a large editorial team and spending extensive time working on content in the platform.
Led the adoption of user-testing tools and user-testing and increase Product Management’s team capabilities in this area.
eZ Platform is a Digital Experience Platform (DXP) created by Ibexa that helps B2B companies to stay relevant and succeed by transforming traditional sales strategies into frictionless buying experiences. This DXP is ideal for large enterprises working on complex projects requiring several languages, with numerous sites, and multiple content types.
Ibexa's eZ Platform offers the ability to build interactive sites, pages and views and deliver multisite, multichannel and multilingual websites and apps. It gives organizations the control to create, and structure their content, reuse it and present it differently from a single location. It also provides a granular configurable system for user permissions, which allows organizations to set specific access rights for users and roles across all features.
View of online editor constraints and problem framing.
This case exemplifies the work with Enterprise customers and the contribution of my role to this process.
View of issue flow when a customer request involved Ibexa's Product Management team.
Editors were the main personas affected by this pain point.
Their feedback was quite simple but sharp: When creating or editing content the contextual Paragraph toolbar is inhibiting basic editorial tasks and hence was annoying the team. They also asked if the toolbar could behave more like a standard Alloy.
View of online editor v1 pain point.
View of online editor v1 pain point and persona.
Just in case you are not 100% familiar with this editorial tool, I believe it is worth focusing briefly on providing some background about the Online Editor, Ibexa's eZ Platform RichText Editor. This editorial feature it is based on Alloy Editor, which in turn is based on CKEditor. When Ibexa decided to adopt Alloy, it was clear that it would need to include advanced capabilities for editorial tasks common to eZ Platform’s editor personas.
View of Ibexa's online editor v1 and demo view of Liferay's Alloy Editor.
Almost in parallel to the issue that customer reported in regards to the toolbar I had already been running a series of user testing sessions and this issue was also turning up. The major pain point detected showed users clicking above the paragraph they were working on to move the toolbar up to be able to read the content just written (a very usual task when editing or creating content).
View of online editor testing summary.
A common use case showed a user clicking an average of 25 times for a long editing workflow, about 45 minutes. Users' tricks to avoid the Online Editor toolbar? Clicking on two paragraphs above; clicking one paragraph below; or clicking outside of the Input Rich Text box, as seen on the clicks on the right toolbar.
View of user testing flow for a long editorial workflow (~45 minutes), showing all interactions performed so far.
View of online editor testing session, regular clicks highlighted.
View of online editor testing session, extra clicks highlighted.
So when the customer request came through, Customer Success and Product Support Departments, along with Product Team members —me included— were ready to work together with them. We already had the background knowledge of what was the customer’s real issue.
To address our customer’s feedback we decided to split the efforts into two scopes—one short-term for v1.13 that customers could pull, and one mid-term for v2.
For v1.13, we sought out a few different approaches:
However, after iterating with our customer’s team and testing them, both of these approaches proved to be clunky or janky. So in the end, we looked into attaching the toolbar to the top of the editor, which proved we needed to handle cases where the top of the editor is not visible within current browser view.
The final resolution, which the customer was satisfied with, is the following:
View of final solution in Online Editor v1.13.2 - Paragraph toolbar now positioned on top of the editor view.
Gif showing behavior of Online Editor v1.13.2 after fixup - Paragraph toolbar now positioned on top of the editor view.
Editorial UX is a key driver in the choice of a CMS. That’s why ease-of-use and speed, including for the Online Editor, was the main focus for the next improvements added to that Fast Track release and the following ones.
The feature improvements targeted in the Fast Track releases relied on placing content at the center of the editorial experience. This is one of the most important aspects I have learned from the exchange with this specific customer in the News industry but also with customers in other domains—and it’s something I truly agree on.
View of online editor final solution implemented.
View of Rich Text styling toolbar in version 2.