.png)
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.
<aside> <img src="/icons/groups_gray.svg" alt="/icons/groups_gray.svg" width="40px" />
UX UI - Diana Agronov
Development - Inbal Tish
Leads - Yulia Leder (UX&UI), Ethan Sharabi (Dev Lead)
</aside>
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.
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.
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.
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.
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.