tiramisu
platform
A Better End-to-End Email Creation Platform
An email marketing hub solving multiple workflows and offering a unique approach to templates. Packed with industry specific project management tools, team collaboration and feedback and a template system designed to pump out thousands of emails a month.
Years
2019-2021
Client
The challenges
Tiramisu's unique value proposition is being a product made by email marketers for email marketers, the product owner Scalero’s cofounder Brant Cebulla, had a unique vision after working in the worlds biggest wine app, Vivino and having to find multiple workflows and apps for the company’s worldwide marketing.
We set out to design and nonlinear project management tool that would help the email marketing pipeline whether you had a full-fledged team and your designers would upload designs, receive feedback, get approval, devs will take over and code offer a live preview of the email code and sending test emails to ensure mobile functionality, connecting to multiple ESPs (email service provider) so marketers could connect to their automation flows and finally generate a template system where only certain elements designed by project leads could be edited easily by marketers without any code knowledge while maintaining on brand designs, layouts and I and outputting clean, responsive and serviceable email HTML.
Multiple users, multiple flows, iteration galore
Our approach to solving the app was focusing on the different user personas that would potentially use it at different stages of a project:
• Project and team managers
• Marketers
• Designers
• Email developers
Each would have a different set of expectations, moments they would interact with the app, and goals, all of which we had to solve for as well as mapping out multiple projects flows different teams could have:
• Teams could use the design face but then their email developer would code on another platform or a marketer would use the template builder from an ESP
• A team could already have a design ready, consequently they would start in the development face and then export it to their ESP
• A team could only create templates by importing HTML they had already coded and only using the template builder
Looking back now I think a jobs to be done could have better suited the scope of the project, the ambiguity and wide variety of potential user roles, personas and backgrounds.
With all these challenges in mind, we got to work and through an intense iterative process, we landed on the first UX and UI, where we separated each of the phases into tabs that could be accessed at any time, with a project dashboard that outlined your project, their current status, if they had a template in emails, and the team members that were working on the project.
We had the invaluable benefit of leveraging the founders' great relationship with the Vivino team, with them constantly testing our alpha product, giving deep feedback and insights, and ensuring we were solving the problem we had set out to solve.
The dashboard
The first dashboard had a very color heavy design, along with multiple features that upon testing saw little use and were discarded, as well as working on the main pain point that came back of wanting to know what stage each file was at, did it have a design, code, templates? With this in mind we cleaned up the Ui, worked on smaller tags and indicators so that the screen would not be to dense and lead to information overload, while still offering users the information they needed at a quick glance, balancing this was only reached through trial and error and amazing feedback from our users and research sessions.
The Project Log
With our original take of having the process be very structured following a linear flow, we thought of the Log as the home page for each project, where a PM could see updates, team members and due dates, designers could find associated files, brand guidelines, images, a developer could quickly jump to the code editor and all of them could communicate with comments at any point of the process. Upon testing this UX, we found out a lot of users almost skipped out and most teams were using something like dropbox or drive to share files, but what Pms liked and we focused on, was the activity log, being able to see what, when and who did anything on a project was very important for managers and leads, we cleaned out the Ui and made the update log the central feature of this screen, while other features were still available to offer flexibility with less visual prominence.
Creating a project
Our first take while functional, led a lot of users to ask us what the difference was for a project you requested vs a project you uploaded design and HTML, so we focused on simplifying to reduce this friction, so wether you would tag Scalero's agency members to help you out on your project or your own team to use Tiramisu as a hub for designs, code and email templates, there wasn't that difference any more, what we did add was an toggle to choose between a one off project or a template project to offer tooltips that helped them solve each type of project accordingly and not pester them with unwanted advice.
Design view
A very popular view due to our comment system on design files, the main focus of comments for this screen where to give users faster ways to know there are updates, we implemented some pills to show comments and approvals without having to go into the individual variant, a way to add variants to a version. Finally int he upper right corner you can see a kind of progress bar, this Ui was the last time we used it, going forwards with a tab based UX to offer more adaptability to any team's workflow vs a linear approach.
The code editor
One of my favorite parts about this project was needing to take a deep dive into the email marketing ecosystem, which I was woefully unaware of and really understand so many of the challenges but also opportunities the space offers, for the code editor I think it was the toughest one, since devs are very peculiar to their wants and needs and once they find an IDE they'll be hard to budge. With this in mind our take was to offer a functional, light and email centric editor with simple tools that made building Tiramisu templates easy, through each iteration we cleaned the Ui more, to offer a minimalist screen so devs could focus on the code. We offered some tools team wide find and replace, macros and more, but through analytics and feedback we found we could tuck them into menus for when devs needed them and not have a widget take space code could be using.
The template editor
One of the main selling points for Tiramisu was the editor, allowing marketers to quickly update copy, links and images, but without any drag and dropping, having designers angry at how they broke branding guidelines or making awful looking emails. During the first updates we focused on what was technically feasible and this feature was one that stayed in a very wireframe-y Ui for a long time to help devs focus on the UX and not the visual details yet, users could click on the email preview and see what areas were editable, each one with their text input, upon feedback we added options to move certain elements if tagged in a specific way in code, adding rich text editing to the inputs and the ability to change images from your local library. Our full vision would actually be rendered a few years down the line as Cannoli's visual editor.
Keep the updates coming
The biggest changes during iterations were adjusting the approach of linearity we originally designed, thanks to user feedback, and constant changes to the template editor from basic input boxes that had to be tagged in the code, to a point-and-edit visual editor with robust design capabilities, while still ensuring on-brand emails.
With all these team centered user flows, we also had to work on notification systems, comment UX and UI, a team-wide image gallery to easily insert images into the code editor or the template editor, and finally devising a pricing strategy that would attract clients big and small, especially towards the bigger enterprise clients for whom the SaaS was designed around.
Millions of emails sent
Up to our last update, Tiramisu had been used to send over 5,000,000 emails, and we had companies like Vivino, Hostelworld, ThinkX, Boksu, Cirkul, and many more using it daily to ensure their email marketing creation pipeline was smooth and efficient.
Coming towards the end of the product team at Scalero focusing on Tiramisu we started workshopping and brainstorming the idea of what would become Cannoli, we recommend checking out the case study for that SaaS product.
The next steps
Although never deployed, we started testing with a small set of users a prototype that would add a left hand menu, with the idea of showing all the different tools and features Tiramisu offers to new users, and then once you got the hang of them, offer a collapsible option that left only icons visible to expand the work area. We also looked in ways of cleaning up the Ui, making the template creation process easier, offering previews of files without having to open them to speed things up in case you had multiple templates for a single email. Many of these ideas and paradigms ended up appearing in Cannoli and at many points we pondered of fusing both products or making interconnections easier between them to quickly create emails from a figma file, then form said email make templates that can be edited quickly without disrupting the design or code. We hope the app continues to help hundreds of email marketers, designers and developers as it did while we were working on it!
