UX Design
AI Tool
Productivity
INTRODUCTION
Flowith.io is an innovative AI productivity tool designed to enhance user interaction with advanced language models through a canvas-based, node-driven interface. Despite its unique offerings, user feedback indicated several pain points, including a complex learning curve and potential information overload. I designed a UX strategy that fosters user engagement by introducing new view modes, view bar and optimizing accessibility, thus increasing overall usability of the app
MY ROLE
Research, User Testing, UI Design
TEAM
Just me
TIMELINE
2 Days [Deadline: 5 Days]
My objective was to enhance usability and accessibility for both advanced and beginner level users.
REDESIGNED EXPERIENCE DEMO
PROBLEM STATEMENT
Flowith.io’s node-based interface felt overwhelming compared to simpler chat designs. New users struggled to get started due to unclear guidance, and the visual mapping often became cluttered, making it harder to stay productive.
RESEARCH
I conducted quick usability testing and user interviews with four individuals who uses AI tools such as ChatGPT, Perplexity, Gemini and Claude. These interviews aimed to dive deeper into user preferences and pain points, providing valuable qualitative data to inform redesign process.
OVERVIEW OF THE OLD FLOWITH.IO EXPERIENCE
KEY FINDINGS
Confusing Initial Flow
The initial conversation did not guide users effectively, leaving them unsure of how to proceed or take meaningful actions
Readability Issues
Some nodes displayed excessive information, layout design made it challenging for user to read and comprehend content easily.
Complex Interface
The node-based canvas interface require more effort taking gestures to navigate.
User prompt and AI responses looks same, hard to follow conversation.
Overwhelming New Chat Popup
Users faced information overload when starting a new chat, with advanced options like mode and model selection felt unnecessary for most tasks.
IDEATE
After gathering and organizing the insights, I started sketching wireframes. This laid a foundation for the final designs
SOLUTION
Each highlight captures an aspect of the new Flowith.io experience.
Initial Conversation
The new design provides clear labels, highlights features like "Try Oracle Mode," and simplifies choices. By focusing on guidance and motivation, the redesign encourages users to take their first steps effortlessly, making the experience more intuitive and action-driven.
Flexible Conversations
This solution offers two ways to interact with AI:
Chat View: A user-friendly interface for seamless conversations, focusing on readability and simplicity.
Branch View: A powerful, node-driven canvas designed for advanced users to manage complex interactions and multiple conversations simultaneously.
Top Bar
The quick view bar provides a small view that displays each node with it's connections, helping users navigate complex conversation branches.
USER TESTING & FEEDBACK
With redesigned interactive prototype, I conducted quick usability testing with four individuals. These test aimed to measure impact of new design.
RESULTS
User satisfaction rating improved from 3.1/5 in the current design to 4/5 in the new design
Reduced average miss-click rate to 20%
81 overall usability of new design comparing 50 for current design
REFLECTION
This case study on Flowith.io's redesign emphasized the importance of user-centered design. By engaging with users, I identified usability issues and addressed them with a dual-view approach, balancing simplicity for novices and complexity for advanced users. Clear navigation and calls to action improved engagement and reduced cognitive load. Overall, the redesign highlight the value of focusing on user experience to enhance platform effectiveness and satisfaction.
. . .