How I Unified Form Designs to Improve User Experience?
Bringing a consistent, unified 🫱🏽🫲🏾 and efficient user experience across the Kissflow platform..
Overview
Team
Product Designer
Product Manager
Developer
Timeline
Jul 2023
Shipped
Category
Web
Line of Business
B2B SaaS
What Kissflow Does? 🤔
Kissflow empowers users to quickly build custom, market-ready apps with no-code, while efficiently managing workflows and cases.
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.
Problem
What is the problem? 🧩
"Imagine you're at a park and see an animal with a shark's head and a horse's body, confused right?"
That's how Kissflow's app looks like with process, board and dataform build together.
Each module (Process, Board, Dataform) was built with its own distinct design language, leading to a fractured and inconsistent user experience. This inconsistency wasn’t just a cosmetic issue, it was causing significant disruptions:
Time Consuming
The lack of a unified design confused end users as well. Forms in different modules looked and behaved differently, forcing users to slow down.
Learning Curve
Because each module’s interface differed significantly, app developers had to relearn how to build and maintain forms for every project.
Problem
Current Problem in Forms
While it was critical to create a unified, cohesive design, we also uncovered numerous user-reported problems within the existing runtime forms.
Research & Finding
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 to gather data on the features users utilize most, providing clarity on prioritizing elements in the unified layout.
Analysing 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.
I examined platforms like Asana, Trello, Jira, and other project management tools to understand their form layouts, customization options, and user interactions. This analysis provided insights to create a cohesive, user-friendly, and visually appealing design for Kissflow.
Key Considerations
After listening to real users, combing through feedback, and benchmarking against competitors, it was clear we had to unify the runtime forms. So we planned to consider few key area.
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
Expected goals
Based on the research findings, we defined our main goals,
Unified Experience
Future Scalability
Ease of Customization
Ideation
Design Exploration
We needed a layout that balanced user needs, technical feasibility, and stakeholder goals. Rather than settling on the first idea, we iterated through several concepts each with distinct widget placements, navigation styles, and field arrangements. Here’s a look at our exploration process.
Design
Unified Forms
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.
Key Features of the Redesigned UI
Unified Layout: A consistent, form-centric layout with a collapsible right navigation panel and a lockable left section, ensuring that all modules seamlessly integrate.
Enhanced Usability: Improved visual consistency and intuitive interactions, making the interface both functional and attractive.
Retained Functionality: Every existing widget and feature is preserved, ensuring no loss of functionality during the transition.
Unified Design Comparison of Module
Module Specific Unified Forms
A closer look at the redesign for Process, Board, and Dataform through a dynamic slideshow.
Interaction of Unified Form
A short video demonstrating seamless interactions and intuitive navigation in the unified design.
Comparison of Legacy & Unified Forms
Use the slider to compare the original fragmented design with the new, unified experience.
Impact
Let's talk impact
Increased Adoption: Following the unified forms rollout, we saw a noticeable jump in usage—users who previously abandoned forms mid-way now complete them consistently.
Qualitative Feedback
“These features unquestionably enhance the form aspects and seamlessly fit into the app!”
— Kissflow User
“Well done #Product Team for making such a big impact... I see everyone in this thread raving about it.”
— Suresh Sambandam, CEO of Kissflow
“We get SPLIT SCREEN AS WELL!!! WOOT WOOT! Love that the chat and other features then flip to the other side—this is amazing!”
— Kissflow User
“This is the best update to a UX/UI design I’ve seen in a long time. It’s perfect and wonderful—especially for boards...”
— Kissflow User
