Building a design system
By the time I joined Emarsys, the company just finished redesigning its app UI. While it provided a fresh, modern look, unifying some basic aspects of the design (like typography and color), it had some issues as well. To speed up the process, it was done by reskinning the app page by page, without creating high-level patterns and ignoring most of the usability issues present. My challenge was to provide a better user experience by creating and unifying the interaction patterns and improving usability.
The dev team did a great job of creating the components and later a live UI kit based on the psd files they got from the UI designer. But this provided very little guidance to designers and product managers on how to use each element, it was only accessible to developers, and did little on unifying and improving the elements. I came up with the idea of using Brad Frost’s Atomic Design concepts, together with interaction guidelines to unify these components into a design system.
With the UX team, we decided to first recreate all elements as Sketch resources, so we could design features faster. The next step was to unify and iterate on each component. Parallel to this I worked with PMs, devs, and UXers to come up with guidelines on using each component, while at the same time creating the higher level patterns to be used throughout the app. Later we created a dedicated Design System team composed of engineers, designers, and researchers to create more momentum around this initiative. This has been an ongoing process, but it’s great learning on how to create a unified design system for a huge app with diverse workflows.