The Voice of Success Best Practices Series
In this series, conversational AI teams share how they use Voiceflow to deliver quality experiences for customers. What processes have they adopted? What results have they seen, and what advice do they have? Read on for ideas and inspiration that will help your team do its best work with Voiceflow.
Who: Conversation design team responsible for voice and chat assistants at the Woolworths Group
Old Way: Cumbersome flowcharts and a siloed workflow led to inefficient handoffs, including long walk-throughs with developers and too many back-and-forths on the design.
New Way: The team saves time and reduces rework with better design artifacts, a more collaborative process, and production-like prototypes that uncover issues before handoff.
Handoff Hurdles with Flowcharting Tool
Designer-to-developer handoffs are one of the most challenging parts of creating conversational experiences. This conversation design team wanted to streamline and scale interactions with developers but were bogged down by the inefficiencies caused by their flowcharting tool.
For starters, the design team’s flowcharts were becoming increasingly unwieldy to build and navigate—especially as bots became more feature rich. The entire conversation journey sprawled across one vast canvas, making it difficult to follow all the pathways and logic in complex designs.
Step-by-step walk-throughs with developers were extremely time-consuming. “We had multiple one- to two-hour sessions happening all the time,” remembers Peter Isaacs, a conversation designer at WooliesX, the innovation arm of the Woolworths Group.
For voice assistants, designers created a second version of their flowcharts and added information relevant for developers, including SSML (speech synthesis markup language), API calls, and more. But this effectively doubled the designers’ workload and made conversation flows visually confusing.
Finally, the tooling resulted in multiple rounds of feedback with delays due to rework. “With flowcharts, you can miss heaps, which ends up making the design and development cycle longer,” says Peter. Sometimes issues came to light only after a feature went live, which degraded the user experience.
Getting Buy-In for a New Approach
After evaluating Voiceflow, Peter saw an opportunity to make life easier for designers and developers with new tooling and tweaks to their workflow.
To gain support for the transition, Peter used Voiceflow to design and prototype a new intent for an existing assistant. The product owner gave his thumbs-up after simulating a live conversation with the voice bot. The ability to test with production-like prototypes—without writing a single line of code—was far superior to the previous “Wizard of Oz” approach.
Getting developers on board took consistent and open communication. Peter actively engaged and solicited input from developers as he rebuilt the entire insurance bot in Voiceflow. “I wanted to make sure they understood everything we were designing because developers are the main audience for our flows,” explains Peter.
Building a Bridge with Better Design Artifacts
WooliesX now uses Voiceflow to expand the conversational capabilities of a dozen assistants across voice and chat channels.
Peter says designing in Voiceflow is faster and “way more fun” than with the old flowcharting tool. The team can easily map out and move around their designs thanks to features like drag-and-drop components and organized topics. They can also build complex pathways in less time and with fewer blocks. For example, a fallback flow that took 14 shapes to visualize can now be represented with a single box—and reused across projects.
Designers no longer produce developer-specific outputs. Instead, they use Voiceflow’s built-in steps and canvas markup to express the logic, APIs, data capture, and other conversational events that will impact the developer’s build. SSML is even baked into text and speak steps for developers to reference.
When a design is ready, designers share their Voiceflow project with developers. Walk-throughs take less time thanks to a comprehensive, easily digestible design artifact. Designers can document their intentions clearly and consistently, while developers get the details they need to assess and build the experience.
Upfront Collaboration, Less Work Down the Road
WooliesX further streamlined handoffs by making several workflow changes.
First, every project now kicks off with a conversation design brief. A cross-functional team of conversation designers, developers, AI trainers, and product owners agree on the project’s objectives, scope, and anticipated conversation flows. Designers learn what API variables and dialogue data they have to work with, which helps ensure the accuracy and completeness of their designs.
In addition, conversation designers now use Voiceflow’s high-fidelity prototypes to thoroughly test their designs before turning them over to development. Peter enlists bot specialists to comb through intents, utterances, and conversation turns to find gaps or room for improvement. Designers also surface issues by having end users interact with the Voiceflow prototype and then reviewing transcripts of the test sessions.
As Peter explains, “The idea is to have all the complexities and edge cases fleshed out so that the developer can build it—hopefully just once.”
More Time for Design
Adopting a platform and process that strengthens collaboration has paid off for the WooliesX team.
Better communication and less guesswork have cut the number of design iterations in half. “Rather than doing five to six reworks, we’re now looking at two or three,” says Peter. Plus, it’s much simpler to make revisions in Voiceflow than in the flowcharting tool, where a single change rippled through many connected components.
Handoffs from design to development have also vastly improved. Peter estimates that he devotes 30% less time to the handover process. “I spend far less time in one- to two-hour meetings doing dev handoffs,” he says. “Now I can spend that time doing design, which is ultimately better for the customer experience.”
Best Practices from this Conversational AI Team
- Start simply to win stakeholder support. Peter took an existing experience and designed just one additional intent in Voiceflow to use in his pitch. Other team members were familiar with the feature, which made it easier to compare processes.
- Use prototypes to win over product owners. Walking people through a static flow chart is one thing. Having them interact with a high-fidelity prototype is quite another. Voiceflow’s prototyping capability is a big crowd pleaser and a valuable tool for user testing.
- Actively engage developers for a smoother transition. Peter recognized that developers are the primary audience for his conversation flows. He sought feedback from developers on his first Voiceflow projects to get their buy-in and deliver a quality handoff artifact.
- Break down functional silos. Increase efficiency and ability to scale by replacing a segmented workflow with a collaborative approach. Integrating developers and AI trainers / data scientists early in the process avoids a lot of guesswork and unnecessary design iterations.
- Think like a full-stack designer. A collaborative workflow gives designers the chance to play a much bigger role. Grab a seat at the table by up-leveling your understanding of all the elements—logic, copy, visuals, NLU model, etc.—that go into making a great conversational experience.
