Established a design system to improve consistency and workflow
For a long time, Moovit had no well-documented design system, causing inconsistency in UI and a rough designer-developer handoff process. I've teamed up with a dedicated developer to define a new design system, as well as an improved workflow - while upgrading the entire infrastructure of the app, enabling it to scale more easily.
Problems and Opportunities
The lack of a design system was affecting many aspects of our day-to-day work - we had no "starting point" for new features, and no sync between our work files and production.
By creating a design system - we wanted to create a common language with the dev team and an easier handoff process.
Also, from the business aspect, as Moovit provides "white-label" apps to third parties, this improvement helped us to enable clients to have more customization options and better visibility about what's available for them.
The goal was not to redesign the app but to give us a better picture of how it is constructed (after many years of legacy), and better control over any future changes we had in mind.
The Process
In order to validate my work as I go, I've teamed up with a developer in the very beginning, to get his insights and knowledge about the structure and limitations of the app.
After an analysis of other products design systems, to get inspiration for grouping and naming options, I've started to audit the app. I've looked for UX patterns and repeating UI elements, grouped and roughly defined them.
Following that, I've had a better view and was able to define the grid, color palette, and typography. From there - we moved to define, name, and document atoms and components in design files and in code simultaneously.
The Result
The end result was a live design system, matched with a sketch library file, and full documentation for all of its styles and components. Any sketch artboard exported to Zeplin - automatically shown to the developer all the styles and components being used.
The implementation of a fully mapped semantic color palette made it easy to implement a dark theme. It also enabled clients with white-label apps to have more customization options.
The workflow with devs was redefined, mostly around better communications and common language, and the change reduced dramatically the need for UI-QA.
All was accompanied by guidelines on how to use the system, and how (and in what conditions) to add more components and evolve the system.
