Kissflow App Builder Revamp: Enhancing UI/UX Customization for Enterprise Users

Introduction

This case study documents the redesign of Kissflow's App Builder, a low-code application development platform. The project aimed to enhance the user experience for enterprise customers by providing them with greater control over UI customization and a more intuitive design workflow.

• Project Name: Kissflow Lowcode-App Builder
• Role: Senior product designer
• Duration: January 2023 - June 2023
• Team Size: 5
• Tools Used: Figma, Adobe XD, Google Analytics

Problem Statement

Kissflow's App Builder, while functional, was struggling to meet the needs of enterprise customers. The existing UI customization options were limited, making it difficult for IT developers to build applications that aligned with brand guidelines and met the specific requirements of enterprise solutions. Additionally, the user interface was not intuitive, leading to frustration and decreased engagement among users.

User research revealed a significant gap in user satisfaction. Enterprise customers expressed frustration with the lack of customization options and the cumbersome design workflow. They felt limited in their ability to create visually appealing and brand-consistent applications. This lack of customization was also hindering the adoption of the platform by developers, who found it difficult to build applications that met their specific needs.

The problem was significant because it was negatively impacting Kissflow's brand perception and hindering its ability to compete in the enterprise market. Limited customization options led to customer dissatisfaction and reduced revenue. It was crucial to address these issues to ensure the long-term success of Kissflow's App Builder.

Research and Insights

Target Audience

User research was conducted through a combination of interviews, surveys, and usability tests. We identified user personas and narrowed them down to IT developers and Citizen developers. Conducted user interviews with IT and business teams of existing customers and a few prospects to understand their pain points with the current app builder.

Competitive Analysis
Competitive analysis was conducted to understand the features and functionality of other low-code application development platforms. Platforms like Mendix, Outsystems, Power Apps, Retool etc were thoroughly tried and tested to derive inspiration.

Research Findings

The broader key findings included:
Users desired a more intuitive and visual design workflow that made it easier to create and customize pages. They wanted greater control over UI elements, such as colors, fonts, and layout. Users expressed the need for pre-built templates and components to speed up the design process and maintain consistency. They also wanted more guidance and support during the design process.

These personas helped us understand the needs and pain points of our target audience and inform our design decisions.

Specific pain points:

• Action buttons like “Save” or “Preview” are placed on top in few screens and in bottom for other screens. Should be consistent by placing all the action buttons either on top of the screen or bottom of the screen.
• Creating a variable when working on the script, needs to close and open multiple windows/popups.
• To run the application while building the app, needs to close the current page or artifact and go back to home. Must be an independent action for developers to continue their app building.
• While developing a page, if the developer needs to create a report or view, needs to close the current artifact.
• Need to have options to build an application for mobile devices alone or the mobile screens for a web application.
• Fixing the issues in the Deployment process is clueless.
• Debugging Capabilities are missing while unit testing the application.
• Components are categorised flow-wise, this needs multiple clicks to select a component.
• While dropping the component in canvas, the developer struggles to place it in a desired place.
• After drag n drop a component inside page canvas, developer couldn’t resize using mouse. Need to use the property window to resize the component. Resize handle for every component is a must need.
• Reordering a component inside a page. Ex. placing a component from top to the middle or bottom of the page

.

Objectives and goals

The primary objective of the redesign was to empower enterprise customers with the ability to create highly customizable applications that align with their brand guidelines and specific requirements.

The specific goals were:

• Improve user experience by simplifying the design workflow and making customization more intuitive.
• Increase user engagement by providing more robust customization options, including the ability to apply brand colors and fonts.
• Boost feature adoption by showcasing the power of the platform through a more visually appealing and user-friendly interface.
• Increase task completion rate by streamlining the design process and making it easier for users to build and deploy applications.

Ideation and Concept Development

The brainstorming process involved ideation sessions with the design team and key stakeholders. We used techniques like mind mapping and sketching to explore different concepts and design ideas. 

We explored several concepts, including:

• A visual drag-and-drop interface for creating pages and components.
• A library of pre-built templates and components for faster page creation.
• A more intuitive workflow with guided onboarding and interactive tooltips.
• Enhanced customization options for colors, fonts, and layouts.
• For scalability of the app builder, a Model View Controller (MVC) framework to segregate the artifacts including workflow process, data form, boards, etc.
• Tab approach for each flow item to solve some of the UX problems stated above.

We tested these concepts with users through wireframing and prototyping. We received valuable feedback that helped us refine our designs and prioritize key features.

Design Process

The design process involved creating information architecture, wireframes, prototypes, and UI designs. The wireframing stage focused on defining the layout and flow of the interface, while the prototyping stage allowed us to test the user experience and gather feedback.

The UI design was guided by Kissflow's brand guidelines and user feedback. We focused on creating a clean, modern, and intuitive interface that was easy to navigate. The UI design process included:

• Utilizing the design system components innovatively and extensively.
• A clear and legible typography system that enhanced readability.
• Well-designed icons and graphics that added visual interest and clarity.

Challenges and Solutions

One of the main challenges was balancing simplicity with flexibility. We wanted to make the App Builder intuitive for non-technical users while providing advanced customization options for developers.

Another challenge was ensuring design consistency across the platform, as we were also revamping the design system at the time. We overcame this challenge by collaborating closely with the design system team, making sure the new components and visual elements integrated seamlessly with the overall design system.

We addressed this challenge by implementing a modular design system that offered progressive disclosure. Users could start with a simple setup and access more advanced options as they gained confidence.

Final Outcome

The redesigned App Builder launched successfully and received positive feedback from both users and stakeholders. The new design delivered on its objectives, empowering enterprise customers with greater control over UI customization and providing a more intuitive design workflow.

The redesigned App Builder demonstrated the following outcomes:

• Increased User Engagement: User engagement with the App Builder increased by 35%, indicating that users found the new design more accessible and enjoyable.
• Enhanced Task Completion Rate: The task completion rate for building a simple page increased from 65% to 90%, demonstrating the improved usability and efficiency of the design.
• Boosted Feature Adoption: The adoption rate for advanced customization options increased from 20% to 55%, showcasing the success of the modular design system and the increased confidence users had in exploring new features.
• Improved User Retention: User retention rates improved by 25%, highlighting the positive impact of the redesign on user satisfaction and the overall experience.
• Positive Business Impact: Support queries related to customization issues decreased by 20%, and conversions from trial users to paid customers increased by 15% within three months of launch.

Learnings and Reflection

• User-Centered Design: Emphasized the value of focusing on user needs and iterative development to create impactful designs.
• Collaboration: Highlighted the importance of close collaboration with engineering and stakeholders to ensure a smooth and successful product launch.
• Balancing Simplicity and Flexibility: Learned how to balance simplicity with flexibility by using a modular design system and progressive disclosure, catering to both novice and advanced users.
• Consistency in Design: Gained a deeper understanding of maintaining design consistency, especially when working across multiple product areas.
• Future Focus on Onboarding: Recognized the need to prioritize contextual and customizable user onboarding for different user types.
• Early Stakeholder Alignment: Identified the importance of early and continuous collaboration with stakeholders to align on design decisions and project goals.

Conclusion

The redesign of Kissflow's App Builder significantly enhanced the user experience, empowering enterprise customers to create customized applications with ease. Key outcomes included increased user engagement, higher task completion rates, improved feature adoption, and stronger user retention. Moving forward, we will continuously monitor user feedback and iterate on the design to further enhance the App Builder’s capabilities.