Start from Scratch
As Benchmark’s main web product grew, its foundational technology struggled to scale. Years of adding but not modernizing came to a head in 2017. Making updates had become a slow and limiting process. Features were bound to technology limitations rather than what we felt customers needed.
In the best interest of the company’s future and our customers, we rebuilt Benchmark’s email marketing web app from the ground up and released it January 2018.
My Role
I worked alongside the Director of Design and a team of developers to fully reimagine the web app’s interface while migrating to use RESTful APIs that were being developed.
As a team lead, I helped execute end to end operations and took on shared responsibilities including research, wireframes, prototypes, UX design, visual design and overall design strategy. We also set out to build a scaleable design system as an investment into the product's future.
Challenges
Each team member wore multiple hats, dealing with up-hill challenges in both product and business sides.
Limited Data
Reliable data wasn't very accessible for Benchmark's legacy app. Acquiring where we could, we sifted through customer reported issues, reached out to our customer support team and tried getting early insights with user testing. With limited data and a tight timeline, we knew we were seeing a small, fragmented piece of a story, but made informed decisions as best as we could.
Change Aversion
Considering new and existing customers, we knew the transition would be hard for a group of loyal customers and wanted to be empathetic and mindful that change is hard and disruptive. We wanted to minimize this as much as possible, keeping workflows familiar, reducing existing friction and giving guidance in contextual areas.
Time Constraints
Time was not on our side. As a small team, we couldn't be away from the existing product for an extended period of time. We continuously discussed quality, time and resources, balancing where to invest in the company's future.
Business Risk
Even with a consensus that the legacy product couldn’t be sustained, the reality was that this project was a high risk that directly impacted company revenue. We could potentially lose a lot of clients in one or many regions around the world. It was important to have continuous stakeholder dialogue to weigh trade-offs, define a clear scope and create execution strategies to give the company padding to pivot.
Customer Struggles
As our team set out to gain deeper understanding about friction points and what customers were trying to do in the legacy app, we found reoccurring patterns.
Confusing UI
Hierarchy and navigation issues persisted throughout the app. Everything was equally important, so nothing was important. The navigation had too many ways to get to a single location, hidden links, looping paths and redundant options that made it unclear how customers should move throughout the app.
Everything Felt Slow
Without a modern framework, every page in the app was handled manually and lacked visual feedback cues. Customers grew frustrated waiting for pages to load and then again with every save action. This was worse in regions with slower connectivity.
The UI inconvenienced customers and made workflows difficult. Interactions didn’t feel very good.
Disjointed Experience
Benchmark’s legacy app was riddled with technical debt, resulting in a disjointed experience for customers. We'd hear questions like "Why can I do this here, but not here? Don't they do the same thing?" repeatedly.
Fueled by different technologies, inconsistent components and unpredictable behaviors, it was apparent that the design debt was negatively impacting the customer experience. We found out quickly which tools customers trusted and which they didn’t.
Solving Issues
Based on customer struggles and company vision, we identified project goals and issues we could to solve during the ambitious rebuild.
Replaced Unforgiving Workflows with Streamlined Patterns
With top workflows in mind, we removed distracting and alternative paths to provide clear direction. We then used scaleable components to create smoother interactions and repeated patterns that helped customers flow through the app more efficiently.
Removed the Guesswork
We aimed to remove extra barriers from getting the job done by unifying behaviors, improving conditional messages, updating inaccurate information and adding personalized modules. We made the interface more transparent so customers would build trust and know what to expect.
Unified and Expanded the Experience
As we unified the overall app, we also expanded compatibility with more device sizes and improved the experience in other supported languages. In creating a responsive app with scaleable components, we were able to increase the quality and value delivered across growing regions.
Added Data & Feedback Loops
Building the app from scratch gave us an opportunity to implement ways to gather data that product teams could directly access for future decisions. It also allowed us to start testing onboarding strategies and putting in feedback loops to hear directly from our customers in app, which had never been done before.
Creating A Design System
Knowing that the product needed to scale, we built the app with components inspired by Brad Frost’s Atomic Design and created the foundations for a design system that multiple teams could own and utilize. Later in 2019, we started moving components to Storybook, a component based ui library, to better share a common language with developers.
What Would We Have Done Differently?
Releasing to the first group of customers taught us a lot, and we were in a continuous cycle of learning and iterating quickly.
Further Navigation Investigation
When we had done early navigation testing with small sample groups, our hypothesis didn’t anticipate that users would assume we had removed tools because the navigation looked cleaner. This created misunderstandings that we had to address and improve.
Onboarding Should Have Been Planned Earlier
We built onboarding experiences for the first time in the app’s history, but looking back, we didn’t give it the right priority. As Scott Belsky, Adobe’s chief product officer, put it, a customer’s “first mile” shouldn’t be designed last. We didn’t spend the right time crafting our customer’s first impressions, and became a point to quickly improve the experience.
Better Accessibility
Matching the legacy app's level, the redesigned site unfortunately had limited accessibility compliance. It had limited items like keyboard interaction alternatives for mouse over actions, but lacked other intentional decisions. After launch we had to address issues like color contrast or improved readability for asian languages. It remains an area that needed improving.
Measuring Impact
Like other scaling companies, our small product team didn’t know how to accurately measure the redesign’s impact. Revenue continued to increase, but it was difficult to separate this change from other big changes within the company at the time. Even though we didn't have quantitative data to measure the product release, we did hear from customers through our feedback loops:
Rachel Scanlan
"Very clear and precise layout now, easy to click on the tabs of main importance. Saves time searching through the relevant information. Clear and fresh look keeps it simple and easy to navigate. No fuss! Greatly improved."
Eric Lee
"Really love the new UI/UX, a big step up from the previous interface. Great job guys!!"
We saw the accomplishments from this project set the product up for success in the following years. For the first time in Benchmark Email's history, we were able to set up data points and feedback loops to push the product to be customer driven and data informed. The design system we built proved to be flexible enough for multiple teams to own and understand as they scaled the product.
