Research and design the content management system for a project details page on a headless CMS platform.
A sprint from Marketeq internship
Tools
Figma
Google Drive
My Role
UX Designer
UX Researcher
Platform
Customizable web application
Introduction
Marketeq is building a custom code-free integration tool that allows users to build fully customizable API integrations, extensions, and websites without the need to write code. The program is focused on streamlining workflow automation, allowing users to connect various services, apply logic, and trigger actions, all without traditional coding knowledge.
My Role
UX Researcher
Complete market research to discover top features related to project details page
UX Designer
Create wireframes, prototypes and components related to project details.
Problem
Current Market headless CMS are not user-friendly in handling project-specific content management.
Goal
Research & present solutions for item management for headless CMS projects and design a more user-friendly way to manage items contained in a specific project.
Research
Approach
Perform heuristic evaluations of top headless CMS platforms in order to get an understanding of how competitors organize project content.
Create a list of features found on the top headless CMS platforms in order to understand the landscape of available functionalities and to identify key elements that contribute to a successful and robust content management system.
Card Sort each feature into Must Have, Nice to Have, and Will Not Have in order to begin to create a minimum viable product and maintain focus on features that are essential for the core functionality.
Starting with Must Have Features, evaluate each feature for micro features to ensure that we cover all the essential elements necessary for the core functionality of each feature.
Heuristic Evaluation
I was able to find 12 specific headless CMS programs that offered free trials. I took screenshots of each program’s content management system in order to get a clear idea of how headless CMS platforms list and organize their content. Specifically, I was looking for what competitors had in their list view columns & how they organized different types of content in order to gain insights into their data organization, and prioritization which could help us enhance the usability and efficiency of our own content management system. I also evaluated how different platforms switched between
I used green circles to label what I thought was easy to understand and red circles to indicate what was difficult to understand. I began making a list of features that each platform offered to evaluate their potential to fulfill our project's requirements comprehensively and deliver a seamless user experience to new users.
Feature List
From the 12 headless CMS competitors, I was able to create a feature list of the most used features in the project details section giving me valuable insights into the industry's best practices and helping me prioritize the functionalities that are proven to be effective and in demand.
Micro- Features: Must Have, Nice to Have, Wont Have
Once I had the industry's best practice features, I began to evaluate each specific feature for micro features to begin to build a comprehensive and detailed understanding of the capabilities offered by each feature. I divided these micro-features into three categories:
Must-Have - a micro-feature that is necessary for the feature to function
Nice to Have - a micro-feature that is not necessary for the functioning of the feature, but enhances user experience
Will Not Have - a micro-feature that is confusing, harmful to user experience, or confusing to the user.
This analysis allowed me to make informed decisions about the strengths and limitations of each feature, helping me design the most optimal and well-rounded features for our platform.
Findings
By consolidating the data I found across the 12 headless CMS platforms, I was able to compile a list of important and commonly used features, as well as best practices of the organization of list items & different types of content. This comprehensive approach provided valuable insights that will guide me in building a content management system that not only incorporates industry-standard functionalities but also optimizes data organization for an intuitive and efficient user experience.
Sort By
Multi-select
Options
Filter
Top Features
Name
Type
Last Modified
Created By
Publish Status
Top Column Headers for List View
Wireframes
Sort By, Column Headers, & List View
I carefully examined and screenshotted the different column headers and sort by features on all 12 platforms and created a comprehensive list. Then, I categorized the methods into three groups: must have, nice to have, and will not have, based on their frequency and relevance to our platform. This process ensures that our platform is optimized and meets industry standards.
In order to ensure that users have all the options available to them when using the list view, recreated a feature similar to what I found on several headless CMS platforms. This feature, which I turned into a Figma component, enables users to customize their list view by dragging available columns into displayed columns. They can also hide unwanted columns by dragging them into available columns.
Options & Multi-Select
I repeated the process for the options and multi-select features screenshotting all the options for individual items and for when items are multi-selected across the 12 headless CMS platforms and created a comprehensive list. Then, I categorized the methods into three groups: must have, nice to have, and will not have, based on their frequency and relevance to our platform.
I created a list of micro features in order to thoroughly understand the variations and nuances of options and multi-select functionalities across the 12 headless CMS platforms. This detailed analysis allows me to leverage best practices, optimize user interactions, and design a feature that excels in accommodating different user preferences and use cases, ensuring a seamless and intuitive experience for our users. Using this feature list, I designed Figma components that integrate the top user experience features, as requested by the stakeholders.
Filters
For the filter, I repeated the previous process from the other features, I examined and screenshotted the different filter options on all 12 platforms and created a comprehensive list. Then, I categorized the methods into three groups: must have, nice to have, and will not have, based on their frequency and relevance to our platform.
Using all the filter layouts and features I found in my screenshots across the 12 headless CMS platforms, I was able to make a comprehensive and well-informed design. The screenshots and feature list allowed me to identify the most effective filter designs and functionalities, empowering me to implement an optimized filtering system in our content management system, enhancing user navigation and content discovery.
Conclusion
This project has given Marketeq a strong starting point for building an awesome content management system for projects. Combining thorough research, best practices, and industry-standard features allowed me to develop a content management page that truly stands out and exceeds industry norms. It's a cutting-edge solution that boosts Marketeqs competitiveness and offers users a seamless experience for new users moving from other headless CMS platforms.
See More
Research & design a way to display sustainability data in an effective way that builds user trust ↗
Research & design a feature for customers to divide payments with others ↗
Increasing Intakes for a Mental Health Private Practice by 320%↗