Components Redesign - Wix Design System
The Text Field and Picker components in Wix’s mobile apps had legacy issues that affected both usability and functionality. Widely used across the apps, they were originally designed with minimal research, leading to poor user experience and missing features. Additionally, these components were not aligned with their web counterparts, resulting in feature inconsistencies.
Team
UX UI Designer
Diana Agronov
Development
Inbal Tish
UX UI Lead
Yulia Leder
Issues to be fixed
Validation Issues: The validation message replaced the label, which had limited space, making it challenging for content writers to clearly communicate the error and the steps needed to fix it.
Usability Issues: The text field label would "float" on focus, shifting position unnecessarily. The placeholder was only visible when the field was focused, making it difficult for users to scan the screen before filling out a form.
Accessibility Issue: The screen reader would glitch because some elements only appeared when the field was in focus, leading to a confusing experience for users relying on assistive technology.
UI Issues: The design of the picker and text field components was too subtle, often appearing disabled or lacking prominence. This was especially problematic on screens with only one or two text fields, where the components needed to stand out more.
Challenges
Development
The text field is a master component, forming the foundation for around 12 other components. Any changes to its structure or capabilities would impact these dependent components, requiring additional modifications, thorough QA, and development efforts from both designers and developers.
Wide-Spread Use
This group of components is extensively used across most screens and flows in Wix’s apps. Additionally, since our design system is public, any changes could affect our users' products, which we cannot directly QA, increasing the risk of potential issues.
Main Goals
Resolving Key Usability and Design Issues
The redesign aims to resolve usability issues, enhance accessibility, and improve the overall user experience. This includes aligning features with web capabilities and making the design more prominent and consistent across platforms.
Before & After
States & Props
Affected Components
We aligned UI and features for all the components that are based on the TextField component, to ensure a consistent and seamless user experience.
Final Steps
Rollout & Integration
Given the scope of changes and the number of components affected, the rollout was meticulously planned to avoid bugs, layout issues, and unintended behavior changes. After a thorough internal QA cycle, we communicated the updates to stakeholders, product owners, developers, and designers via email and Slack, ensuring that everyone verified their flows were intact.
Product owners were given nearly two months to QA their products before the changes were released to users. The updates were highly anticipated and were well received.
Guidelines & Documentation
Summary and Next Steps
This project showed me the importance of doing thorough research before adding new components to our design system. The issues we fixed came from rushed decisions and quick patches.
Teamwork was crucial for this project’s success, with everyone working together to ensure a smooth rollout and plenty of time for QA. We also learned the value of keeping designs and code simple, which helped avoid problems and made the code and design easier to maintain. For future components, we’ll focus on improving our process to ensure every new addition is well-researched, collaborative, and built to last.
—————————————
2025 Update - Accessibility Compliance
In early 2025, the form components were refined to meet the new European Accessibility Act requirements. Color contrast was improved across key elements to ensure better visibility and compliance with the updated accessibility standards.
