AI WORKFLOW BUILDER
A low-code cloud platform that enables businesses to develop AI models with minimal effort and resources while increasing efficiency.
MY ROLE
-
Collaborate closely with cross-functional teams to ensure the seamless integration of design concepts.
-
Created user flows, wireframes, and interactive prototypes.
-
Contributed to the development of design systems to enhance design coherence and streamline development processes.
Platform: Web-app
Duration: 12 weeks
Industry Sector: Artificial Intelligence
Collaboration Tools: Figma, Gitlab, Notion.
PROJECT OVERVIEW
BACKGROUND
Mantium is a global cloud platform that simplifies the development and management of AI applications at scale. With a mission to democratize AI, Mantium aims to make AI accessible to both technical and non-technical teams, allowing them to design, test, deploy, and share AI prototypes quickly and efficiently using features like the One-Click Deploy tool.
THE PROBLEM
As Mantium looked to expand its product offerings, the need arose to create a feature that would easily support no-code and low-code users in building AI solutions. The challenge was to design a scalable AI Builder Workflow MVP that would enable users to effortlessly create, customize, and configure AI workflows with minimal technical know-how or resources. To ensure success, this feature required an intuitive design strategy, user guidance, pre-built workflow templates, and robust support mechanisms to assist users facing difficulties.
THE SOLUTION
To tackle these challenges, the AI Builder Workflow feature was designed as a scalable solution that simplifies the creation and customization of AI workflows for both no-code and low-code users. By incorporating a progressive disclosure strategy and providing pre-built templates and comprehensive support, the platform enables users to build AI workflows efficiently, regardless of their technical expertise.
RESEARCH
PROJECT KICK-OFF
Our design journey began with a goal-directed approach, ensuring we stayed aligned with the project's objectives throughout the AI- Builder design process. We emphasized three core principles: communication, collaboration, and iteration. These values guided the flow of our design, fostering an environment where ideas could evolve organically.
UNDERSTANDING THE MARKET
During the research phase, we aimed to deepen our understanding of both the market and our users. This process involved challenging our assumptions and validating insights through market analysis. We set out to achieve the following:
​
-
Defining our primary audience and understanding their needs and goals.​
​​
-
Pinpointing users’ needs for a tool like the AI Builder Workflow.
​
-
Analyzing how the feature will compete with existing solutions,
COMPETITIVE ANALYSIS
We conducted extensive research into the workflow industry to gain a deeper understanding of the competitive landscape. Our analysis covered direct and indirect competitors, including platforms like Zapier, n8n.io, Runalloy, and Workflow 86. This exploration allowed us to pinpoint standout features, assess strengths and weaknesses, and identify opportunities for the AI Builder to succeed in the marketplace.
SYNTHESIS AND CONSIDERATIONS
-
Focus on building a comprehensive library of pre-built workflow templates for seamless user adoption.
​
-
Reduce the learning curve for complex workflows through effective guidance and support.
​
-
Balance simplicity with advanced features to cater to both no-code and low-code users.​
DEFINING THE PROBLEM
PROBLEM STATEMENT & GOALS
Given our broad and diverse user base, spanning multiple industries, we needed a solution that could scale to meet the unique challenges of businesses, regardless of size or sector. The following “How Might We” statements guided our design approach:
​How might we create an intuitive and user-friendly workflow builder that simplifies automation for businesses of all sizes and sectors?​
PRODUCT GOALS
The primary product goal is to develop a workflow builder that simplifies the creation and customization of AI solutions for businesses of all sizes and industries, by offering pre-built workflow templates tailored for common use cases, and providing support mechanism to assist users, ensuring a smooth learning curve and continued assistance throughout the user journey.
IDEATION
CREATING STRUCTURE
To conceptualize the AI Builder experience, we developed a detailed user flow that allowed us to focus on user needs and interactions. This flow laid the groundwork for the core experience, clarifying entry and exit points before diving into feature specifics.
VISUALIZING A SEAMLESS INTERACTION
I developed low-fidelity wireframes to lay out the initial design, focusing on logical content structure and minimal cognitive load. By referencing design patterns from other workflow builders, we ensured that our UI was both familiar and easy to navigate..
​
Key iterations focused on:
​
-
Simplifying navigation to ensure users can easily move through the workflow builde
​
-
Structuring pre-built templates logically, allowing users to quickly find and implement relevant templates for their needs.
​
-
Enhancing user guidance with visual cues and tooltips for easier workflow creation.​
HIGH-FIDELITY PROTOTYPES
The objective is to create a seamless solution that allows both low-code and no-code users to effortlessly construct intricate AI solutions with minimal effort and resources. This is achieved through the implementation of a progressive disclosure design strategy, integrating user guidance, pre-built workflow templates, and support features to assist users when facing challenges.​
Initiate Workflow
To uphold a sense of control over the workflow, we introduced two prominent Call-to-Action (CTA) buttons. Users can explore a variety of pre-built workflows by selecting the "Explore Templates" option on the AI Builder page. Alternatively, they can commence the creation of a new workflow by choosing the "Get Started" option.
Pre-built Workflow Templates
The pre-designed template library is crafted to enhance user convenience by offering a user-friendly interface for exploration, search functionalities, and easy configuration based on specific business requirements.
-min-min_gif.gif)
Scaling the information architecture
To enhance the information architecture, I implemented collapsible sidebar navigation to enhance user navigation ease. A side panel view was also added to the canvas page to show detailed information about the functions of each block in order to help users create workflows successfully.
Error/Checkmark Indicators
To improve the workflow process's usability, a green check mark appears in front of each correctly input parameter step, whereas an error icon shows in front of any skipped or missing steps. At the top, there's also a button that shows the total number of errors made while creating a workflow.
_gif.gif)
Apps Overview
To make the overview page for apps more intuitive, we implemented a toggle switch to distinguish between active and inactive apps. An error button was also added to provide a quick overview of the total number of errors present in the workflow.
USABILITY TESTING
CONCEPT VALIDATION & FEEDBACKS
To evaluate the effectiveness of the AI Builder flow, I conducted usability testing with five users to gather feedback on the app’s functionality, structural layout, visual design, and interactivity. The key objectives were to assess workflow efficiency, evaluate the accessibility of templates, validate the error handling features, and uncover any areas for improvement.
​
The feedback from participants validated the design concept and provided valuable insights for future iterations:
​
-
Workflow Efficiency: Users expressed satisfaction with the workflow’s simplicity and ease of navigation.
​
-
Template Accessibility: Feedback indicated that the template library was well-structured, facilitating faster integration.
​
-
Effectiveness of Error Handling: Participants found the checkmark system effective for providing visual feedback on workflow steps.
​
-
Overall Improvement: While some areas needed enhancement, the app was generally perceived as intuitive.
DESIGN SYSTEM
DEVELOPER HAND-OFF
To foster a seamless collaboration between design and development, I worked closely with developers to ensure the feasibility of design concepts and their successful implementation. I shared the components created for the design with the development team, facilitating a streamlined hand-off process. Regular interactions, including weekly stand-ups and demos, provided opportunities to discuss progress and compare the implementation plans with the final designs. This collaborative approach promoted transparency, resolved potential discrepancies, and ensured a smoother transition between the design and development phases.
CONCLUSION
IMPACT & TAKE AWAY
The AI Builder Workflow achieved a significant milestone by establishing a partnership with Amazon Web Services (AWS) shortly after its launch. This collaboration not only signifies recognition and validation of the AI Builder's capabilities but also positions it within a broader ecosystem, unlocking new opportunities, resources, and support through AWS.
​
Key takeaways from this project include:
​
-
Engaging engineering early minimizes rework and leverages insights to enhance the design strategy.
​
-
Using an iterative approach helps simplifies complex features, leading to smoother development and better bug management.
​
-
Gathering feedback throughout the process helps identify pain points, ensuring a more user-friendly experience.
NEXT STEPS
​If it were to continue, I would explore the following:
​​​
-
Refine and enhance user experiences by following established design principles and the product roadmap.
​
-
Conduct usability testing to confirm the resolution of users' frustrations and assess the efficiency of the implemented changes. ​
​
-
Plan underway to introduce new functionalities in the next phase to keep pace with evolving user needs.
.png)
%20(1).png)
.png)
