Project Overview
Planning
Competitive Audit
User Research
When I was first approached about bringing the Conversation Editor more in line with Conversica's brand, the first thing I did was perform a competitive audit and pull the feedback we had been receiving and saving from customer calls. Even before I reviewed these, I knew I was going to want to perform more of a redesign than I was being asked for, and the findings only confirmed what I was feeling when I was looking at the feature.
Customers had routinely been complaining that the current interface was clunky. They wanted more free form editing and better control over the messages that were being sent out, with many threatening to turn to competitors if we didn't fix this soon. As a designer I didn't see a way this could reasonably scale when it was already a complex feature sitting inside a tiny modal.
Additionally, the competitive audit showed that many of our competitors had already made the move to more robust features that went beyond mere variable insertion into messages. They were offering editing, AI generation of messages, and suggestions within the message. I pitched these ideas to the team, and it immediately was approved.
Phase 1 Design
Mockups & Prototype
UX Overview
Product Design
Figma
I moved swiftly into the design once I had approval for the feature. On the surface, the proposed changes seemed easy. Bring the Conversation Editor into a full page layout instead of modal, add a second option for an editing mode, and make it easier for users to find and edit their variables. All while changing the colors to match our current brand. But the more I looked into the project, the more I realized it was not really so simple. There were many things to consider in the redesign, including but not limited to:
- The back end was set up to count each message as a set of phrases rather than a whole editable message, which didn't support custom editing the way users were asking for and already thinking about it
- Users were asking to edit messages in ways that would hurt deliverability, mostly by sending out messages that are too repetitive and would be caught by spam triggers - something our current system prevented
- There were a lot of "hidden" features - variables that could updated elsewhere on the product, conversation rules that could get overridden if the user changed a contact list during the editing process, and other surprises that awaited me at every turn
I went back and forth with the engineering team, explaining the product vision and seeing what we could do to get there quickly, but the short answer was - there wasn't really a way. The back end was going to have to be upgraded and the database set up in a different way to accommodate all the changes we needed, and that wasn't going to happen anytime soon.
In the end it was decided that Phase 1 would focus only on bringing what we had into the full page layout. This also would give us an opportunity to fully perform a beta test with interested customers on the layout before we made more complex updates. Of course, I couldn't resist pushing for a couple extra things to set us up for future phases.
|
Before |
After |
| Page Placement |
Small modal that opened on top of a list of conversations |
Full page layout that both made elements larger and easier to read while providing extra breathing room |
| Quick Variable Locators |
Users were not able to find the matching variables within the provided list when they found one in their message |
Added matching color schemes instead of random, added a hover effect that would assign a drop shadow to all variable locations on the page, "click to locate" when in the message, and basic variable filtering (has / does not have value) |
| Tooltip Messaging |
Users would usually have to guess at corresponding items that could be edited on different tabs, like subject lines |
Descriptive and educational tooltips were added to areas with common incoming user queries in order to cut down on the amount of confusion |
| Message Box Design |
Small font, difficult to click into, no visible borders or standard placements for elements |
A dedicated border and header area, more traditional "email" style look to hint towards editing features, new SMS message styles that looked more like text messages |
User Testing
Usability Study
User Research
A limited number of customers was invited to participate in a beta study, and we released the feature onto their accounts to test out. We had weekly calls with these customers during the duration of the beta period, collecting feedback from them on how well things were working.
While we got a lot of positive feedback on the new layout and small changes we had made, the most overwhelming thing was what they kept asking - "when is full message
editing going to be available?" Customers might have been excited about the variables being easier to find, but they
wanted message editing - and more than ever, the continual feedback about needing that was what got us approval for enough time to make that possible.
Phase 2 Design
Mockups & Prototype
UX Overview
Product Design
Figma
When I went to start designing this, I ended up being very grateful that I had set up the page the way I did. There was enough room for me to add a widget to switch back and forth between our standard mode and the new custom editing mode, put in additional action buttons for things like sending tests and rewriting content with AI, and even include some educational content to help our users make smart choices when writing their own copy. This is a list of the updates I was able to make by the end of the project:
- Full message editing capability that could be turned on per individual message
- Advanced variable filtering so users could select the view most useful for them
- Variable search function for inserting them directly into a message
- Dedicated embedded and masked URLs rather than ones controlled via variables
- HTML editing in messages for basic functions like bold or italic text, and bullet point lists
- Retained states when switching between Standard and Custom editing modes
- Updated design styles to differentiate between different editing modes
- Rewriting custom messages with AI, including a pre-written set of common prompts
- Enhanced error messages to point out spam triggers and automatically mark problematic variables
Challenges
The biggest challenge our team faced was the way the back end had been set up when this feature was first being created. Scalability had not been top-of-mind, and the entire feature was held together with legacy code that broke if someone so much as looked at it funny. More sprints ended up being spent on technical debt than the true updates we needed to be making, and as a result things that should have taken weeks took months. It was frustrating both for us and our customers, especially when we had to push the release dates a couple times. But in the end we made it there - even if our developers still aren't fond of touching this particular part of the product.
Outcome
Despite the rough start, this ended up being
the most successful feature launch Conversica has ever seen. Custom editing was a feature customers had been asking for for
years, and our company had never seen so much excitement generated over the launch of a new feature before. We had customers calling and begging to be a part of the beta study for Phase 2, just so they would have early access to message editing. And in the end, it was everything they had ever hoped and dreamed of - and more. We went above and beyond their expectations, and to this day they still bring that up on customer calls.
