Challenge
The design process did not follow a linear or structured methodology typically advocated in UX frameworks, such as the stages of Empathize, Define, Ideate, Prototype, and Test. Driven by the imperative to revamp the user interface rapidly, the approach taken was to plunge directly into the prototyping phase, bypassing the foundational step of user research. This decision underscored the reality of Agility CMS’s position in terms of UX maturity. At that juncture, the emphasis was predominantly on aesthetic enhancement rather than grounding changes in deep user understanding. This approach revealed that, although the ambition to elevate the user experience was clear, the company was navigating the initial phases of incorporating a comprehensive and mature UX process into its development lifecycle.
When I began my journey at Headless CMS, I delved deeply into understanding the core of our platform. It felt like entering a realm brimming with untapped possibilities yet also marked by opportunities for enhancement. Through thorough examination, encompassing user input and design coherence, I uncovered strengths and pinpointed zones awaiting innovative enhancements. This immersive exploration shed light on the platform’s untapped capabilities, setting the stage for impactful transformations. It transcended mere aesthetics, focusing on enhancing user interactions to elevate our CMS beyond functionality, making it a delightful experience for all users.
My approach to UX research for the Headless CMS redesign was deeply informed by a commitment to continuous engagement with our users. This involved a sophisticated feedback loop mechanism alongside our qualitative and quantitative research methods.
User interviews and usability tests were not just moments of observation but opportunities for dialogue. We actively sought users’ ideas and pain points, creating an open environment for feedback. This approach ensured that every design iteration was informed by real user needs.
Surveys and analytics provided broad insights into user behavior and preferences.
Additionally, we used these tools as part of our feedback loop, allowing users to suggest improvements and identify areas needing refinement.
The insights from our enhanced UX research directly led to substantial improvements across key CMS features:
Integrating a feedback loop into our UX research process ensured that our redesign was not just based on initial insights but was continually refined by ongoing user input. This approach fostered a dynamic and responsive development environment, ultimately leading to a more user-centred Headless CMS.
The signup and login pages for Agility CMS were designed with simplicity and security in mind, featuring a split-screen layout with a content carousel to showcase the CMS’s versatility. A minimalist design reduces cognitive load, with forms for signup and login, including a job role field to personalize the experience. Additional features include password recovery, a remember me toggle, and an SSO (Single Sign-On) option. We used the latest Plenum UI design components for a modern look and integrated visual security cues. The dynamic background highlights the CMS’s potential, aiming to inspire users.
The Content Management View underwent a comprehensive redesign, leveraging the latest Plenum UI components to achieve a more intuitive, streamlined, and content-centric design. This overhaul introduced an improved layout that simplifies navigation across the interface and content items. The redesign also featured a refreshed color palette and typography, alongside an enhanced global navigation and search bar, fostering improved overall navigation within the main and section areas. Moreover, these enhancements are aimed at providing users with a more engaging and efficient experience when managing their content.
The development of the “Plenum” design system was a crucial milestone in my journey of redesigning, with the goal of creating a unified and standardized look and feel for Agility CMS. I chose the name “Plenum” because it symbolizes a space considered to be fully filled with matter, contrasting with a vacuum. This concept perfectly mirrored my ambition to eliminate gaps in our design and provide a seamless user experience across the platform. My journey began with a deep dive into the prevalent design trends and an examination of leading design systems to understand what was missing in our current setup and how we could uniquely fill that space within the context of our CMS.
Creating the Plenum design system was an all-encompassing endeavor that highlighted my commitment to improving user experience through thoughtful, unified, and scalable design. It stands not only as a collection of guidelines and components but as a manifestation of our dedication to delivering a consistently superior content management experience.
Choosing Tailwind CSS and integrating it with Storybook for our UI was a game-changer. I learned so much diving into Tailwind’s flexibility and pairing it with Storybook to craft our components. This combo not only streamlined our design process but also boosted my skills, making our user interface truly dynamic and user-friendly.
Redesigning the Home Dashboard at Headless CMS was a pivotal project aimed at creating a more welcoming, efficient, and intuitive starting point for our users. This effort focused on simplifying navigation, streamlining content access, and ensuring key functionalities were readily available and easy to understand. The redesign was not just about aesthetics; it was about enhancing usability and making sure users could quickly find what they needed, leading to a more productive and satisfying experience from the moment they logged in.
Diving into redesigning the Content Management screens at the Headless CMS platform, I focused on making the user’s journey smoother and more intuitive. My approach was all about understanding what our users needed most and bringing those insights into the design. I aimed to streamline the process of managing content, making it feel natural and efficient. By refining the design based on user feedback, I was able to create a space where content creators and developers could thrive, blending functionality with a visually appealing experience.
The redesign of the “Pages” section, now aptly renamed to “Layouts,” marked a critical enhancement, aligning the platform more closely with its core functionality. This comprehensive overhaul, extending beyond a mere name change, aimed to more accurately represent the concept of structuring and organizing site content. Additionally, I refined the process of adding and modifying components within these layouts, incorporating a drag-and-drop interaction. This new feature improves the ability to visualize and manage content architecture, making the user experience on Headless CMS more intuitive and closely aligned with users’ actual tasks.
In revamping our Digital Assets Management (DAM) system, my aim was to refine user flows and interactions for better clarity and usability. Focusing on the core functionalities, I implemented clearer states for each component, intuitive filtering, and straightforward management processes. A key improvement was ensuring users could easily identify media types and navigate through the system efficiently. This project was about enhancing the user experience on Headless CMS, making digital asset management a seamless part of their creative process.
The redesign of the Models section introduced a game-changer in content management: a visual representation and mapping of model hierarchy. This innovative feature, coupled with the ability for users to reorganize content models through drag-and-drop, transformed the way users interact with the platform. It made managing and understanding the structure of content models not just faster, but incredibly intuitive. This strategic redesign aimed at simplifying complex data relationships, enhancing Headless CMS’s usability, and empowering users with a more dynamic and efficient way to manage their digital ecosystem.
The redesign of the Reports section in Headless CMS introduced enhanced features for an improved user experience. I revamped key areas including “Recent Changes,” “Ready to Publish,” “Batches,” “User Activity,” and “Content Search.” This overhaul was aimed at providing users with a clearer, more accessible overview of their content and activity.
Through this redesign, users gained better insights and control over their content management processes, making the CMS more efficient and user-friendly.
The Settings section’s redesign in Headless CMS significantly enhanced user control over various site management aspects. This revamp included improved management of Global Configuration, Sitemaps, Locales, User Access, Team Access, and Roles. The aim was to make the management process more streamlined and intuitive, enabling users to easily configure their CMS settings, thereby optimizing workflow and enhancing collaboration within the platform.
Initially constrained to a UI facelift without direct user research, the UX evolution of Agility CMS took a turn for the better with the introduction of a live feedback loop post-launch. This became a game-changer, fostering intimate collaboration with stakeholders and aligning product development with user-driven insights.
Despite some limitations and challenges, such as not conducting external user interviews, tremendous strides were made towards a design that catered to inclusivity and efficiency. Ongoing improvements anchored by feedback and workshops known as “Pixel Perfection” sessions were instrumental in achieving an interface that users described as intuitive, engaging, and empowering.
The iterative, empathetic approach embedded within the project sculpted a flexible platform attuned to the evolving needs of content creators. The case study narrates a tale of transformation, anchored in user empathy, stakeholder collaboration, and a relentless drive for excellence.
The UX redesign of Agility CMS is more than just a story about interface enhancement. It is a testament to the power of empathy, adaptation, and responsive design thinking intertwined with strategic decision-making and direct user engagement. This narrative marries the concrete outcomes of holistic UX methods with the intangible yet invaluable growth of a product’s capacity to meet, and exceed, user expectations now and into the future.