Mattel Shopper Transactional Emails
Mattel Shopper is the original Mattel website that is used all over the word. Kids, families, and people of all ages all over the world use the Shopper site to order toys of all kinds within the Mattel brand. I was in charge of updating all of the Mattel Shopper transactional emails when a user makes a purchase. The files were originally designed on Sketch and I had to redesign all emails on Photoshop.
Shopper Transactional Emails Objectives
-
The Mattel Shopper emails needed to be updated and transferred from Sketch files to Photoshop files while maintaining the Mattel brand guidelines.
-
The font of all Shopper transactional emails were updated from Urbane Rounded Bold to Macho and Arial.
-
The following types of transactional emails that needed redesigning are Order Confirmation, Order Shipped, Order Delivered, Abandon Cart, Abandon Browse, Order Refund, Shipment Delay, and Order Canceled emails.
-
Create a new footer for all transactional emails.
Old Order Confirmation Emails
Old Order Shipped Emails
_2x.png)
.png)
%20.png)
Old Order Delivered Emails
.png)
%20Copy.png)
Old Abandon Cart Emails
Old Order Refund Email
Old Order Cancelation Email
Transactional Emails Process
The process for redesigning the transactional emails involved collecting feedback from multiple teams. We worked closely with the DTC (Direct to Consumer) team, CRM team (Customer relationship Managment), Development, and Marketing team.
​
The teams gathered feedback through A/B testing. Feedback was given on the Miro and Invision.
Order Shipped Feedback
Transactional Emails Footer Process
The designs on the original transactional emails did not really have a footer. The original design included very minimal fine print at the bottom of each email. We started to research footers that included multiple links in an organized matter. We wanted to declutter but include multiple parts of legal copy onto our footer.
Footer Design Research
Old footer design on live site
Footer Design Options
Multiple teams collaborated on the decision to narrow down the navigation items to 3 CTA's. The main nav items include Gifts, Brands, and Shop All.
.png)
Order Confirmation Screens
The Order Confirmation Screens are styled with an H1 of Macho Extra Bold. The text styles are styled with variations of Arial.
​
Users will receive an Order Confirmation email after purchasing an item off of the Mattel Shopper site. The email contains the Order #, Shipping Address & Method, Billing Address, and Payment Method.
​
Users in the US, will see a module titled Estimated Delivery. It displays a date and a set of icons displaying which stage your order is currently at out of 3 stages. Stage 1 is Order Confirmed. There is also a Track package CTA which lets users track their order. UK users will not have access to the track package module.
An order summary of the purchased item(s) are displayed. Below the order summary is the total amount of the transaction which include Promos, Rewards & Certificates, Shipping price, and Taxes.
​
.png)
.png)
Order Shipped Screens
The Order Shipped Screens are styled with an H1 of Macho Extra Bold. The text styles are styled with variations of Arial.
​
Users can receive variations of Order Shipped emails. The following variations of the Order Shipped emails are:​
-
1 item
-
2 items with the added ultimate gift experience
-
1 item with the included gift experience
-
Partially shipped item(s) with an additional section titled items not in this order which will display items from a previous purchase.
1 Item
.png)
2 Items with Ultimate Gift Experience
.png)
1 Item with Included Gift Experience
.png)
Partially shipped items
.png)
Order Delivered Screens
The Order Delivered Screens are styled with an H1 of Macho Extra Bold. The text styles are styled with variations of Arial.
​
Users can receive variations of Order Delivered emails. The following variations of the Order Delivered emails are:​
-
1 item
-
2 items with the added ultimate gift experience
-
1 item with the included gift experience
-
Partially delivered item(s) with an additional section titled items not in this order which will display items from a previous purchase.
1 Item
.png)
2 Items with Ultimate Gift Experience
.png)
1 Item with Included Gift Experience
.png)
Partially delivered items
.png)
Order Refund Screens
The Order Refund Screens are styled with an H1 of Macho Extra Bold. The text styles are styled with variations of Arial.
​
Users will receive the summary of the item(s) that are refunded the payment that was used, and the amount refunded. The layouts display the following:
-
1 item
-
Multiple items
-
Ultimate gift experience bundle - the toy is refundable but the gift experience is NOT refundable.
​
Upgrade Gift wrap and gift experience is not refundable so it's never appears as a line item.
1 Item
.png)
Ultimate gift experience bundle
.png)
Multiple Items
.png)
Shipment Delay Screens
The Shipment Delay screens are styled with an H1 of Macho Extra Bold. The text styles are styled with variations of Arial.
The shipment delayed screens include Order #, payment method, item refunded, and the subtotal.
​​
On the FTC 1 screen, a new expected ship date is displayed alongside a summary of the item(s) that are delayed.
​
On the FTC 2 screen, new expected ship date is displayed. Users have the option to choose whether they still want the item by the expected ship date or cancel the order.
FTC 1
.png)
FTC 2
.png)
Order Canceled Screen
The Order Canceled screens are styled with an H1 of Macho Extra Bold. The text styles are styled with variations of Arial.
The Order Canceled screen include Order #, item, and the price that will be refunded.​
Order Canceled
.png)
Abandon Cart Screens
The Abandon Cart screens are styled with an H1 of Macho Extra Bold. The text styles are styled with variations of Arial.
Users will receive the abandon cart emails when they've added item(s) to their cart but didn't move forward with checking out.The Abandon Cart layouts are displayed in the following layouts:
-
1 item
-
2 items
-
4 items
1 item
.png)
2 items
.png)
4 items
.png)
Abandon Browse Screens
The Abandon Browse screens are styled with an H1 of Macho Extra Bold. The text styles are styled with variations of Arial.
Users will receive an Abandon Browse email based on items they have viewed on shopper. The templates include the following sections:
-
1 item or 2 item options
-
Products Rec layout - 2 or 4 items with shop now layout for A/B testing
-
A promo area
1 item + Product rec
.png)
2 items + Product rec
.png)
4 items + Product Rec + Promo
.png)
