How I Unified Form Designs to Improve User Experience?
Bringing a consistent, unified 🫱🏽🫲🏾 and efficient user experience across the Kissflow platform..
My Role
Product Designer
Platform
Web app
Timeline
2 Months
Overview
What Kissflow Does? 🤔
Kissflow is about building custom apps for business with no code and also offers tools for managing cases, and workflow efficiently.
"Quickly build, Market ready Apps in Moments"
What is the problem? 🧩
Imagine you are assembling a jigsaw together with pieces from different sets, fun in theory but frustrating in practice right?
Building an app in Kissflow's platform was like a jigsaw with pieces from different sets, each module (Process, Board, Dataform) had an inconsistent look and feel in runtime form, confusing users and developers.
This how Kissflow app used to look like with Process, Board and Dataform together.
Discover
How this started? 🚀
When our company transitioned to a unified, low-code platform, our app developers raised concerns about the lack of design consistency across modules. Each module had unique design elements that didn’t match within the app.
This feedback helped us convince all stakeholders to redesign the modules with a unified approach, ensuring everything looks consistent without losing any functionality.
Initial Research 📚
We already had a clear vision for the solution: unifying the layout. So, I began by understanding and analyzing the current user flow, especially since some users were comfortable with the existing flow.
I collaborated with the product manager and gathered data on what users mostly use in the tools, which gave us a clear picture of what to prioritize when creating the unified layout. We listed all the widgets and compared everything.
Goal
What Were Our Main Goals? 💪
Based on the research findings, we defined our main goals,
Unified Experience
Future Scalability & Adaptability
Ease of Customization
Key Considerations 🎯
After some research we figured out some of the key goals we need to remember before crafting the solution
Maintaining User Flow
The user flow remains unchanged.
Retaining Existing Features
All current widgets and features should be included.
Avoiding User Frustration
The new design should be intuitive and not frustrating.
Ideate
What did we find in competitors? 🔎
We faced a challenge in developing a unique solution without a direct competitor for reference. To tackle this, I broke down the problems into smaller components and sought inspiration from various sources.
First, I explored common layout designs, focusing on project management tools related to runtime forms, to understand effective layout strategies. Then, I examined individual widgets, evaluating their functionality and design across different applications. This approach ensured we created a cohesive and user-friendly interface despite the lack of a direct competitor to model after.
Wireframe
How Did Iteration Play a Role in Finalizing the Design? 🔁
Based on the research and analysis, I decided to brainstorm the approach by collaborating with all the module PMs to understand their requirements. I sketched out a few approaches and presented them to stakeholders. While some agreed, others provided feedback.
I iterated multiple times, designing a high-fidelity prototype to give them a clear idea of the final output. This process also generated additional feedback. Through these iterations, we finalized an approach that met all our goals.
Final Design
How Did I Design the Solution? ✍
After several iterations and feedback, we finalized a solution featuring a unified, form-centric layout. It includes a collapsible right navigation panel supporting widgets for different modules and a lockable left section for enhanced usability. This design ensures a consistent, functional, and adaptable user interface across the platform.
View Designs >>>
Post launch
Scope of Improvements 🌱
While the new design significantly improved UI consistency, future enhancements could include more customizable options for users and further integration of AI-driven features to streamline processes.
What could have been better 📈
Maybe convincing the different module stakeholders could have been easier, just kidding anyway it’s always a Designer’s job to vouch for customers but also consider the business impact and convince the stakeholders for better UX and UI.
Conclusion ✅
This project successfully unified the user interface of Kissflow's platform, enhancing the overall user experience while maintaining the flexibility needed by its diverse user base.
Comments
To view Designs >>>