Transactional Emails Redesign

I was tasked to redesign all the emails that are generated throughout the Cannondale.com e-commerce experience. These emails were sent to the customer B2C as well as the dealer B2B. I led research, and design to help craft the requirements that led to design updates.

RESEARCH

We conducted a brainstorming workshop that analyzed all the current transactional emails that were sent out to our current customers and dealers. We also gather examples from major retailers to improve design and bring it up to date with current UX patterns, layout and design. The major problem with the current design was the lack of visual hierarchy for key information that was most important to the customer. The previous design made it difficult to scan emails quickly to get needed information.

General REQUIREMENTS

• Emails will be built with defined global design components

• A Type-scale is needed for email to ensure type consistency through design

• Mobile first design approach

• Adherence to e-commerce best-practice research

• Updated typography size and contrast to meet accessibility guidelines

• Use copy that is more personal and provides clarity to the customer.

• Add links to the Cannondale app to make the customer more aware.

• Bike Shop addresses will link to system mapping app.

• Design a look and feel for the BOPUIS program for dealer emails to

Developers had commented

“The wireframes for the transactional emails were very well organized into a set of well defined design components and the usage of the components followed consistent patterns. Overall, this lead to us being able to use a single template in Klaviyo for all emails, reducing complexity, easing development, and resulting in a very clean implementation with few bugs.”

Beyond General Requirements

• We added an upsell to the app throughout the email designs to make the customer more aware of the app that is available from Cannondale.

• We also added a design to remind the customer what they need to bring to the shop when picking up the bike. Icons where used to highlight the different elements (email, credit card, photo id) needed to complete the pick up.

• A Type-scale was created specifically for email to ensure type consistency through design.

• Call to Actions made more clear for Tracking a Package

• A branding element for “BUY ONLINE, PICK UP IN SHOP” (BOPIS) was added to dealer emails to make them stand out as they need to be acted upon in a timely fashion.

LEFT: BEFORE | RIGHT: AFTER

VIEW Email Wireframes

This is an interactive walkthrough and will open in a new tab. Please contact me if you are interested in scheduling an in person presentation.