Email Systemization
About Rakuten
Rakuten is the #1 Cash Back app in the US with over 15 million members.
The value we offer above other competitors is a combination of our Cash Back rewards and the breadth and depth of over 3,000 merchants across an extensive list of categories including Apparel, Shoes, Travel, Health & Beauty, Electronics, Home, Food, Entertainment, Subscriptions, Gift Cards and exclusive discounts and rewards with partners such as American Express and Live Nation.
The Challenge
Turning Rakuten’s disparate email designs into a component-based visual system.
Many of our current templates fail stress tests of mixing and matching components from one template to another because the design solutions were reactive, ad hoc, and prescribed in a silo.
Project Goals
Digital Strategy Team Goal:
Gain greater flexibility to craft better journeys of discovery.
Enhance the ability to curate email stories with an array of tools and levers that can mix and match both functionally and visually.
Provide effective cross-merchandising capability for Rakuten platforms.
Creative Team Goal:
Establish dynamic but consistent, cohesive, scalable design.
Make the email experience more cohesive, considering all email demands within a broader design-system framework at a foundation level.
Promote greater consistency across the funnel with different platforms, including site and app, as informed by the Design Language System.
Create solutions that can scale quickly and be maintained more easily.
Eliminate ad-hoc solutions, redundancies, and inconsistent versioning.
Executive Goal:
Make email stories elevated, premium, more focused, and relevant.
Elevate the Rakuten platform and provide a more premium brand experience.
Create more focused and relevant stories through a clean and honed message hierarchy.
Declutter and de-noise, both visually and in cadence.
Considerations
Our new one-to-one site, mobile, and app experience were launching in Q1 of 2021. They were built from a common grid and component UI structure using our new internal RADIANT design system.
Our solves revolved around approaching all templates with the same foundational pieces, aligned with the UI atomic structure of our product.
Design Solution
In working with my Senior Designer, Dung Tran, my solution concentrated on adopting the same atomic approach to the design used in our product. We had to craft all email needs from the ground up starting with type and hierarchy flow, flags, headlines, subheads, and moving through all functional components and more complex modules. I made a deliberate effort to strike the balance between applying as much consistency between product and email as possible in relation to the user interface, customizing or tweaking scale, layout, or visuals as needed for the particulars of email interaction or context. The below work showcases the new email atomic structure and the facility with which the pieces combine to form new, cohesive emails and layouts.
