My role
Ideation, wire-framing, user interface, and user testing.
Results
We've introduced a flexible layout that allows us to showcase plans side by side without the need for lineup features. This update improves the clarity and ease of comparison on our page, facilitating a better understanding of our plans for users. Moreover, we've overhauled the layout to streamline and emphasize add-ons, enhancing the overall user-friendly experience.
BEFORE
AFTER
Overview
Formstack has introduced bundle functionalities as Plan Add-ons as part of their pricing initiatives. This allows customers to customize their plans and pay only for the required features. Previously, Formstack offered only three add-ons exclusively for the Forms App. However, with the recent inclusion of three additional add-ons for the Platform offering, and the likelihood of more add-ons being added in the future as part of this initiative, it was concluded that the current user interface is not effectively showcasing them.
Problem statement
The existing design must incorporate flexibility for comparing plans with varying features. The layout currently overwhelms users with excessive information, and the absence of a clear hierarchy fails to direct them toward our desired conversion outcome. Also, the add-on sections could be clearer and contain excessive buttons. In addition, we aim to highlight the Enterprise plan offering by providing it with a more prominent position in the new design.
The design process
We initiated mapping user paths, considering each user's unique perspectives. Given that various users have different views of the same page, this step aimed to guarantee a comprehensive understanding, ensuring that all essential elements were noticed and, most importantly, that we did not disrupt any user flow.
Requirements and improvements
In our pursuit of enhancing layout efficiency, we recognized the importance of addressing specific requirements and implementing improvements.
1. Flexibility for plan comparison: The existing design lacked flexibility for comparing plans with varying features. The updated design introduced a streamlined card format for all plans, allowing the features of each plan to stand independently. This approach eliminated the need for feature pairing and emphasized the unique characteristics of each plan.
2. Prominent display of Enterprise plan: The design aimed to highlight the enterprise plan offering by providing it with a more prominent position. This strategic placement helps draw attention to the high-tier plan and encourages users to explore its benefits.
3. Clear hierarchy and reduced clutter: The previous layout overwhelmed users with excessive information and needed a clear hierarchy. In response, the design process focused on creating a visually appealing interface with intuitive interactions. The table format was collapsed by default, improving the visual appeal and reducing clutter. The add-on section was also revamped for a cleaner appearance, making it easier for users to purchase, try, or remove add-ons from their plan.
4. User testing and iteration: User testing played a significant role in gathering valuable insights and feedback for refining and optimizing the design. Through an iterative process, the design evolved to meet the users' needs and enhance the overall user experience.
By addressing the problem statement and implementing the suggested improvements, the updated design for Formstack aims to provide a more flexible, visually appealing, and user-friendly experience for customers when customizing their plans and exploring add-on options.
Takeaway
You can effectively manage and implement multiple changes on a single page by breaking down and addressing each issue individually while maintaining a holistic perspective. This approach enables a systematic and focused redesign, resulting in a more refined and user-friendly final product. the following are the lessons learned from breaking down and addressing multiple issues during the redesign process:
Issue prioritization: When faced with multiple issues on a single page, it is essential to prioritize them based on their impact and urgency. By breaking down each issue into components, you can assess their significance and tackle them systematically.
Focused attention: Dealing with numerous changes simultaneously can be overwhelming. Breaking down the issues allows you to concentrate on one problem at a time, giving it the necessary attention and avoiding confusion or oversight.
Comprehensive understanding: Breaking down each issue helps thoroughly understand its requirements and implications. This allows for a more targeted approach to problem-solving, ensuring that all essential elements are considered.
Effective collaboration: Breaking down the issues can facilitate collaboration among team members. Each individual can take ownership of specific components, work on them independently, and then bring them together to create a cohesive solution. This division of tasks enhances efficiency and minimizes the risk of conflicts or duplications.
Iterative approach: By breaking down the issues and addressing them individually, it becomes easier to iterate and refine the design. You can gather feedback, make adjustments, and test each component separately, ensuring that changes are implemented smoothly without disrupting the overall user experience.
Maintaining consistency: Despite addressing multiple issues separately, keeping an eye on the bigger picture and ensuring consistency across the redesigned page is crucial. Regularly revisiting and reviewing the changes helps verify that all the individual components work harmoniously together and align with the overall design goals.
User-centric approach: Breaking down issues allows you to focus on improving the user experience for specific pain points. By addressing each issue individually, you can ensure that the redesigned page meets the needs and expectations of the users, leading to a more seamless and satisfying user journey.
