FlutterFlow Design and Development
Farook Maya
Muqel – Smart Professional Directory Platform
Overview
Muqel is a location-based professional directory designed to help users easily find trusted service providers — from lawyers to restaurants — in their local area. I led the complete UI/UX design and frontend development of the Muqel platform using Flutter and FlutterFlow, crafting an elegant, responsive interface with seamless interactivity. The goal was to build a clean, bilingual (French-first) directory platform that is intuitive, scalable, and ready for public launch.
Project Goals
Build a responsive, modern web app for professional discovery
Ensure a user-friendly search flow with dynamic filtering
Allow professionals to add themselves to the platform easily
Enable public contributions to enrich the database
Ensure smooth multi-language support (starting with French)
Deliver in a no-code/low-code environment using FlutterFlow
UI/UX Design Highlights
I began with a mobile-first approach in Figma to structure clean, accessible layouts that balance form and function. The design features:
A central search bar with keyword and location inputs, front-and-center for maximum utility
Clear CTAs for professionals to "Add My Business" or "Contribute Info", improving community engagement
Clean iconography and micro-illustrations to guide users visually
A flat, bold color palette with teal, white, and magenta accents to maintain a vibrant, modern look
Full French localization from the outset, including UI structure for multi-language expansion
Flutter & FlutterFlow Development
Using FlutterFlow, I developed and deployed the front-end with:
Custom search input modules connected to a location-based database
Fully responsive layout adapting from desktop to mobile without compromise
Interactive cards, buttons, and modals for user onboarding and submissions
Modular architecture for easy future extension to mobile apps
Bilingual toggle logic built-in to allow for language scalability (i.e., French and English)
Integration-ready for backend services like Firebase or REST APIs
Key Features Delivered
🔍 Smart keyword + location search flow
🏢 Add your business module with clean input form
🌍 Bilingual UI foundation (French-first)
📱 Mobile-optimized and scalable layout
💻 Built entirely in FlutterFlow for rapid iteration and deployment
Outcome & Impact
The Muqel platform is now ready for public use, offering a clean and efficient tool for users to find local professionals while also empowering businesses to self-list. Built with performance and scale in mind, the design system and codebase are ready for continued growth — whether expanding into mobile apps or onboarding large volumes of professional data.
My Contribution
✅ UI/UX Design in Figma
✅ Full frontend development in FlutterFlow
✅ Localization (French-first)
✅ Search interface, responsive grid system
✅ Form handling, animations, and UI state logic
SplashID Pro 9
Cross-Platform Web App for Secure Password Management
Overview
SplashID Pro 9 is the latest evolution of a trusted password management solution, built to meet the growing demands of users seeking security, ease of use, and cross-platform compatibility. My role in this project encompassed complete UI/UX design, responsive layout planning, and full frontend development using Flutter and FlutterFlow. The goal was to create a high-performing marketing and onboarding website that communicates trust, functionality, and modern tech-savviness — all while ensuring accessibility across desktop, mobile, and tablet devices.
Objective
The main objective was to redesign SplashID’s web presence in a way that clearly conveys its unique value proposition — secure, multi-platform password management — while also driving user registrations. We needed a seamless fusion of intuitive design, strong messaging, mobile-first responsiveness, and maintainable Flutter code architecture.
UI/UX Design Approach
I led the product through a user-first design process starting with wireframes in Figma. The interface was designed to:
Simplify complex feature explanations into digestible visual blocks
Instill confidence with a clean and minimal color scheme (leveraging blue and white to reflect security and transparency)
Guide users naturally through CTAs like “Try It for Free” and “Register Now”
Integrate product screenshots, platform badges, and feature icons with visual consistency
Key design features included:
Pricing comparison tables with visual emphasis on Pro Plan benefits
A "How It Works" section using iconography to explain onboarding in 3 easy steps
Responsive UI patterns for fluid adaptability across device sizes
User testimonial carousels that reinforce credibility with real reviews
Accordion FAQs and feature breakdowns to improve scannability
Development in Flutter & FlutterFlow
For the development phase, I implemented the complete frontend using Flutter within FlutterFlow, allowing for fast prototyping and scalable component management. This approach ensured clean, maintainable code with smooth performance across platforms.
Highlights:
Built modular, responsive layouts optimized for performance
Integrated platform-specific app store buttons (iOS, Android, Windows, macOS)
Created interactive pricing plans with hover effects, CTAs, and integrated logic for toggling
Enabled scroll animations and micro-interactions for enhanced engagement
Used FlutterFlow’s CMS capabilities to make future updates seamless and client-friendly
Technical Stack & Responsiveness
Frontend: Flutter (via FlutterFlow)
Platforms Supported: Web, Desktop, iOS, Android
Tools Used: Figma, FlutterFlow, Google Fonts, Custom SVGs, Lottie animations
Performance: Optimized for quick loading, accessibility, and SEO compatibility
Results & Impact
The final product is a fully responsive, visually compelling web application that functions seamlessly across modern browsers and devices. The refreshed design communicates professionalism and technical reliability — two critical pillars in the password management space. The intuitive UI and frictionless signup process helped increase early conversion rates and user trust, setting a solid foundation for future scaling.
Key Contributions
✅ Led UI/UX design from concept to delivery
✅ Developed the site using Flutter + FlutterFlow
✅ Built mobile-first, performance-optimized layouts
✅ Integrated brand visuals, reviews, and platform guides
✅ Delivered within a tight timeline without sacrificing quality
ProHealth Longevity
ProHealth Longevity – Flutter-Based Anti-Aging eCommerce Experience
Project Overview
ProHealth Longevity is a leading platform focused on longevity science and anti-aging supplements, serving a global audience seeking credible, science-backed wellness solutions. I led the end-to-end design and frontend development of their marketing and eCommerce experience using Flutter + FlutterFlow — combining sleek UI/UX with responsive layouts, interactive flows, and seamless conversion pathways. The result: a future-facing, conversion-driven website designed to build trust, educate users, and boost supplement sales.
Objectives
Design a visually rich eCommerce site reflecting authority and scientific credibility
Highlight expert-backed supplements and longevity research
Enable fast and intuitive product exploration and quiz conversion
Incorporate visual storytelling through animated UI elements and interactive charts
Develop with a FlutterFlow-based architecture for rapid build, responsiveness, and scalability
UI/UX Design Highlights
I began by architecting the user journey around two core funnels: education > engagement and exploration > purchase. The design system was created in Figma with components that adapt fluidly across desktop, tablet, and mobile. Key visual elements include:
Hero imagery layered with subtle animations to immediately capture attention
A prominent “Take the Quiz” CTA to guide users into product personalization
Trust-building logos from media mentions (FOX, ABC, Google) integrated above the fold
Data visualizations (aging graphs) designed in line with brand palette and medical tone
Dynamic scroll effects and animated transitions that evoke scientific precision and credibility
Development with FlutterFlow
Leveraging FlutterFlow’s visual development environment, I transformed the designs into a performant, scalable website with:
Fully responsive layouts and flexible UI containers
Animated components triggered on scroll for enhanced engagement
API-ready product cards and content blocks structured for easy backend hookup
Smoothly integrated quiz-to-product flows for personalized supplement suggestions
FlutterFlow widgets for image sliders, testimonials, expandable product information, and reviews
Built-in SEO and accessibility best practices
Key Features Delivered
📊 Animated aging charts and product education zones
👨⚕️ Expert-backed advisor sections with toggleable bios
📱 Mobile-first responsive UI
🧬 Product discovery through "Shop by Action" filters
🛒 Supplement category storefronts built with dynamic layouts
🎥 Scroll-based storytelling animations (in Flutter)
📘 Integrated book promotion section (for “Square One” by Dr. Maroon)
Tech Stack & Tools
Figma – Design system, wireframing, prototyping
Flutter + FlutterFlow – Frontend development
Custom animations – Built with FlutterFlow animation settings and scroll triggers
CMS-ready architecture – Structured for integration with headless or Firebase backend
Business Impact
The ProHealth Longevity redesign provides an immersive digital experience that matches the brand’s scientific credibility and customer trust. Through thoughtful UX, visual hierarchy, and fast-loading Flutter components, users can now understand, trust, and act more effectively. Engagement has improved through scroll depth and quiz interaction, and the new interface sets a solid foundation for future product expansions.
My Role
✅ UI/UX Design (Figma)
✅ Responsive Flutter UI in FlutterFlow
✅ Product quiz flow integration
✅ Design of animations and visual storytelling
✅ Implementation of dynamic components for product grids, testimonials, and educational content
Like this project
Posted Jun 25, 2025
Designed & developed a responsive FlutterFlow site for ProHealth, integrated animations, product quiz flow, and dynamic content for a seamless user experience.
Likes
1
Views
52
SaaS Design
Webflow Website Design, Development and Animation
Brand Identity Design
App Designs
