Raffaele Gesulfo

Marketing & Product Design Systems

Marketing & Product Design Systems

Mode │ Lead Product Design │ 2018 - 2019

My proudest achievement at Mode is to have spearheaded the design system efforts on the marketing and product sides. The opportunities to speed up the implementation time and the quality of the output were numerous. My first task was to build credibility for such a wide breadth project, which would run for months if not years.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of Mode.

Building a task force

Building a task force

Because of the way teams were structured, we decided to create a task force with engineers and designers from different projects. The goal was to get everyone on board and gather feedback from various angles. We then split the teams between the marketing and product sides, as their design systems needed different approaches based on their design and technical uniqueness. In order to keep consistency between the 2 systems we defined common design tokens.

Keep everyone in sync

Keep everyone in sync

A big part of the success of a design system is the communication around it in a constant and clear manner. We kept our documentation up to date on a weekly basis in InVision DSM for designers and marketers, and Storybook for engineers. We also made sure all the components were updated, reviewed, and approved on a regular basis through a workflow using Sketch, Abstract, and in-person meetings.

Reaping the early rewards

Reaping the early rewards

Early on the whole team could see the benefits coming from this methodical approach without fearing to be blocked in their creativity. After a few months of work, we were able to push live new components on the product side, and full pages on the marketing side, in hours instead of days. Meaning Mode’s customers could get a better solution to their problems, faster.