Responsive Email
Responsive Email
Role: Experience Strategy, UX/UI Design, Visual Design, Front-End Development
Embedded Files
Overview
Pioneered the development of Capital One's inaugural responsive experience in 2012, orchestrating the redesign of all customer-facing emails. This transformative initiative ensured seamless adaptability to various screen sizes, enhancing readability and usability. Additionally, created a proprietary code snippet library for customer-facing emails, resulting in a 1/3 reduction in coding time, minimized errors, and fostered greater standardization and visual consistency among a team of 20+ designers and copywriters.
Email before and after responsive design
Challenge
Email was simple and static with very few options for effective testing. Challenges with early email design included:
Antiquated HTML code in tabled layouts only and no CSS
No way to test emails in multiple clients, browsers, and devices
Broken layouts in multiple clients without our knowledge
Rendering issues in email clients that couldn't be validated until the vendor sent tests prior to launch
Designs that were both simple and static
Opportunity
With increasing mobile usage among customers, there was a need to enhance the mobile rendering of our emails. The current approach resulted in a suboptimal user experience and opened the organization up to more accessibility risks. The lack of mobile optimization causes the entire email to shrink, necessitating users to pinch and zoom for readability. This poses challenges in creating links and buttons that are easily readable and clickable for the user. Addressing this opportunity will significantly improve the overall user experience on mobile devices.
Creating a Mobile-friendly Experience
Researching industry best practices and completely rehauling the design and code base allowed us to launch the first responsive experience within the company. Emails were now more flexible, dynamic and tested for consistency across email clients, browsers and devices.
Improvements included:
Visual hierarchy
Links that were legible and usable
Banners with minimum font sizes that are scaled to fit multiple screen sizes
Columns, icons and smaller images slack vertically creating easy scrolling
Fonts don't scale down
Buttons are larger and easier to use
No pinching, zooming or right and left scrolling
Social icons are standardized and properly placed within the hierarchy of the email to keep focus on the main message
More aesthetically pleasing UI for customers
Upon the implementation of the new responsive templates, we promptly observed heightened engagement with our messages. The updated responsive code not only improved the mobile experience but also enhanced the overall customer interaction. This was achieved by prompting designers to consider the functionality of the email, shifting from mere replication of a print piece to a more thoughtful and user-centric approach.
Swiftly transitioning from a single-column responsive template to multiple responsive modules, we introduced the first email code snippet library. This library comprised 99 standardized, reusable code components. Paired with a Photoshop file mirroring these components, it facilitated seamless communication with design partners, showcasing the capabilities and constraints of the code. This approach not only improved the efficiency of the coding process but also enabled more effective testing to ensure accurate display. Overall, these enhancements significantly streamlined the coding workflow.
Multiple responsive modules that could be used together to form a fully responsive template allowed designers to customize layouts.
Future Improvements
As UI design tools progressed, I led the team in transitioning from Photoshop to Sketch, marking the inception of our initial messaging design system iteration. Utilizing Sketch design modules facilitated the seamless update of our expanding component library, alleviating the challenges faced in Photoshop. Connecting Sketch components to enterprise brand and design standards not only accommodated the growth of design modules to meet partner needs but also contributed to crafting a superior customer experience across devices.
With the introduction of Figma, I once again guided the team through a transition, leveraging the opportunity to enhance the messaging design system. This evolution resulted in the incorporation of nearly 300 distinct design components aligning seamlessly with the code library and the enterprise design system.
Google Sites
Report abuse