Building out a design system to minimize inefficiencies, free up time for design creativity, and create a consistent brand touchpoint.
Overview
On average Honda Powersports requires anywhere between 3-6 emails to be designed, developed and sent out to customers each month. It has grown to be an integral part in which the brand communicates with it’s customers, with sends regularly tipping the scale at 1 million per email.
Challenge
As the need for more emails to be designed grew, so did the need for a greater number of designers on our team to lend their hand and create designs for the client. Without a component library or template in place, each design produced had more an more inconsistencies. Ranging anything from different button sizes, different brand hex colors, conflicting font sizes to a myriad of grids used for layouts.
Not only did this give the Honda Powersports brand an inconsistent feel at one of their important touchpoints, it also created a flow on effect of unnecessary design time wasted setting up consistently used elements, and less budgeted time spent on actual creative ideas to communicate the email message. Consequently the range of design files and layouts that were then handed of to the development team would cause furthermore inefficiencies for their team.
Approach
It was clear to me that there was an obvious solution. The need to implement a design system, through a component library within an email template. Firstly I audited all existing emails for consistently used modules. We interviewed key stakeholders within the Honda Powersports team to gather insights into what further modules could be useful. Then internally with our development team, we broke down what types of modules are easy to develop and what types require a significant amount of development time.
Solution
With all of these insights, I then proceeded to create what would be our email template file, and within it a complete design system of modules, components, color styles and text styles - all built-out for selected breakpoints for desktop and mobile.
The new components also take advantage of many new Figma features, such as Auto Layout, that were not available when the team originally switched to this tool. This reduces designer time spent adjusting the position of elements to be "perfect", allowing the team to work faster and more efficiently. I organized the components themselves in a logical and neat fashion to make it quick for our designers to get going.
Results
Internally we noticed almost immediate efficiencies within the design and development phases. Designers within the team noticed a greater time allowance for design thinking to build out more creative solutions, due to the need not to layout those consistently used elements. Externally, it resulted in a consistent look and feel to all email projects.
