Hubert Email Templates
UI Design, Graphic Design
Email is an important marketing channel at Hubert, used to connect with customers at key intervals in their journey. In order to better serve our email audience, I worked closely with our digital marketing team to overhaul our template system, enabling a more user-friendly design and a flexible means of delivering content. This also meant partnering with our in-house developer to bring the new designs to fruition and ensure smooth functionality on both desktop and mobile.
Above: A before (left) and after (right) look at a Hubert product email, with key design changes outlined below:
Shoppability
Another significant change was removing the body copy next to the above the product images. After reviewing data that customers rarely spent time in this portion of the email, we opted to focus on naming the product clearly, with an underline to indicate click-to-shop functionality. This also enabled us to adjust the layout to create a shorter email, resulting in less scrolling.
Type Hierarchy
Improving the typography was another big focus with the new template — the old template utilized all caps which data showed was not aiding sales. Additionally, multiple fonts were being used that did not translate across all platforms. To ensure brand consistency one font was defined to be used for emails. Small tweaks like adding more call to action buttons and bolding key promotions helps readability.
At the heart of our redesign was the goal of creating a flexible design system, with a variety of modules that can be interchanged depending on an email’s objective. Some Hubert emails are sales-driven, while others are more content-focused, and our old template did not allow for this differentiation.
The new templates allow the creative team to work together to determine the appropriate modules for an email based on the customer journey.
Modules were designed with a mobile-first approach, ensuring we could shift between a single-column (mobile) and a two-column grid (desktop).
