Building Autosave in Braze
Overview
Losing unsaved work is a top frustration for marketers, and Braze's current saving system amplifies this pain. Requiring users to manually press a save button not only interrupts their workflow but also risks significant work loss if they forget to save. To address this issue, I was tasked with defining a seamless autosave UI and establishing consistent behavior standards across Braze. This framework will enable other product teams to integrate autosave into their respective areas, reducing friction and safeguarding user progress.
Role
Responsible for defining the user experience of autosave across Braze’s entire UI.
Timeline
January 2024 - Present
Initial Testing
We started by validating the problem with our users. Along with receiving saving functionality requests, we also received frequent requests for undo/redo functionality in Braze. Despite initial skepticism about its value to users, I created multiple design flows (one example shown here) to explore how undo/redo could integrate into the UI. Once users saw how it would function in their workflows, their interest in the feature waned, confirming our hypothesis. This allowed us to focus the scope exclusively on developing an intuitive saving feature within Braze, ensuring we prioritized what truly mattered to our users.
Building Assumptions
After we had a better understanding of the scope of the work, I mapped my assumptions about marketers in the major workflows/jobs to be done across Braze. By mapping what was clear intent and unclear intent, I could begin forming a point of view in how Braze’s saving system should work to give users the best experience (not losing any work!).
Determining the UX
From here, I designed various approaches that we tested with customers to understand how “loud” the visual indicator of a save occurring needed to be so they had trust and assurance their work was safe. Did users need a notification? How often? These were the questions I was answering as we went into our next round of research.
Another key consideration was designing a saving experience that not only functioned smoothly within my team’s focus areas but also integrated seamlessly across other parts of Braze, such as composers. While composers fall outside my team’s direct purview, the framework we developed needed to be adaptable and scalable for use by other product teams. This required close collaboration with stakeholders across the organization to ensure the visual save indicators and underlying functionality aligned with diverse workflows, maintaining a consistent and intuitive user experience throughout the platform.
User feedback on notifications was mixed—some appreciated the constant updates, while others found them disruptive. However, toast notifications were widely preferred when users navigated to a new page, as they provided reassurance that their work was saved. Additionally, all participants agreed that auto-saving every minute met their expectations.
To address this feedback, I decided on a phased approach for toast notifications. Initially, they would be prominent to build user trust and familiarity with the feature. Over time, as users became confident in the background saving process, the notifications would be gradually removed.
Proposed UX
Mock Ups
After thorough exploration and thoughtful refinement, I presented my guidelines to the various channel teams, ensuring they had a clear framework to implement a cohesive and user-friendly saving experience across their respective areas. (SMS, Push, Email, WhatsApp, Content Cards and more). A few of these mocks are below, click to enlarge.
Drag and Drop Email Composer
In-App Message Composer
HTML Composer
Proposed UX for Composers
Design Documentation
Autosave in Beta
The first phase of the release is live, with a select group of customers using our beta and providing overwhelmingly positive feedback on the feature. Currently, saving is limited to Braze campaigns, but we’re on track to launch it for General Availability in Q1 2025. Simultaneously, we’ll focus on implementing saving within Canvas.
Our sister product teams will also integrate saving into their composers in Q1, ensuring comprehensive coverage across product areas. With this rollout, users can have peace of mind knowing their work will be saved automatically at all times.
This video shows autosave in its current form in Braze:
The story does not end with the release of autosave, though… read on!
An opportunity.
The placement of the autosave indicator presented a chance to rethink the Canvas Navigation, paving the way for a more seamless and user-friendly experience.
Redesigned Canvas Navigation Vision
Click to enlarge