Cut The Fluff
Traditionally, Benchmark Email had guided customers with linear workflows. Its main web app helped businesses build, send and track emails. If you wanted to send an email, you’d do x, then y and then z. While this workflow laid out all the options, it also made the process feel lengthy, slow and rigid. It took too long to experience the value of the product.
Linear, multi-step process to send an email
In 2019, our team set out to reduce the time and effort customers were spending to create emails. We replaced a rigid four step process with a simplified single page built in Vue.js. This gave customers flexibility to handle almost everything in one place. They could now build in a way that worked best for them.
Updated single page workflow to send an email
My Role
I co-lead a small team to execute the project from concept to initial release. I was also responsible for the UI and UX design, prototyping and designing how customers would experience the process from end to end. I partnered with developers, a researcher and stakeholders to re-imagine the experience using Benchmark's existing APIs. I stepped off the project a month after its release in Aug 2019.
Weed Out The Issues
Using data to inform my decisions, I dug in with our researcher to understand how customers were engaging with the product and identified areas to reduce manual work. We wanted to know what was important to them and why.
Information Overload
Customers filled out email details on three pages, and each contained too much information. While sometimes useful for new customers, it also looked overwhelming, cluttered and affected readability. Paragraphs could look even longer in other languages supported by the app.
Information appeared lengthier in supported languages like Portuguese
Stop Light Experience
In the four step process, it wasn’t uncommon for users to see at least one error when submitting each page. This create a frustrating stop and go experience.
Errors commonly experienced
Too Much Movement
Customers used a lot of energy traveling between pages in the step process. We found this was also true for elements on individual pages. For example, customers expended a lot of time and energy finding table items to select and deselect. Since most people weren’t using search, it felt like finding a needle in a haystack.
Excess scrolling to complete legacy step process
Redesign Into A Single Page
Since the new page was API driven, we knew we could safely move pieces in the interface and focus on improving customer experience.
Centralized Details
Removing the rigid step process, I simplified the workflow so that all email details could be managed from a single page. This reduced excess movement from the legacy process and allowed customers to build from a central location. The page also doubled as a checklist so they could easily track their progress.
Customers could manage all their email details from a single page
For each section, I simplified complex workflows without removing any functionality. For example, I used a multi-select component to handle the contact lists customers wanted to email. I centralized selected items where they could easily see, remove and search any items with minimal scrolling. It also allowed for secondary actions such as creating, viewing and adding to lists.
Centralized information into a single component to minimize excess movement
Bite-Sized Information
To minimize visual and information overload, I created familiar sections that showed small amounts of information at a time. This created better focus while helping customers feel accomplishments faster. Sections also allowed me to group related fields together that had felt very far away in the step process.
Same information displayed in legacy step process vs. new single page
Reduced Clutter
Keeping information accessible, I also simplified options, grouped related items together and moved information to show contextually.
Simplified options but kept information accessible
I moved information from showing all the time to appearing contextually when customers needed it. Since they were based on specific conditions, they didn’t bother people that didn’t need them.
Contextual messages showed when customers needed them
Pre-filled Information and Minimized Error Friction
To reduce the amount of errors customers could experience, we auto-filled their information whenever possible and used the UI to guide them so they could no longer trigger certain error states. This was especially helpful for onboarding customers.
Pre-filled redundant account information
Measuring Success
Gathering baseline data and making hypotheses, we wanted to measure the impact of our changes moving forward. We kept in mind that quantitative data couldn't tell the whole story and improvements were an iterative process.
Customer Effort Score
Since one of our main goals was to deliver an “effortless experience” to customers creating an email, one way we measured success was by using a customer effort score (CES) to measure ease of use. After completing their first email, new customers were asked to rank their experience on a seven point scale ranging from “Very Difficult” to “Very Easy”.
Rating scale
Our goal was to receive a score of 5 and above. In Aug 2019 during the first month of release, new customers in English speaking regions gave an average score of 5.78. In Sept, it rose to a score of 6.03.
Customer effort score reported by new customers in English speaking regions
Customers Wrote In
I was switched off the project before implementing feedback loops with existing customers who had experienced both workflows. Even though I didn’t get to ask for specific feedback, customers found ways to submit their thoughts through Benchmark support channels:
Irene Nash
"This isn't a support issue, just wanted to say that the recent change to the dashboard UI is a big improvement, makes it much easier to input a mailing's settings and review them for accuracy all on one page."
Sylivia Spencer
"We love your new look and interface feel for sending bulk email. It’s user friendly, avoids errors and easy to make changes just before sending. Kudos to your technical team and the rest of the team!"