Flowzone App
Freestyle+ helps teams connect through the science of improvisation and musicality.
Task
FlowZone 0-to-1 Mobile App: Boosting Authenticity and Confidence through Improvisation" FlowZone, targeted at users from renowned companies like Adobe, Pfizer, Google etc. The game app, where the user was required to input data in form of text, recorded voice and selecting graphics. It was relatively less data heavy, but I include this example because the app required data input to be very seamless. Also, it was a mobile app & input of text was a challenge, considering the restricted screen real estate. I addressed that by enabling expansion and pop out of text area and by offering users the option to toggle between text and voice. Also, one could totally skip to the next game, based on the environmental limitations they were facing at that point in time.
Background
FlowZone, a mobile app by freestyle+, is designed to enhance mental fitness and team connections using improvisation and musicality. Targeted at professionals from leading companies like Adobe, Pfizer, and Google, FlowZone delivers science-backed games that make mental fitness accessible, engaging, and fun.
Problem Statement
- Seamless Multi-Modal Data Input: Users needed to input data in various forms—text, recorded voice, and selected graphics. The process had to be efficient and intuitive, accommodating different user preferences.
- Mobile Interface Constraints: The limited screen real estate on mobile devices posed a significant challenge, particularly for text input. Designing a smooth, distraction-free user interface was critical to the app’s success.
- User Accessibility and Engagement: The app needed to accommodate users in diverse environments, offering flexible ways to engage without sacrificing the core experience.
Objectives
- Deliver an Intuitive User Experience: Enable seamless multi-modal input while reducing cognitive load on users. Design mechanisms to ensure usability across varying user contexts.
- Optimize Mobile Functionality: Develop interface elements that maximize functionality within restricted screen sizes. Provide adaptive features to enhance accessibility and flexibility.
- Encourage Consistent Engagement: Create an app experience that users would find enjoyable and meaningful, boosting long-term retention.
Methodolgy
The development process involved several key phases:
1. User Research
Conducted interviews and usability studies with target users to understand their preferences and pain points.
Gathered insights from professionals across different industries to ensure the design aligned with diverse needs.
2. Design Iteration
Created prototypes in Figma to test and validate interface concepts, focusing on data input and engagement mechanisms.
Incorporated user feedback in real-time to refine the experience.
3. Technical Implementation
Built a lightweight and scalable mobile architecture optimized for both iOS and Android platforms.
Used responsive design principles to ensure fluidity and adaptability across devices.
4. Testing and Validation
Conducted A/B tests with multiple game flows to identify the most engaging design patterns.
Iterated based on real-world feedback to refine performance and usability.
Solution
1. Seamless Data Input – Adaptive Input Options: Integrated toggling between text and voice input, empowering users to choose the most convenient method based on their environment. Graphic Selection Simplified: Designed intuitive selection flows for graphics input, keeping visual interfaces clean and easy to navigate.
2. Mobile-First Design Enhancements – Expandable Text Fields: Added pop-out text areas to reduce the constraints of small screens, enabling users to focus on writing without distraction. Skip and Revisit Functionality: Introduced the option to skip games temporarily and return later, accommodating users facing environmental or situational limitations.
3. Engagement-Centric Features – Developed game mechanics rooted in improvisation and creativity, which encouraged users to interact authentically. Embedded playful and interactive elements to sustain interest while reducing pressure on performance.
Results
1. Increased Engagement
A 35% increase in daily active users within the first month of launch.
Improved retention rates, with users spending an average of 12 minutes per session.
2. Positive User Feedback
92% of surveyed users found the app intuitive and enjoyable to use.
High adoption rates for voice input, with 60% of users opting for this mode in environments where typing was impractical.
3. Enhanced Accessibility
Skip-and-return functionality received praise for its flexibility, enabling users to engage on their terms.
4 .Scalability
The mobile-first design framework laid the foundation for future updates and feature expansions.
| Primary #FFEE53 | ◯ | |
Yellow
| Primary #AFEAFF | ◯ | |
Blue
| A11Y Color #FC642D | ◯ | |
| R 255 G 255 B 255 |
White
| A11Y Color #ED2323 | ||
| R 0 G 0 B 0 |
Black
Typeface
Inter
Usage
Headlines
Flowzone’s typeface is simple, bold, easy for everyone to read, and instantly recognizable.
Whenever Strive appears, it is inscribed in a simple, yet attractive font, which signifies the strong image of the brand. Simplicity makes the Strive app design more appealing and engaging.
Typeface
Inter
Usage
Headlines
Typeface
Montserrat
Usage
Headlines
- Invest time in understanding user needs through qualitative research.
- Prioritize technical feasibility early to align design with development capabilities.
- Use modular design systems to balance scalability with rapid iteration.
- Test iteratively with real users to ensure the final product meets their expectations.