Cannoli
From Figma to email Code
Creating a product that combines the industry leading design capabilities of Figma and the challenging limitations of email code, led us to facing a wide variety of challenges ranging from explaining how to build your Figma files in an easy and quick manner, to offering an email specific editor for final details and connecting with major Email service Providers (ESPs).
Year
2021-2023
Client
canolli.app
from idea to inbox asap
make full fledged code based emails accessible to all
While email marketing is ubiquitous as ever, email creation is a convoluted process, especially while creating responsive designs since mobile email opens account for about 46% of opens for all of the email marketing.
The team's first take was creating a product that helped email developers work faster, but upon reaching out to one of Scalero's biggest clients, we realized that the market for such a product was small and devs didn't want to change tools, but we found marketers and designers could be a bigger user base and market.
The task
The team's focus became going from an idea to sending an email as quickly as possible. The first hurdle was coding so the solution was feeding Figma's handoff code to Cannoli and processing it. Here we found one of our first challenges, to match emails strict requirements we'd have to name layers in a specific manner and use auto layout which during our user research we found not many email marketers used in their layouts.
First editor
Our first batch of cannolis
After launching a soft beta, we started doing user research and the main challenges users faced were:
It was tough following all the guidelines for Figma designs, mainly auto layout.
Even if they knew code sometimes they got lost, maybe if we could highlight the code of whatever they clicked on in the preview on the right.
They needed to send test emails to ensure deliverability and mobile design.
They needed tools to ensure email size, image size, links were working correctly.
Simplify, Speed up, Sync
We knew we had to make it easier for users to onboard Cannoli, so we created a series of introduction and onboarding videos that went over the creation basics. We also developed a Figma plug-in that provided a series of tools, making email creation more of a point-and-click process.
Users could drag and drop common elements like headers, text, images and buttons and rearrange them, as well as adding columns or sections.
Finally you link your Cannoli user and sync new files, updates to a file to make any adjustment or changes faster from Figma to Cannoli,
Building content that ensured user success
Along with the plugin we also started a series of short video tutorials that would help users get the most out of Cannoli as quickly as possible. We found that after publishing them, combined with an email campaign our churn rate reduced by 34% and subsequently our return users MoM rose to 64% nad kept ticking up with each new video and product update.
Next batch
Leveraging Scalero's own agency team as well as existing userbase, we combined quantitive data from Heap and constant suer research sessions and surveys to make sure we were adding the tools to ensure our goal of an easy to use tool. Our team added features like link validation for any href element in the email code, as well as a preview feature that allowed users to scroll to a specific code line.
The latest UX update to the editor was building a visual editor inspired by a webflow and figma's approach. Users could finish and edit their email to ensure that it looked great on any device without having to write a single line of code. Along with these editing features we also tackled working on our pricing experience, starting with a tier based system, which proved an interesting challenge, finding ways to offer enough time for newcomers to grasp the value of Cannoli and then creating the upsell and upstream of users into paid tiers.
For file validation, we wanted to create a checklist for email creators to go over to ensure that their email had all the elements they had envisioned, links, images, while staying within the size limits of modern email apps.
The latest editor follows modern 3 column layout paradigm, offering quick navigation between layers and editing individual assets, giving users the opportunity to edit just about any detail on their email with visual widgets, moving us closer to a low code email creation platform.
A design system that offered adaptability and scalability
We also worked on a design system that was functional for both the dashboard and the email editor which had opposing color schemes, with the email editor taking visual cues from IME's and using a "dark mode", we focused on ensuring a consistent UI and UX between these 2 color schemes. Combining atomic design principles and tokens, we set out to design a robust and scalable system that shared all of the coding elements to ensure a single source of truth from the storybook.
