Wind-UX
Flows and Funnels
Client Name: Amerikos LLC
Services: UX Design, UI Design, Web Design, Web Development
Industry: SaaS (Software as a Service), Web Development Tools
Project Type: New Website, Web Application
Target audience: Small business owners, educators and entrepreneurs.
Date: March 2024
Drag and Drop Web builder for small businesses.
Brief Overview
Designed and developed the website for Flows and Funnels, a web builder platform for small businesses, teachers, and online coaches. Focused on UX/UI, onboarding, and template creation within the platform itself.
The Challenge/Goal
The primary goal was to design and develop a website using the Flows and Funnels platform itself that effectively showcased the web builder's capabilities and provided a seamless onboarding experience for new users.
This included creating templates and training materials.
The Process (Solution)
-
Collaboration & Information Architecture: I collaborated closely with the founder, Chris, to define the website's structure and information architecture, prioritizing user flows and conversion funnels.
This involved creating a detailed sitemap to ensure intuitive navigation.
-
Design System & Branding: I developed a comprehensive design system based on Chris's preferred brand colors (orange and blue gradients), typography (Poppins) in different combinations and Noto Sans to get across the overall aesthetic. This ensured visual consistency across the website.
-
Application of the system: This design system was then meticulously applied to all interactive elements, most notably the button system. I designed all three button states—normal, hover, and pressed—defining specific visual changes for each state to provide clear user feedback and enhance interactivity.
-
Iterative Design & Feedback: I explored various design directions, presenting multiple concepts to Chris for feedback. Through an iterative process, we refined the designs to effectively communicate the brand's message and resonate with the target audience.
Pricing page:
Simplified the pricing structure by consolidating nine options into three, reducing cognitive load and enhancing the user experience. This streamlined approach resulted in a cleaner and more intuitive purchasing process.
Compare Plans Page:
To further enhance the user experience, we implemented a dedicated comparison page to facilitate side-by-side evaluation of different pricing plans. Additionally, we introduced a dropdown menu to filter options, simplifying the decision-making process for users.
All these improvements were seamlessly integrated into the website using Chris's custom web builder, ensuring a cohesive and user-friendly experience.
Login Page:
The login page was redesigned with a focus on simplicity and user experience. Rounded corners, gradient buttons incorporating the brand's signature orange and blue, and a sleek dark blue background create a visually appealing and modern interface. To streamline the login process, we integrated Google ID login, offering a convenient and secure authentication option.
-
Development & Implementation: I built the website directly within the Flows and Funnels web builder, meticulously applying the established design system. Despite the challenges posed by the evolving web builder, we successfully delivered the project on time. Adaptability and problem-solving were crucial in overcoming technical hurdles and ensuring a seamless user experience. Collaborating closely with the client and presenting user research findings helped align expectations and prioritize user needs. This project reinforced the importance of flexibility, effective communication, and a user-centered approach to design and development.
-
Onboarding & Templates: I created onboarding materials and designed pre-made website templates within the platform to help new users quickly get started.
The Results
-
The result is a fully functional website built using the Flows and Funnels platform. It serves as a live demonstration of the builder's capabilities and provides a user-friendly onboarding experience. Key improvements include:
-
Intuitive navigation and clear information architecture.
-
Consistent branding and visual design.
-
Streamlined login process with Google ID integration.
-
Pre-made templates to accelerate website creation for new users
Key Learnings
-
Balancing Aesthetics and Commercial Goals: This project provided valuable experience in balancing aesthetic design with practical commercial considerations. Working closely with Chris, the founder, emphasized the importance of designing for business outcomes rather than solely focusing on visual appeal. This meant prioritizing clear calls to action, effective information hierarchy, and a user experience that drives conversions.
-
Understanding the User's Perspective: Developing onboarding materials and pre-made templates provided deep insights into the challenges novice users face when building a website for the first time. I learned the critical difference between making design decisions (focused on visual appeal) and analytical decisions (focused on functionality and usability). I realized how time-consuming and cumbersome even seemingly simple tasks can be for users unfamiliar with web development concepts, further emphasizing the need for intuitive and guided user experiences.
-
Adapting to Platform Constraints: The Flows and Funnels web builder was still under development during this project, which presented unique technical challenges. This required constant iteration and creative problem-solving to find workarounds and implement the original Figma designs within the platform's limitations. This experience reinforced the importance of flexibility and adaptability in the design and development process.