The Project
This project was a complete overhaul of Allyo’s existing campaign creation feature, which had several usability issues.
My Role
As the lead designer for this project, I needed to rethink the UX, create key user flows, understand journeys, and use data to solve pain points. I also needed to give the UI a facelift while simultaneously creating components for a new design system.
Existing Experience
The following screens show the existing key user flow.
Existing Pain Points
• Cluttered UI that severely affected usability
• Poor error handling in the form (didn’t help users understand what issues they were having when going through the flow)
• Users didn’t realize they needed to use a template CSV to upload contacts
New Functionality and Scope
• Refreshed UI
• Improved usability
• New functionality for recurring campaigns
Kick-Off
I met with our PM to discuss the feature requirements, any existing data and metrics, and both the positive and negative feedback we had been receiving from users. It became clear that if we wanted this feature to scale, we’d need to consider not only the architecture of the UX, but also revamp the UI to ensure the components fit into a new design system. Additionally, creating campaigns is a multi-step process, but the existing experience wasn’t breaking it down into steps.
Based on user feedback, we knew exactly what our users’ mental models were for creating a campaign. The process could therefore be broken into 5 steps:
After exploring the process, we had several questions and insights.
Now that we had clear and concise steps, we took a page from material design and thought it would be a great idea to make each step into a card.
Adding labels to each card would also keep users informed of their choices when the cards are collapsed.
Early Mocks and Wizard Experience
Since we now understood the process of creating a campaign, we explored several ways users could seamlessly go through this flow. Each card contained a vital step, and after completing each step, the next card would open automatically to reduce the number of clicks.
Main User Flow
Along the Way
While exploring, we also wanted to add additional functionality to enrich the experience:
• Adding/removing contacts once the modal had been opened
• Pre-composed message templates to significantly reduce completion time
• Updating/creating templates based on a message
After reviewing this with our tech lead, we decided to scale back some of the functionality to make sure the rollout wasn’t filled with bugs.
The following is a detailed wire flow with the interaction for potential new functionality.
See the detailed interaction notes. These were only explorations so they may be a little rough, but I wanted to show it because it's still part of the process.
Campaign Cadence Recurrence
In addition to sending campaigns immediately, users also wanted a way to schedule them with a structured cadence. The ability to set campaign recurrence proved to be challenging, and we had to rethink our design requirements and approach.
The following shows the flow, interaction, and UI for campaign recurrence.
Final Designs on Zeplin
Beta Testing
The beta shipped on time and was rolled out to a few customers over 4 weeks. We collected as much feedback as possible, and to our surprise, the results were even better than we had anticipated — feature usage increased by 75% and we received substantially fewer calls to customer support.
Here’s a quick video of the new experience:
Striving for Excellence
Once the pandemic hit, our company priorities changed and our focus became more pointed. We needed to make sure our core product functionalities weren’t just better, but the best they could be.
What we had done so far was a huge improvement, but there were still things we needed to address, like issues with vertical sizing with the modal on small screens.
Keeping the User Grounded
Keeping users informed is Rule Number 1 of UI. By making the progress bar a vertical numbered list with a dynamic component, it would now be clear to users whether a step was completed.
Review and Send
We also included a final review screen. Though it does add an extra step, it eases friction by giving users a chance to review everything on a single screen before sending a campaign.
Final UI
One of our main goals when redesigning the UI was also to create a design system. Everything here, from the icons and text fields, to the colors, modals, headers, and more were created as components and structured on Zeplin. I worked closely with our front-end architect to ensure components were built to spec — down to the pixel.
Final Thoughts
This was one of my favorite projects at AllyO not only because it was a challenge to solve for all the use cases, but also because I had to work on a new design system on the side. While it was double the work, I really enjoyed seeing the product working once it was deployed to an environment — plus, it’s always a fun learning experience working with and providing feedback to engineering.
