Work       About

Email Builder

Role: UIUX Designer
Duration: 6 months
Client: BounceX
- 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 (which is awesome!). While we are busy with hiring new people, it’s still costing much time and effort to build and launch a large numbers of marketing email campaigns. Thus, we decided to build a product to allow clients to work on email copy content on their end, to save our time and give them more editing control.

Understand business goals and constraints.

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

Business Goals
  • Users make updates on campaign quickly and precisely.
  • We save time on editing scope and launch campaigns on time.
  • Clients are satisfied with this part of self service and love working with us even more!

  • Tool is built on BXconnect, our client-facing platform displaying campaigns data and metrics.
  • It’s for marketing email copy writing/editing only.
  • Users can work on copy content, but they can’t change design and campaign setting, which are already integrated by us.

After all, we came up with a question…

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

What does the service roadmap look like?

Before speaking to our end users, we interviewed 3 account managers, and mapped out current campaign scope. Based on project goals and constraints, we made a new service roadmap showing difference and improvement after email builder was built.

New roadmap with email builder saves more production time and effort.

Comparing 2 roadmaps, it shows that:

  • Only 1 account manager will involve, while we need 2 originally.
  • Designers/engineers will work on initial email only, and leave copy to clients. It will save 1/3 of their time.
  • Clients save more time going back and forth on feedback communications, and cut down at least 1/2 of the original scope.
  • Clients have more transparency and control on email copy content.

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

To replace original feedback communications with self service, we needed to figure out what components users need and how they use those. We interviewed 6 targeting users, and created 2 personas to study users’ workflow and problems.

User journey was created to better understand how users interact and feel step by step.

  • They need to build a large number of emails with the same design.
  • They care about how email looks across devices.
  • They want to edit quickly and straightforwardly.

Nest step, we digged deeper and investigate users’ paint points. User journey was created to better understand how users feel in each step, so that we could brainstorm potential solutions to eliminate negative feelings along the flow.
Paint point 1
“Which variation I am looking at?”
Potential solution
Clear display of current variation tile and make it easy to swap between variations.

Paint point 2
“Does my email look right in mobile?”
Potential solution
A method to switch and view design in different devices easily and quickly.
Paint 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.

Paint point 4
“Does the new headline look good and fit in design?”
Potential solution
Notification of copy getting too long or too short.

Conduct market research to look for common UX patterns and existed problems in the industry.

While digesting users’ needs and behaviors, we studied several email editing tools in the industry, including SendingBlue, MailChimp and MailerLite.

Good practices
  • Easy access to editor panels
  • 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

Lay down essential framework for major functions and interactions.

With insights from user interviews, user journey and market research, we 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.

Email anatomy should be clean and clear demonstrating editing areas straightforwardly.

At first, graphical email anatomy 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, we found that visual might cause different levels of confusion and learning curves. Thus, we declined to use a more organic and straightforward style, concept 7.

Function framework was lay down, and what’s next step to improve the experience? To answer this question, we decide to

focus on user flow and opportunities to push process forward.

Components were designed to provide guidance, improve accessibility and accelerate work flow.

We 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 plating around quick sketches, we decided to remove it at the end product since more users prefers design shown in actual size in editing mode without scaling.

Component 2

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

Component 3

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



Prototype was created to conduct usability test with 6 users. After collecting and analyzing feedback, we provided design solutions addressing to users’ concerns in iterations.

Usability Testing

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

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

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.

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.

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


I had a good time collaborating closely with the design director and designer who designed 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 deliverables and will work on future improvement after collecting more user feedback.