Revamping Design System Guidelines at Wix Mobile Apps
Wix's Mobile Design System faced challenges with outdated documentation, prompting a comprehensive overhaul. We focused on enhancing clarity and precision to improve usability, resulting in a dynamic resource for UX/UI designers and developers.
This project was a joint effort with Alexey Pavo, as part of our role at Wix's Mobile Design System team.
Project Overview
Wix’s Mobile Design System was established nearly a decade ago, and has since proven its value in building numerous products both internally at Wix and externally as a public design system on GitHub.
Over time, we noticed that our guidelines and documentation became outdated, causing inefficiencies for our designers and developers. We faced challenges in keeping up with the evolving design system, leading us to realize the need for a comprehensive overhaul. While the system was self-sufficient, it lacked proper documentation.
To address this, we started the journey of rewriting and improving the guidelines. Our focus was on clarity, relevance, and precision to improve usability, collaboration, and efficiency within cross-functional teams.
This case study explores the transformation of legacy documentation into a dynamic resource, meeting the needs of UX/UI designers and developers while laying the groundwork for ongoing growth and innovation.
Our Goals and How We Approached Them
Gathering Insights from Users
We had discussions with our daily users- designers and developers, gathering insights on what could enhance our guidelines. Understanding their practical needs, we aimed to provide more relevant examples, ensuring our guidelines meet their expectations effectively.
-
✍🏻
Replacing Outdated Examples
We audited current documentation, prioritized components for updates, and established a clear structure for each. Our aim was to ensure comprehensive coverage, providing guidelines that capture all states and variations for an improved user experience.
-
🗞️
Dropping Legacy Decisions
We partnered with our developers and aligned terminology to guarantee clarity and consistency. Our collaborative effort resulted in a dynamic system for ongoing updates and maintenance, eliminating legacy and unclear decisions for improved efficiency and communication.
-
📜
We created guidelines - for our guidelines.
-
Introduction: Brief overview with visual preview.
-
Usage Examples: Showcase classic use cases for the component.
-
States and Variations: Present all options and collaborate closely with the dev team to cover all cases.
-
Spec Section: Detail spacing, coloring, and typography tokens, addressing any platform-specific differences.
-
Tablet Spec (if applicable): Demonstrate the component in a tablet environment.
Documentation Structure
We plan to integrate documentation upkeep into our quarterly planning, dedicating time for consistent updates.
Regular Updates
We'll regularly gather input through forms and user interviews, allowing us to adjust the guidelines based on our users needs.
Getting Feedback
We're exploring tools and processes to streamline documentation maintenance. We'll engage more with the development team to collaboratively refine and optimize guidelines for lasting usability.
Streamline Maintenance
Looking Forward
What we've learned from this project and how we plan to keep the documentation updated in the future.
