Work       About


Email Builder

Role: UI/UX Designer
Team: Design Director, Product Manager, Engineer, UX Researcher
Duration: 6 months
Client: BounceX
Deliverables
- Service Roadmap
- Market Research
- User Interviews
- Persona
- User Journey
- Userflow
- Prototype
- Usability Testing

As a marketing technology company, we have been doing well in providing clients with premium services, mainly including strategies, design and technology integration. However, as business grows, our client number increases dramatically.
While we are busy with hiring new people, it’s still costing much time and effort to build and launch a large number of marketing email campaigns. Thus, we decided to build a product to allow clients to work on email editing, to save our time and give them more control over their campaigns.






Understand goals and define requirements.


To kick off the project, I sat down with product manager, user researcher and integration developer to understand goals:

  • Our users are marketers.
  • Users can work on emails quickly and precisely. They will be happy using this self-service tool and love working with us even more!
  • We can save time on editing and launching campaigns.
  • The tool will be built on BXconnect, our client-facing platform of campaign data and metrics display.
After all, we came up with a question…

How might we make email revise and edit  easy and simple for marketers in order to have campaigns built seamlessly and launched on time?



Find possibilities and direction

Use service road map to find problem space and possibilities.


Before speaking to our end users, I interviewed 3 account managers, and mapped out current campaign scope. I also made a new service road map showing assumption what this product can do to improve the service process.


New roadmap shows that part of service can be replaced  to save time and effort.


Comparing 2 road maps, I found this tool can replace original services done by people, Account Managers, designers and engineers. Replaceable service includes repetitive email copy edits tasks, version approvals and related communications. With insights, I decided to focus on reproducing the process of email copy editing and defined product direction as:

  • Users can work on email copy writing/editing, but can not change design and campaign setting, which are already integrated by us.
  • According to service road map, we will reduce time and scopes at least 30%.
  • Users will have more transparency and control on their email copy.


According to assumption, I created a low-fidelity wireframe to show how product translate services to user interface. I only sketched editor panels on home page and the page of sending test emails to show stakeholders my idea.


Investigate users’ needs

Conduct interviews and use personas to study users’ behaviors and synthesize needs.


To replace original service, we needed to understand uses’ behavior in the process and their needs. I interviewed 6 targeting users, including our client contacts and other marketers, to study their workflow and problems.



According to interview result:

  • Users need to build numerous of emails with different variations of copy in the same design
  • They care about how email looks across devices.
  • They want to edit emails easily without too much learning curve.

Thus, I worked on another wireframe with more functions display and interaction paths responding to users’ needs.


Analyze industry standards

Conduct market research to look for common UX pattern and existing problems in the industry.


Since there are already some email creating/editing tools online, I wanted to study their common patterns and problems to understand our users’ habits and expectations in this industry. Market research was conducted on SendingBlue, MailChimp and MailerLite.

Good patterns
  • Editor panels on the sides
  • Clear status and action modes
  • Super hybrid and multi-functional navigation

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



Approach: Create essential framework for major functions and interactions.


With insights from user interviews and market research, I sketched some potential layouts of editors, panels, and features, with the idea of minimized functions and easy accessibility in mind. After cutting down “not primary” content and moving around components, we picked concept 3 as a base.




Approach: Make email navigation clear demonstrating editing areas.


At first, graphical email navigation was our primary design concept, since we wanted to give users some visual hints. However, after a couple rounds of internal debates and quick research to validate, I found that visual might cause different levels of confusion and learning curves for users. Thus, I decided to use a more organic and straightforward style, concept 7.


Tackle pain points

Create user journey to better understand how users interact and feel step by step.


With insights of user interview and personas, I dug deeper and investigate users’ paint points by creating a user journey to better understand how users feel in each step. The purpose is to find potential solutions to eliminate negative feelings along the flow.

Pain point 1

Which variation I am looking at?”

︎Potential solution
Clear display of current variation title and make it easy to swap between variations.

Pain point 2

Does my email look right in mobile?”

︎Potential solution
A method to switch and view design in different devices easily and quickly.

Pain point 3

Let me send a test email to my colleagues and ask their feedback.”

︎Potential solution
Signifier showing how to send test email to one or multiple recipients.

Pain point 4

Does the new headline look good and fit in design?”

︎Potential solution
Notification of copy getting too long or too short.



Approach: Use user flow to create components that provide guidance, improve accessibility and accelerate work flow.


I used user flow to identify user behavior and find solutions to break through roadblocks and reduce complexity. Below are main components designed to tackle various problems under different scenarios.


Component 1

Use Zoom to view design in different scales.


Our team had an internal debate on this component since it seems not very necessary for email editing. After conducting a deeper research and playing around quick sketches, we decided to remove it in the final product since more users prefers emails are shown in actual size without scaling.

Component 2

Device toggle allows users to view design across devices by one click.

Component 3

Multi-functional navigation provides quick and easy access to action control, version control and email testing.

Mock-up

Prototype & Usability Test


To validate design, I created a prototype in InVision to conduct a usability test with 6 users. After collecting and analyzing feedback, we provided design solutions addressing to users’ concerns in iterations.



Does the new headline look good and fit in design?”

Users’ concern
Unsure if all copy length will fit in design.

︎Solution

Add notification of copy length alerts if copy gets too long or too short.







Sometimes I get lost in the middle of process or miss steps when wrapping up.”

Users’ concern
Inconsistent behaviors in work process.

︎Solution
Annotation will prop up to remind users of next step based on their editing process.



I have to ask designers to figure out different widths of email displayed across devices”

Users’ concern
Unsure how design looks across devices.

︎Solution
When user hovers devices in device toggle, dimension will show up.


Impact

Launched on Feb 2019, Email Builder has been used by more than 300 clients. Most clients provide positive feedback:

“ 

It’s very convenient that I can edit and test emails anywhere and anytime. It makes my job and life easier and more flexible!” - Julia, Marketing Assistant

“ 

The tool is simple and has anything we need with it. I can past it to the new hires easily without too much coaching.” - Jeff, Marketing Manager

According to a company internal report, email builder has leveraged a significant amount of effort and time, that we used to spend in email campaigns. It’s a huge win for the company.

Time and effort spent by account managers on a campaign

-42%



Time spent by designers and engineers

-30% 


Time and communications spent on email edits between account manager and client

-46%



Takeaway

I had a good time creating a product from start to end, on an existing platform. Working on this project, I kept asking myself how to add new experience to enhance the overall service. It’s challenging translating business requirement well into product with concerns and constraints. Thus, I learn that it’s very important to spend more time on researching and synthesizing feedback before build hand-on design. Email Builder has been used for almost a year, my team and I are very excited seeing more and more clients using this tool, and can’t for collecting feedback for next version update.