Marketing Campaign Creation Flow
The SMS/Email campaign creation flow allows restaurants to easily build and send targeted or broadcast messages to their guests. This is a key tool for driving engagement, promoting offers, and building customer loyalty—all of which are essential for boosting traffic and growing revenue.
Delivered a 30% uptick in NPS score according to internal survey.
Introduction
The campaign flow was a 10+ year old legacy product in need of a revamp
This project was described as a simple facelift to the legacy campaign builder—turns out it needed more than just a UI refresh. Since it is a form base flow, it also trickled down to other parts of the company ecosystem.
I was able to convince the team that we need to do some prep work, which is standardizing all form field pages. The new system need to have with proper grid and typography usage, I was able to quickly put together a design system that was scalable to other part of the product.
-----------------old design --------------
---------------new design --------------
Problems to Solve
1.
Heavy Cognitive Load
Information overload for users to have to memorize crucial information, such as campaign name, and segments info throughout the six step process. Previously, there was no way for user to remember info they entered from earlier steps, unless they go back to the first step.
Ineffective use of space
While it might seem like merely like a visual problem, it impactst the processing time. Using the Gestalt principle of proximity, I consolidated and reshuffled pages.
2.
Lack of Guardrails
There was one very subtly placed button for sending test campaigns, it was easily missed. In a information-heavy flow, it is crucial our users to know they entered the correct information.
3.
------------------------------- old design ----------------------------
Problem Statement # 1
Heavy Cognitive Load
By the time users get step 3 & 4, there are already a lot of crucial information that users are going to have to memorize, or refer on another screen, in order to create an campaign that deliver consistent message
Solution to # 1
Persistent Progress Tracker
I designed a responsive progress tracker that carries all the most pertinent info such as audience segments, campaign channels. This element will be persistent throughout the entire flow, serve as a guide for users. It will then expand into a review overview at the last review step, where user can get a comprehensive view before sending the campaign out.
------------------------------- new design ---------------------------
Problem Statement # 2
Ineffective use of space
Previously, crucial choices such as segments, and audience float as selectable chips on the page, which took up precious real estate. Furthermore, the pages also lacked hierarchy and proper grouping. While this might seem like a simple UI update, what is required is a close examination of the information hierarchy to deliver information effectively.
------------------------------- old design ----------------------------
Solution to # 2
- Introduction of dropdown menu to consolidate space
I designed a dropdown component that has built in multiple, single choice logic, as well as the ability to select all. This component was a game changer because we save previous real estate, was then able to condense most fields into sections above the fold,
------------------------------- new design ---------------------------
Solution to # 2
- Page level notification that deliver timely information
Previously, information such as exceeding character count limit was displayed as subtitles. This is an incorrect usage of common UX patterns. After the re-design, the page-level notification will only appear when it is needed, delivering timely information only when it is needed.
------------------------------- new design ---------------------------
Problem Statement # 3
Lack of Guardrails
Previously, there was only one CTA for sending tests in the entire flow, it was placed below the fold. This was especially problematic because our clients could have easily send out campaign that contain the wrong information. For example, it could be disastrous if it is an event campaign, where the time and location is crucial for attendance
Solution to # 3
- New placement for sending test cta
- Cautionary modal to deter user from skipping tests
As mentioned, there was only one poorly placed button for test. Now, not only are there a more prominent placement, there is also a modal that pop up if user try to bypass testing
------------------------------- new design ---------------------------
Solution to # 3
- Additional testing section
Introduction of additional testing, after speaking to our customer success team and learning the importance of multiple testing rounds. I introduce the concept of gradual progressive batch testing. First user can send the test to themselves, then can gradually increase the pool of recipients.
Additionally, added testing info such as whom have received the test, to the review stage. Users can then rest assured they have done all the due diligence.
------------------------------- new design ---------------------------
What's next?
Scalability
The important background context was the company was going through systematic overhaul, we decided all flow that utilize form fields was top priority. Hence the overhaul of marketing flow, but the next step was to take the pattern i designed, and apply it to everywhere else. The long term plan was to build a comprehensive design library, this is the first step.
We took the design system and apply it to another core product: Offers. I worked with another designer to make sure all elements are applied correctly, and consistent with grid alignment,
So far, the feedback has been overwhelmingly positive from our clients, but i would love to gather quantitative data such as completion time, accuracy/ revision data to further improve these feature.
------------------------------- Offer Flow ---------------------------
------------------------------- Settings Pages ------------------------
