How everyone went bananas for an Email Designer.

Project Overview

The Email Designer tool was the first project I worked on at Bananatag. I'm most proud of this product in my career thus far, because of the high level of collaboration. It was an awesome team effort and continuous small improvements make it a success. We even became finalists at the Vancouver UX Awards 2020!

All screenshots and gifs are copyrighted or trademarked by Bananatag Systems Inc. (soon to be Staffbase).

Timeframe:
February 2019-Dec 2021

My roles and responsibilities:
Lead Designer: including research, UX, UI, illustrations, animations, prototyping, and even some coding!

3 collaborators working on an Email Design together

Our mini design sprint

We hosted a design sprint, where we showed inspiration from other design tools, created and voted on How Might We's, mapped out a customer flow, and posted Crazy 8 sketches (below).

These are the sketches and dot voting from the team (2 developers and 3 designers).

My sketch contributions for the layout

The team's interaction features with dot-voting

My contributions (in hi-fidelity)

Creation panel for email designer
Action showing how to drag content inside of a column
The New Email Designer allows the user to create content in a modular, flexible way.

I was responsible for these sections:
Block Layouts
Quick Blocks
Canvas interaction design
All illustrations & animations

I collaborated with my manager on the Elements and the Settings Panels.

The GIF above shows how to create a custom block.

"Quick Blocks" matches the creation style of the previous tool, and it's also meant for new users. Once users gain more experience, the natural pattern is to mostly use custom blocks, which is why that appears first in the creation panel.

Areas of delight

Below are my illustrations for the product. I wanted them to have a gestural feeling, to break away from the rigidity of the UI's pixel-perfect grids and lines.
Empty state illustration of an artist with a small frameError page illustration of artist accidentally sticking foot inside of paint bucket
This feedback form helped our product become more customer-centric. This helped establish empathy among our entire team.
Prototype of user interaction for filling out a feedback form

For our second big release, we launched a customization theme for the Email Designer (see below).

Screenshot of the Branding Settings page, with fonts, colors, links, buttons, and social icons

Reflections...

My design process has evolved a lot in the 2 and a half years working on the Email Designer and Bananatag in general. I expanded my influence to other parts of the product, and I'm happy that I made a positive impact. I've learned that there's no single, perfect solution. Every customer has a different mental model for creating content, and we should accommodate that as best we can.

Please email me if you want to learn more.

Designing In-app purchases with Thinkific Course Creators

Co-creating with customers who wanted their own mobile apps
Learn more