Marketeq Digital
Due to the confidentiality agreement I signed during my internship (May 2023 - Aug 2023), I am unable to share specific screen designs or detailed interfaces from this project. However, I will provide an in-depth discussion of the UX processes, methodologies, and strategies employed throughout the development of my module.
Overview
Marketeq Digital is revolutionizing the content management system (CMS) space with its innovative flagship product, a headless CMS designed with user-friendliness at its core. This cutting-edge platform empowers users, regardless of their programming background, to manage and deliver digital content effortlessly. With an intuitive interface and simplified language, Marketeq Digital ensures that navigating complex digital landscapes is a breeze for its users, making it the perfect tool for those seeking ease in understanding language and design in content management systems.
Duration: 10 weeks
Team Size: 1 person
Key Responsibilities:
-
Problem Identification
-
Research - Competitive Analysis
-
Wireframes & Prototyping
-
Usability Study
PROBLEM & GOAL
Simplifying Complex Data Type Fields for Enhanced User Experience
The challenge involves the complexity of data type fields such as integer, float, boolean, media, URL, JSON, etc., which often need clarification for non-technical users due to their technical nature. This complexity can lead to errors and frustration, hindering user interaction with software applications. This project aims to simplify these data type fields, making them more accessible and user-friendly, thereby improving the overall user experience for a wider audience.
Problem Statement
Non-technical users struggle to understand and effectively use complex data type fields in CMS platforms, leading to decreased productivity and user satisfaction.
Project Goals
-
Simplify technical data types for non-technical users
-
Improve the overall user experience of CMS platforms
-
Design an intuitive interface for managing various data types
Insights from existing products in the market
Visual Content Modeling
Leading platforms offer intuitive visual interfaces for creating and managing content types, reducing the technical barrier for non-developers.
Customizable Field Types
Competitors provide a wide range of customizable field types, allowing users to create complex content structures without coding knowledge.
Real-time Preview
Many platforms feature real-time content previews across multiple devices and channels, helping non-technical users understand how their content will appear.
Drag-and-Drop Interfaces
User-friendly drag-and-drop interfaces for building content models and layouts are common, simplifying the process for non-technical users.
Contextual Help
CMS platforms incorporate in-app guidance, tooltips, and contextual help to assist users in understanding and utilizing complex data types.
RESEARCH
Diving Deep into the CMS Landscape: A Journey of Discovery and Prioritization
Feature Prioritization
Once I had the industry's best practice features, I began to evaluate each specific feature for micro features 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 method 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.
Learnings
-
The insights gained from competitor analysis were instrumental in identifying key areas where we could differentiate our product, ensuring it stood out in a crowded market.
-
Creating wireframes early in the design process helped align stakeholder expectations and provided a clear blueprint for the project’s direction, ensuring all team members were on the same page.
-
The iterative development of prototypes, informed by ongoing user testing, was crucial in refining user flows and interactions, leading to a more intuitive and user-friendly final product.
-
Utilizing Figma's Auto Layout, I created flexible designs that adapted seamlessly to different screen sizes, improving the overall responsiveness of the product.
Design
The Story of Bringing Vision to Life
Wireframes
I began by listing the micro-features and used Marketeq Digital's design system to create low-fidelity wireframes. My focus was on the page layout and user experience, particularly in features like dragging and dropping datatype fields or clicking to navigate to the working area. Once the wireframe for one datatype field was approved by the design lead, I proceeded to create wireframes for the remaining datatypes.
Low-Fidelity Mockups
I designed low-fidelity mockups for the data fields and conducted a round of user testing with peers to gather insights on their experiences and challenges. After receiving feedback, I documented any shortcomings in my design and made necessary adjustments based on the input.
High-Fidelity Mockups
Using Figma, I created several high-fidelity mockups, leveraging the auto-layout feature extensively. Due to the short duration of my internship, I completed designs for 5 out of 15 datatype fields and developed prototypes for these designs.