Redesigned the Membership Explore page and developed a scalable design system to unify typography, colors, and interactive components.
Topia
2 Weeks
UXUI Designer
Wix
BACKGROUND
Topia is a Google-backed health and wellness startup offering live online training and on-demand classes through a membership model. The Membership Explore page plays a critical role in driving sales and revenue. However, the original page presented information in a disorganized way, making it difficult for customers to compare membership tiers, pricing, and included services. Inconsistent typography and interactive components further disrupted the user experience, reducing customers’ willingness to purchase a membership.
CHALLENGES
Create Consistency
Develop a design system to unify typography, colors, and components by standardizing the inconsistent elements from the original pages.
Ensure Scalability
Ensure the design system can scale to support not only the Membership Explore page but also additional pages and future growth.
Overcome Limitation
Design and implement features on Wix and Wix Velo while navigating the platform’s constraints.
DESIGN SYSTEM
I developed a design system to standardize the inconsistent elements across different pages.
MEMBERSHIP EXPLORE
I analyzed competitor websites and redesigned the Membership Explore page to present information clearly and make it easy for customers to compare membership tiers.
The earlier version didn’t display pricing for corporate and startup customers, which caused confusion and reduced their willingness to subscribe. To address this, I introduced a slider that lets customers select their expected number of users and instantly view pricing across membership tiers, making decisions easier and more transparent. Because Wix’s standard components don’t support this interaction, I built it with Wix Velo Dev Mode and JavaScript.
KEY TAKEAWAY
In this project, I learned how a unified design system can strengthen brand professionalism and create a clear impression for customers. By developing the system myself, I gained practical experience and a deeper understanding of the key considerations in building an effective design system.
I realized that designers should also consider technical limitations. To better understand these constraints, I began learning to code, which helped me bridge the gap between design and implementation. I applied what I learned to bring my own designs to life, gaining hands-on experience with Wix Velo and JavaScript.