App Flow Overhaul
Benchmark Email
SaaS
//
Digital Marketing App
Background
Benchmark Email, a B2B marketing app, had traditionally guided customers with linear workflows in 2019. Its main product helped businesses build, send, and track emails. To send a marketing email, you’d do x, y and then z. This type of workflow laid out all the options, but 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-led 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 transitioned 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 a four step process heavy with content, it was common for users to see one or more errors when saving information on 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, I could safely move most pieces in the interface with minimal rework 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 (left) vs. new single page (right)
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
Validating & Measuring Success
To minimize disruption for existing customers and gather validation data, I used a phased rollout strategy to test and refine the simplified workflow with new customers before launching to all accounts.
Post-Completion Survey
In addition to measuring with product analytics, I created a post-completion survey to measure ease of use and gather direct feedback from new sign-ups. In post-completion surveys, new customers rated the experience as an average of 5.89 out of 7 in the first 3 months, exceeding expectations against a goal of 5+. It sustained a strong performance with a 5.84 average at 6 months.
Survey results
After releasing the simplified workflow to all regions, existing customers sent feedback through other communication channels:
This isn't a support issue, just wanted to say that the recent change to the [email checklist] UI is a big improvement, makes it much easier to input a mailing's settings and review them for accuracy all on one page.
Irene Nash
//
Aug 2019
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!
Sylivia Spencer
//
Aug 2019
Product & Team Impact
By collaborating closely with engineers and other partners, I was able to streamline business logic and simplify maintenance by consolidating seven pages into one. This workflow also created a scalable foundation that enabled other teams to later launch the app’s landing page feature.
Additionally, the product analytics from this rollout established a more accurate data baseline to measure time-to-first-send and insights into activation patterns that impacted future product decisions.