Mattel 4-Brand Transactional Framework

Problem

Mattel was getting ready to launch new web retail experiences and ecommerce systems, so they needed a robust set of transactional messages to handle every stage of the customer experience that matched their new design.

Challenges

• Content: The client had not gathered any copy resources, content requirements or set message priorities.

• Timeline: We needed to wireframe and design these messages for four brands inside of 10 days and gain multiple levels of stakeholder approval.

• Design: Since each message was to be dynamically built, we needed to design according to was possible to build in our sprint timeline as well as hit the nail on the head in terms of branding.

Solution 

We created a transactional framework of over 20 modules that encompassed every type of message needed for the user experience that was dynamically built according to (1) brand, (2) customer, and (3) product. We worked with Mattel’s Brand and UX team to use the new style patterns with email-safe rendering techniques.

Process

Research

Before beginning the design, the our team conducted research on design and content of competitors’ and other retail-industry transactional emails. Together with the data we had on Mattel’s subscribers, we formulated our design rendering plan of attack.

Phased Wireframe Design, UI Design, and Development

Because this project had such a tight timeline, we took a phased, or rolling approach, to our process. We organized our efforts into two sprints of Wireframing and Design so that our Development team could start building the emails while we worked on our second sprint of Wireframing and Design.

Visual Design was tackled in conjunction from direction given by the client’s brand and UX design teams, which provided us with style tiles and a pattern library for their new web UI.