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.
My role
- UX Project Lead: Oversaw the project from conceptualization to post-launch optimizations.
- Coordination Across Teams: Ensured alignment between the design, development, and customer success teams to meet project goals.
- “Plenum” Design System Development: Collaborated with the design team to create a user-centered design framework.
- Conducting User Research: Organized and analyzed feedback from surveys, interviews, and usability tests.
- Facilitating “Pixel Perfection” Workshops: Led initiatives to bridge the gap between design and implementation, focusing on detailed execution.
- User Advocacy: Acted as the voice of the user throughout the project, ensuring the redesign met and exceeded user expectations.
Success Metrics
- User Engagement Metrics: Including average session duration, page views per session, and frequency of use.
- Task Completion Rate: Measuring the efficiency and intuitiveness of the CMS by tracking the percentage of completed tasks by users.
- Accessibility Compliance: Assessing the redesign against recognized web accessibility guidelines (such as WCAG 2.1) to ensure the platform is usable for individuals with various disabilities.
- User Satisfaction Scores: Collected through post-launch surveys and user interviews.
- Reduction in User Support Requests: A decrease in the number of support tickets related to usability issues indicated that the redesign effectively addressed common user challenges.
Understanding the existing solution
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.
Enhanced UX Research with Feedback Loops
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.
Qualitative Research:
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.
Quantitative Research:
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.
Feedback-Informed Design Enhancements
The insights from our enhanced UX research directly led to substantial improvements across key CMS features:
- Home Dashboard: Feedback highlighted a demand for simplicity and efficiency. We redesigned the dashboard to prioritize essential functions, making daily tasks more accessible.
- Content Management: User suggestions inspired us to streamline the content management process, making it more intuitive and reducing effort.
- Digital Asset Management: Analytics and user feedback underscored the importance of an organized digital asset system. We improved functionality, focusing on ease of use and better file management.
- Content Layouts: Incorporating user ideas, we introduced more flexible content layouts, empowering users to customize their content presentation effortlessly.
- Advanced Search: Our feedback loop revealed users’ struggles with finding content. We enhanced the search feature with powerful filters and options, directly addressing this issue.
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.
Initial concepts
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.
"Plenum" design system
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.
- Research and Inspiration: Started by exploring the latest design trends for inspiration and identifying essentials for our CMS.
- Defining Principles: Set core principles of simplicity, scalability, and user-centricity for the Plenum design system to enhance usability.
- Component Development: Created reusable and adaptable design components, from simple to complex, aligning with our principles.
- Guidelines for Implementation: Compiled documentation for easy integration of Plenum across the CMS, promoting consistency.
- Collaborative Refinement: Treated Plenum as a living system, refining it with user and team feedback to meet evolving needs.
- Education and Advocacy: Launched educational efforts on Plenum’s benefits and best practices, advocating for its adoption.
Crafting a User-Centric Headless CMS: Goals & Execution
- Enhance UI/UX for improved usability and consistency.
- Develop a comprehensive design system.
- Introduce user-centric features for better engagement.
- Create intuitive interfaces for ease of use.
- Implement feedback mechanisms for ongoing user input.
- Aim to reimagine the CMS experience as both functional and delightful.
- Set a new industry standard for content management platforms.
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.
Home dashboard
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.
Content Management
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.
Pages -> Layouts
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.
Digital Assets Management
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.
Models
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.
Reports
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.
Settings
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.
Results and takeaways
Outcome
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.
Conclusion
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.
