Email Builder

Role: UIUX Designer
Duration: 2 months
When working for clients, it lands a lot of communication work and timeline scoping on account managers’ shoulders. I feel for the account managers. Yes, I do. It’s annoying to push launching day just because of nitty-gritty copy edits, especially when the majority of design and development work has been completed.

To provide a better content editing experience and ensure campaigns will launch on time, we designed an email editing tool on BXconnect, a client facing platform providing services including information dashboard and editors. The editing tool was designed to align with BXconnect’s user interface and general user experience, but function its own feature enhancement. We named it Email Builder.

Goal:
Provide users with an easy and seamless email editing experience for faster campaign launching.







Research

Internal Research


To kick off the project, I sat down with product manager and design director to study business goals, understand user needs, and brainstorm functions map.

Business Insights


Not starting from scratch, this tool needs to be built quickly on a bigger platform we already built. Stakeholder called out its specialties and features including:

  • Only content is editable within the tool.
  • Design will stay the same and won’t go off when content changes.
  • Mobile version will be updated automatically with easy access.
  • Users find it easy to use without feeling missing out anything.

After knowing the business needs, we realized there is a main challenge we need to solve in a timely fashion.

Challenge:
How to find a good balance between business needs and user needs.




Industry Research


To understand users’ general needs and behaviors better, l conducted an external research of industry standard tools, including SendingBlue, MailChimp and MailerLite.


After analyzing these popular online email editing tools, I gained some industry insights for our tool:

Good practices


  • Easy access to editor - Editing panels on the sides.
  • Clear status and action modes - where I am and what am I doing.
  • Super hybrid and multi-functional navigation - where I should go.

Practices needed to improve


  • Too many editing panels with different features.
  • Overwhelming customization features.
  • Inconsistent layouts and transactions.




UI Pattern Study


To have a better idea of  Email Builder’s user interface direction, I studied BXconnect UIUX pattern library and met with our design system engineer.


Different from other online email editing platforms, our business goal is to offer clients premier service with technical support to enhance performance and benefit collaboration. Clients are able to edit copy on their end and will turn to us for strategy planning, design service and technical support. Thus, the biggest challenge of designing Email Builder is to make it function minimally but not limits in functions. To tackle this challenge, I broke it down into 2 main problems and dive deeper in each of them.


Problem 1

There is unbalance between accessibility and constraint of content control.


Because of our business purpose, we don’t provide full control for clients with email editing.


Solution   

Lay down essential groundwork of functions to make user path clearer.


After listing subjects we are open to edit in functions map, I sketched out some potential layouts of editors, panels, and bonus features might be added. To keep the idea of a minimal editor with super easy accessibility in mind, we picked design concept 4 in round 2 to start with.





Problem 2

Unfriendly user experience exists in current industry standard practice.


Based on insights of industry research, I created a user flow to identify user behavior and find ways to reduce function complexity. Components were designed to help users go through editing process effortlessly.


Solution   

Design components to push workflow forward.


Zoom 

- View design in different scales.

Our team had an internal debate on this component since it seems not very necessary in a minimal editor. After a couple iterations and further research on targeting users, we decided to remove it at the end product since more users prefers design shown in actual size in editing mode with less scaling.

Bottom toggle

- View design across devices with one click.
- Designed align with existed pattern in BXconnect.

Multi-functional navigation

- Action control, version control and email testing.
- Designed align with existed pattern in BXconnect.

Do and undo

- Quick edit control.

Final Mockup


Prototype

Prototype was created in InVision for ongoing usability testing. After collecting test feedback and further insights, we will work on iterations.







Takeaway

In this project, I had a good time collaborating closely with the design director and designer who built BXconnect. It’s a great chance to work on feature design based on an existed platform and add new experience to enhance the overall service. It’s challenging translating business requirement well into product with concerns and constraints. And I find it essential to work on iterations quickly and digest feedback from different perspectives with more empathy. After all, my team and I are happy with the current stage of deliverable and will work on future improvement after collecting more user feedback.