Adroll

Elevate Ad Campaigns and Achieve 25% Higher Retention with Seamless Email Template Management and Customization

2021  - Web App

Summary

We addressed a major issue on the Adroll platform by redesigning cumbersome email templates that were driving users to competitors. Our solution improved usability, boosted customer retention, and enhanced the overall user experience. Key improvements included:

1. Simplifying Email Template Design

We launched a user-friendly email template design, enabling users to easily access, edit, create, and manage their templates, leading to a more satisfying user experience.

2. Targeting Specific User Groups

Our efforts focused on:

Actionable Users: Those using creative content in campaigns.

Creative Users: Those generating the content.

To ensure these features were easily accessible, I restructured the product’s information architecture, resulting in seamless integration and a smoother user experience.

Company

Adroll, an ecommerce marketing platform that gives growing D2C brands.

My Role

As a Senior Product Designer, I oversaw the entire design process, from crafting UX strategy and mapping customer journeys to developing UX/UI designs and a new design system palette. I collaborated closely with the development team, engaging in UX scrums and problem-solving for swift delivery. My role also included user and market research, ideation, managing design implementation, testing, and post-launch user analysis.

Team Interactions

Collaborated closely with a team of five engineers, the product manager, and other leadership stakeholders to ensure swift delivery.

Timeline

4 months

Challenges

1. Information Architecture

Email templates are difficult to find due to their placement within the campaign flow, complicating navigation.

2. User Differentiation

Insufficient differentiation between the two main types of users leads to broader UX issues.

Current User Flow Issues
1. Accessing Templates

Templates are hard to locate within the campaign creation process, making them difficult to manage.

2. Template Management

Users cannot edit, delete, or organize templates, complicating template maintenance.

3. Creating Templates

The process for customizing templates is unclear and user-unfriendly.

4. Template Name Visibility

Names are only visible upon preview, making it hard for users to identify and select templates.

5. Design Editor Limitations

Users cannot use “Save As” or edit template names, restricting efficient template management.

Business Impact of the above Challenges
Competitive Disadvantage

Our current template management system lags behind competitors and the tools customers are already using. This lack of functionality reduces the likelihood that customers will adopt our email product, as it doesn't meet their needs effectively.

Low Campaign Launch Rate

Over the past 90 days, only 13% of customers who created a campaign have gone on to launch it, indicating potential friction in the campaign creation process.

Time-Consuming Template Creation

Building email templates that adhere to a customer’s complete brand guidelines is a lengthy process. Our current product lacks the ability to quickly generate templates that already align with these guidelines.

Approach

1. Redesigning access to email template

Find a prominent location for the “Email Templates” feature that ensures easy access.

2. Assessing Navigation

Evaluate the current left-hand navigation bar and make targeted adjustments to enhance usability and facilitate easier access to email templates.

3. Addressing User Needs

Creative Users: Focus on those who manage and edit templates.

Actionable Users: Focus on those who use templates to send campaigns.

4. Differentiating User Roles

Determine how to distinguish and cater to the needs of Creative users versus Actionable users

Design Process

Introducing the email templates

Designing the Details

1. Identifying two distinct user flows
  • From the Email Templates Library
  • Through a Campaign
2. Differentiate the Flows

Analyze and address the specific needs and differences between accessing templates via the library versus through a campaign.

Other Considerations
1. Define Scope

Clearly outline the project’s goals and boundaries.

2. Establish Time Frame

Set a timeline for completing the implementation.

3. Assess Technical Constraints

Identify and address any technical limitations.

4. Align with Design Systems

Ensure the solution integrates seamlessly with existing design systems and standards.

Defining Themes, My Templates, & Archive
Themes (Working with Existing)
Stock Themes

Users can preview and apply themes to customize their templates.

Restrictions

Users cannot edit, rename, duplicate, or archive templates directly under the "Themes" tab.

Action

When a user selects "Use Theme," the theme is autosaved under "My Templates" with a default name (e.g., “Themename_copy”).

My Templates
Scope

Includes user-created templates from themes, branded templates, or the code editor

Features

Users can preview, edit, rename, duplicate, and archive templates.

Archive
Function

Templates under "My Templates" can be archived or unarchived.

Management

Archived templates can be restored to "My Templates" if needed.

Design

Email Template Design
1. Managing Templates

Macro & Micro-Interactions

Existing Interactions

Retain current hover interactions to ensure consistency.

New Features

Introduce an "ellipsis" menu for managing templates and archives, providing options for actions like editing, duplicating, and archiving.

2. Empty States
Definition

Display a typical "Empty State" when no templates have been created.

Application

This empty state will be shown in both "My Templates" and "Archive" sections.

Behind the Scenes

Translating Design to Implementation

1. Creating Accessible Documents

Developed comprehensive documentation to support design implementation.

2. Demo Videos

Produced demo videos to illustrate new features and guide users through the changes.

3. Design System Updates

Made necessary adjustments to the existing design system to accommodate new features.

4. End-to-End (E2E) Testing

Conducted thorough E2E testing to ensure functionality and user experience were up to standard.

Documentation & Handoff

Provided detailed documentation for a smooth transition and effective handoff to development teams.

Design System Changes

Implemented updates to the design system based on new requirements and feedback.

E2E Testing & Analysis

Bug Identification: Detected and addressed bugs during staging and production phases.

FullStory Analysis: Monitored user interactions post-launch using FullStory to understand how users engage with the new email templates features.

Conclusion & Next Steps

In our effort to enhance user interaction within the existing email templates, we identified and addressed several key areas for improvement. Our approach was comprehensive, considering the multiple touchpoints within the product that this new feature would impact.

What Did We Improve?

Tackling autocomplete was the first step in our journey toward search personalization. As the user's initial interaction point, ensuring a smooth and seamless experience was essential. Although the "first letter trigger" was the final piece we implemented, earlier improvements—such as refining result formats, updating icons, enhancing micro-interactions, and applying a dark overlay during searches significantly boosted user engagement and conversion rates.

How Does This Change Our Users' Experience?

Improved Template Management: Users can now create, edit, manage, and access their email templates with greater ease.

Reduced Friction: Minor issues, like renaming and saving templates, have been addressed to streamline the workflow.

Tailored User Flows: We established distinct user flows to better serve the needs of creative users and actionable users.

Team Collaboration

This project was a collaborative effort between the engineering team, designers, and product managers. We worked closely together from inception to release, fostering a truly collaborative environment. This experience not only strengthened our team but also provided valuable learning opportunities for everyone involved.