Our team started with a general prompt to reduce the number of calls to a call center, rerouting customers to a new digital solution for the most costly customer call intents. Read on to learn how the team navigated this challenge using design thinking and a scalable digital product development process.
| workshop facilitation
We started with a kickoff workshop with the client’s key stakeholders at our Innovation Center in Florham Park, New Jersey. We brought together teams that tend to work in separate revenue streams and even different geographic locations. The design team prepared design handouts and an introductory slide deck to inform the business of the value of design and empower them to feel a sense of ownership and commitment to this new product as they were going to provide subject matter support throughout the project.
A Digital Senior Manager discussing an analogous industry digital assistant in the aviation industry.
In a key workshop exercise, we viewed existing chatbots and discussed what the business and technical stakeholders liked, didn’t like, and why.
We also completed exercises to define the voice & tone for the new digital channel.
Business and tech stakeholders wrote what they liked and didn’t like on sticky notes regarding a sample bot conversation. The design team clustered and categorized the sticky notes to highlight what to focus on and what to avoid in the development of the bot logic during day two of the workshop and later in the project.
| information architecture
+ | art of the possible
In the second half of the workshop, we split the 50+ attendees into three groups to create customer experience journeys or information architectures for the three top reasons customers call in. In later phases of the project, we obtained information directly from the subject matter experts in the business to create digital information architectures to scale the project to handle higher call volumes for a greater variety of customer call reasons. Both the whiteboard sketches and digital information architectures from the session are included here.
We encouraged participants to brainstorm new experiences in the information architectures even if they were not sure if they were technically feasible. This encouraged more outlandish and innovative and personalized ideas prior to any of the design sprints giving our team time to validate feasibility with key stakeholders and developers prior to our design deadlines.
| scaling our design process
After the workshop and initial product launch with three customer call intents, we quickly scaled the scope of the product and operationalized the design process. We created core user personas to guide more customer-centric ideas in the information architectures for each customer call reason. We had some members of our team carryout the design deliverables while the remainder began research into the subsequent top call reasons.
Sample user personas for the first three customer call reasons to guide the information architecture designs. Some of these characters were based on real calls and others were based on the client’s main customer demographics.
Bot Design Sprinting
My manager split the larger 20 person strategy team, with 2 - 3 UX researchers listening to customer calls, 2-3 to gather feedback from expert business clients or SMEs, 2 copy aficionados, and 3 visual UI designers (me and two others) to design samples for the information architecture, wireframes, and any new design library patterns for each call reason/intent use case we designed.
Finally, as we scaled our team found that the third step of reviewing & soliciting feedback from the appropriate stakeholders was the design experiment’s critical reagent which determined the minimum viable timelines for our design sprints to keep an economically competitive rate for our client as feedback slow things down, requires iteration, but ultimately makes the design that much stronger and better for our client’s brand and their customers’ satisfaction. With this note, we extended our realistic working timelines to incorporate reviews with accessibility, legal, and the mobile first team before sending any final wireframes to development.
| brand refresh
In the middle of the content design for the first customer call intents, the CMO of the client requested a visual brand refresh to the app, one of the key customer-facing digital channels. Our design team (comprised of one Senior Manager, one Product Designer, one Visual Designer and myself) partnered with the app designers, a digital branding agency (AKQA), and the web developers to ensure the brand would be consistently deployed across channels for our product.
| interaction + experience design
Simultaneously with the bot design, the CMO of marketing had just pushed a new brand refresh and we as an Accenture were expected to partner with AKQA and align to the new brand standards. In order to make this happen, I created deliverables for my strategy consultants to present at an agency design share out with the client.
As a beneficial side effect, our work spanned the entire mobile and web development teams and helped the sometimes slower channels at the client migrate to the new brand standards faster than they might have on web if our team had not been touching both the mobile and web channels. At this phase of the project, I worked to assuage the developers’ initial concern about the brand refresh and created a Style Guide with elements for the chat across all device types and sizes including Apple iOS mobile, Android mobile, tablets, and desktop chat in a browser. I partnered with two other designers (one product & one visual to help with this larger scope of work to complete the design library in a pretty tight time frame for the client).
This Style Guide helped the developers understand the UI and interaction design for each new element and its usage in the chat experience, making them less frustrated about the new marketing / UI refresh. For the call intent reasons I designed (change my number, upgrade eligibility, trade-in, and order status) I looked to analogous industries (ie. car & electronics re-sellers for trade-in flows) to help inspire and bring in new design patterns to the client for this chat experience. In particular, I designed the accordion pattern and animation seen below.
Sample Style Guide page for the Accordion card first designed for the device selection in upgrade a device on my account. We used Sketch Measure (https://github.com/utom/sketch-measure) to quickly spec the elements and share with our greater dev team.
We also detailed out the states of the objects in a given class to show the interaction patterns and styles based on user feedback to indicate what felt like a natural experience in the chat window. We had minimal budget for user testing with actual users, so we used our larger Accenture team as testers for key interaction patterns like the accordion shown above.
| multi-channel designs
At the start of the project, the web developers at our particular client seemed to be lacking in front-end developers and newer tools like Sketch, Invision, and Zeplin. By the second phase of the project, we had introduced these tools to them, encouraging best practices for adoption. With Sketch and Zeplin now in our workflow, we moved the Interaction Style Guide from .pdf into a Sketch Library. Using a Sketch library helped us share our symbols with the app team’s visual and UX designers, tailor them to a multi-channel responsive design for mobile and web, and share them with the web team developers in Zeplin. I focused on the design and scaling of the iOS layout features, while others on my team worked on the tablet, desktop, and Android sets.
Sketch Library showing the layout elements, and critical design elements. As you can see, we created several states for the key elements to allow for a symbol-based design system to create happy paths from the IA to Sketch to Invision for quick design pace to allow more time to review the product with our key stakeholders in it’s real form on a mobile phone or desktop.
| visual + interaction design redlines
We corrected visual defects from Phase I (before the brand refresh) to ensure the developers understood the product layout, interaction patterns, and behaviors of the elements we had designed.