FlowPro - Project Management App
UI and Product Design Breakdown for FlowPro’s Pricing Page
FlowPro’s pricing page embraces clarity and flow, aligning with the product’s promise of smooth, efficient work management. The three-tier pricing cards are laid out in a familiar grid to promote easy comparison, with rounded corners and subtle shadows adding depth. The Professional plan gets a “Popular” tag—nudging users toward the most valuable option using visual hierarchy.
The color palette blends blues (trust and productivity) with orange accents (energy), delivering a modern vibe across both light and dark modes. This dual mode ensures accessibility, making the product equally delightful in daytime and night settings, with smooth gradients tying everything together.
Each plan card is minimal yet informative, using bullet points to highlight core features without overwhelming users. Call-to-action buttons in bright blue maintain consistency, while the Enterprise plan strategically swaps "Choose Plan" for “Contact Sales” to fit the enterprise audience’s expectations.
FlowPro’s pricing page isn’t just about looks—it’s about driving engagement with simplicity and flow. It’s a seamless experience that combines aesthetics with usability, making it easy for users to find the right plan and take action confidently.
Tools used
From brief
Topics
Share
Reviews
3 reviews
I like the layout and the copy used in this design. The added dark and light modes are a nice touch. One suggestion would be to emphasize the most popular option more clearly. Additionally, allowing the elements to breathe more by increasing the padding would enhance the overall design. It looks like the font size, especially for body text in the cards, might be too large, which results in limited space. Adjusting the font size could improve readability and spacing.
Hi Michael,
Nice work, although some work needs to be done to make it more accessibility friendly.
First is the header section, the text and background color have poor contrast, users with visual impairment will find it very hard to easily read.
Second, the entire header section can make use of more whitespace. Add more spacing between items.
The default state of the pricing cards are also misleading with the thick strokes around each card. If the strokes are so thick in the default state, what happens when the user hovers or click on them.
Each card can also use more padding. but vertical and horizontal padding.
I hope these helps.
I love what you have done, but you need to pay more attention to your visual hierarchy to guide user attention effectively. Also, the Enterprise plan's CTA color should be adjusted to make it more obvious to users that it's distinct.
For the headline, the line height needs to be more precise. Additionally, the space between the headline and description should be adjusted.
The spacing between cards should also be narrowed to align with the proximity principle, making it easier for users to scan and compare.
You might also like
Sojo NFT Marketplace
Heuristic Evaluation of Revolut Mobile App
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
From Idea to Full-Stack Web App
Docto
Fundraising Website
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
