A no-code workflow builder for enterprise & mid-sized media companies
DESIGN FOR WEB APP
RESEARCH
STRATEGY
DESIGN SPEC
About the project
Tessact, a B2B platform, uses AI and ML to streamline video post-production workflows. The company wanted to introduce a new feature—a workflow builder and workflow tracking system tailored to the media industry.
The project was divided into three parts:
1. Workflow orchestration
2. Workflows and permissions
3. Workflows in action inside the product
This case study focuses on the first part of the execution, workflow orchestration.
OBJECTIVES
Client Self-Service
Enable clients to create and manage custom workflows independently through a no-code, intuitive interface.
Flexibility and Customisation
Develop a highly flexible workflow builder that supports diverse client requirements and custom workflow steps, triggers, and actions.
Access Control & templatisation
Each step should be link to a part of the product depending on the task the step performs.
Scalability
Design a scalable architecture supporting organizations of all sizes, handling both simple and complex workflows.
ROLE
Sole designer on the project, Research and Design, Conceptualisation, User interviews, Design spec creation, dev hand-off & dev implementation reviews
THE TEAM
Front end - Nitin Ranganath & Unnati B
Backend - Rashad P & Faiz P
Design - Yasha P
TIMELINE
January - March 2024
Process overview
Problem & direction discovery through research
The product brief given to me was technically structured and had basic business requirements outlined, but open ended when it came to design and strategy, so i decided to do my own problem discovery exercise through strategic generative research.
Competitive audit
Three applications namely: Asana, Monday.com, and click up were reviewed for this audit with a goal to find out how these indirect competitors' products/services work and identify the strengths and weaknesses
Key take aways:
I compiled the primary user research findings into a user journey map
Based on the semi-structured interviews with the users and the SMEs, I compiled my findings into two user journeys - 1. A user responsible for worklfow creation & 2. A user who would be using this workflow in his day-to-day
Key take aways:
Designing a robust no-code workflow builder
PROBLEM STATEMENT
How might we empower individuals to create and integrate workflows within our product, faster and easier while making it accessible for people with varying skill levels?
Brainstorming & ideation
The derived insights and takeaways were shared with the a group of users and stakeholders. They were asked to come up with a wide range of ideas which then we mapped into common clusters
Participatory design: members coming up with ideas and presenting it to the group
Affinity mapping: creating affinity groups
Affinity groups &
concept evaluation
After synthesising the affinity themes and coming up with insights and a direction for the feature, I sat down with the project manager, product head and developers for concept evaluation and refinement. We refined the generated concepts based on feasibility, desirability, viability, and strategic alignment with Tessact's business objectives and target market segments.
Testing initial concept
Based on the insights gathered, I came up with wireframe explores for different approaches and got quick feedback for the same from the users and stakeholders.
✅
More visual in nature, easier to play around with, match with real world
✅
More user control and freedom, easy reversal of action
✅
Concept of step templates, allowing for re-using previously created step cards allows for fast workflow creation
🚫
How do I know if the workflow breaks?
🚫
Two levels of step card types - this can get confusing and is not very vital to the user experience or structure - can reduce it to 1 level of card type
🚫
Per step When - Do creation is repetitive
🚫
The anatomy of the card needs simplification. “when” “do” is confusing and not visually consistent
✅
More visual in nature, easier to play around with, match with real world
✅
More user control and freedom, easy reversal of action
✅
Easier to recognise errors, and fix them
✅
Standard card type, allowing users to confidently take decisions
🚫
Adding cards only via + button in the workflow is making it seem more linear in nature, thus misguiding and confusing and also taking away from the freedom of the users
🚫
When - Do is still repetitive and confusing when they are in the same visual hierarchy as other details.
Final designs
Based on all insights and feedbacks gathered so far into the process, I set out to make the final designs.
A step-by-step onboarding
From research we knew that workflow orchestraion is a heavy task and would have a steeper learning curve.
To mitigate this, we introduced a step-by-step onboarding process complemented by a visual preview of the whiteboard. So that the user knows the impact his decisions & actions have and can confidently make these decisions ensuring usability, learnability, and user-centeredness while facilitating clarity and simplicity.
Step 1: User enters the basic details of the workflow they want to create.
Defining steps in a workflow
Step 2: Workflow step creation:
Listing the steps the workflow will go through.
They have the ability to edit at any time in the workflow creation process and they are informed about the same.
As we moved ahead step by step, we kept educating the users on the terminologies and their functions.
Different statuses for different steps
We found out that each step can have unique set of statuses depending on the requirement of that task & team. for. e.g. publishing team would need a custom status “Published” which the editing team would not.
Step 3: The users can choose the statuses each step will have, if required the user can also custom create a status.
Step cards vs. teams vs. parts of the product
Step 4: The user lands into the workflow builder, all the details he entered in the onboarding now become cards with the details entailed inside it.
He can now further customise the workflow by adding teams, step types, rules, step templates and linking these cards together to form connections and automations.
A step card consists of 3 major components:
Step type: links it to the part of the product
Team: links to the responsible team for that task
Rules: Triggers & actions that allows movement in of the workflow from one step to the other
One output per workflow
To simplify tracking, we chose to link each project to a single workflow and have one output per project.
This simplifies project management, reduces cross-referencing needs, and makes tracking processes clearer.
Anatomy of the page
The screen is divided into 2 main parts - The menu on LHS & the infinite canvas on the RHS
This remains the main view throughout the creation flow. The elements on the page are as follows:
Step types & access control
In Tessact, a step type is like a ready-made plan for a particular job you need to do in your project. It's already set up with all the details and tools you need to get that job done smoothly. Users can select the appropriate step type, which comes pre-configured with all necessary details and tools, expediting the workflow setup process. Step types help solve for the following:
Ensuring consistency and standardization: By defining specific step types, Tessact ensures that all workflows adhere to a consistent structure and format, reducing confusion and errors.
Simplifying workflow creation: Step types simplify the process of creating workflows by providing pre-configured templates for common tasks and actions, saving users time and effort.
Enhancing usability and user experience: By offering a selection of predefined step types, Tessact improves the usability and learnability of the platform, making it easier for users to navigate and utilize its features effectively.
Teams & steps
Each step is assigned to a team in Tessact, this reflects in the product inside the team’s page. Members from the team can assign these tasks to themselves.
Why drag and drop?
Intuitive Interaction: Users can effortlessly assign conditions and actions by dragging and dropping rules onto step cards, mimicking physical interactions.
Efficiency and Speed: Streamlines the workflow, enabling users to quickly and precisely assign conditions and actions without navigating complex menus or input forms. This saves time and effort, enhancing productivity.
Visual Feedback: As users drag rules onto step cards, they receive immediate visual feedback, such as highlighting or snapping to indicate where the rule will be placed. This real-time feedback ensures accuracy and helps users make informed decisions.
Flexibility and Creativity: Drag and drop empowers users to experiment with different rule configurations, fostering creativity and exploration. Users can easily test and iterate on their rule sets by rearranging them on step cards in real-time.
Accessibility: Drag and drop functionality is accessible to users of all skill levels, promoting inclusivity and ensuring that even novice users can interact with the application effectively. This enhances usability and encourages adoption of the workflow builder.
Rules: triggers & actions
The Rule Composer addresses the pain point of inefficient manual processes by providing a flexible and scalable solution that streamlines the creation of complex, automated workflows. It exemplifies a user-centered approach to automation, enhancing productivity and user experience.
Rules, which are combinations of reusable actions and triggers, enable users to automate common tasks and events without the need to configure individual steps for each workflow, ultimately reducing redundancy and increasing efficiency.
Users can drag and drop rules from the side panel onto the step card and make further changes as required
There are a set of rules provided from Tessact, users can choose to edit these or create new rules based on their preference and workflow requirements
Connecting & automating the workflows
After a rule has been added to step, the user can then go ahead and start linking the rule to different steps
If their actions cause gaps in the workflow, dynamic highlighting immediately identifies and flags any issues as they arise, empowering users to address them promptly before proceeding to prevent errors.
Creating rules:
actions & triggers
Rule Composer streamlines workflow automation. Users can define reusable rules with a single trigger and multiple actions tailored to their needs. Created rules are added to a centralized library, accessible to authorized users across the platform, fostering collaboration and consistency.
The Rule Composer empowers users by leveraging the product's features to craft triggers and actions that integrate seamlessly with existing processes.
Step templates
Step templates alleviate the pain point of repetitive and time-consuming workflow creation tasks. Users often find themselves replicating the same set of actions across multiple workflows, leading to frustration and inefficiency.
To address this challenge, the platform allows users to create and save frequently used steps as templates. These templates can then be easily accessed and added to new workflows by any user with the appropriate permissions.
By eliminating the need to rebuild common steps from scratch each time, step templates streamline the workflow creation process while reducing redundancy and frustration.
Collaboration & communication
User feedback & secondary research emphasized the importance of collaboration tools for seamless teamwork and communication to increase productivity and speed up tasks, reduce back-and-forth, and keep conversations relevant, current and contextual to the workflow creation process.
Designed by Akash Nagaraj, this collaboration feature was seamlessly integrated into the Workflow Builder, leveraging its existing capabilities and user familiarity.
Impact & Learning
IMPACT
The feature was rolled out to all existing clients and the feedback was very positive
Freed up the development team from manually setting up workflows for each new client requirement, saving significant time and resources.
Eliminated clients' dependency on Tessact or on their in-house IT teams for workflow setup, improving customer experience and autonomy.
LEARNING
Prioritize
Create a strategic plan to launch a feature that solves the objectives. This helps deal with out-of-scope requests that could potentially derail the project and helps deliver a quality feature in time.Seek out feedback early and continually
Keeping the stakeholders/users in loop and testing solutions as early as possible saves ample amount of time and re-work.Keeping developers in loop early on
Taking developers’ opinions on ideas is very crucial as they get the much needed technical angle to the table early on, this not only helps generate more ideas from a different perspective, but also ensures we are technically grounded in the solution we are coming up with that fits into the existing tech set up of the product.
Next project
Made with ❤️ in namma Blr
Say hi! yasha.patki@yahoo.com