© 2019 by Ewen Zhong. All rights reserved.

What's next ?
backtotop-09.png
TELUS B2B Order Capture 2.0 Flow Case Study

Overview

Order Capture Flow 2.0 is a step-by-step process used by B2B sales agents at TELUS to create a new Order from an Opportunity. It’s utilized Vlocity essential products and services and implemented within Salesforce environment. The design objective is to provide an intuitive, consistent and efficient user experience for agents in the creation of new orders.

Background

TELUS is one of the biggest Canadian telecommunications company that provides a wide range of telecom products and services including internet, voice, entertainment, healthcare, video, and TV. The Order Capture Flow 2.0 (“Order 2.0”) is an extended and enhanced process built on top of the older version Order capture flow (“Order 1.0”) at TELUS.

 

New features and functionalities are added to facilitate more complex sales activities which involve larger sales volume, more hierarchical product model, more flexible promotions/discounts and etc. The Vlocity products/services implemented in this process are including but not limited to CPQ (Configure, Price & Quote), Omniscript (multi-step business forms) and etc.

 

Although the call centre agents are the main users of Order 2.0, however ultimately it can be also used by the agents in store, so it is important that the interfaces reflect TELUS’s brand identity and Vlocity’s best practices.

Orders

Customer

Sales Agent

Problem

1. With new features being added, we need to ensure the whole order capture process is intuitive and efficient to use, so the agents can create more enterprise orders within certain period of time.

2. The old Order 1.0 flow was only being used on web platform, so the interface and interaction design didn’t take responsiveness into consideration very much. However Order 2.0 needs to be easy to use on both web platform and mobile platform (mainly on tablets), so we need to provide a consistent and engaging experience throughout.

3. Order 2.0 is applied to fit in wider selling spaces including A) configuring orders for multi locations under one customer account; B) selling new products with deeper hierarchy, which hasn’t been handled by Order 1.0.

4. There have been some experience issues already existing in Order 1.0 that have been known in the real world and from user feedback. New design should solve these experience issues without fundamentally changing the existing workflow that agents have been already familiar with.

My Role

We had a very big project team with up to 30+ team members, including business, tech and design professionals from TELUS, partner and Vlocity.  I’m the only one designer from Vlocity, partnering the other 2 designers from another design agency. My major responsibilities are to (1) take the requirements and develop design alternatives (2) ensure the final design is aligned with Vlocity best practices (3) deliver high fidelity prototypes (4) deliver the whole design in tablet view. Other than that I also facilitated and participated in usability testings and project demos.

Process

User Research

User research were conducted by the external agency and TELUS team at TELUS call centre at the beginning of this project. 

The methods which had been used in this research session are: 

1. Observation: Researcher observed ~10 sales agents using the Order 1.0 on the desktop for their daily job;

2. User interviews: Researcher conducted interviews with the agents she observed, focusing on a.The tasks that users need to complete using Order 1.0; b. Pain points that they’ve been having during this process; c. Anything that they thought of which may help improve their effectiveness and efficiency during order creation.

A few pain points that had been summarized in the research sessions are:

1. Most of the agents had the requirements of having the capability of configuring and pricing orders for multiple locations under the same customer account. In the current flow, they have to go through the whole process to create one order for single location and start over to create another one, which was causing a long customer waiting time on the phone;

2. Some users especially the professional users thought some of the steps/content were redundant in the process which might lower their efficiency. And also part of the journey were not clear enough for the new users or users with less experience. These issues will be detailed explained in the Main Design Focus session.

3. For those agents who had less experience with Order 1.0, some instructional text on the screen will help guide them go through the whole process more smoothly.

User Flow

Following is the chart that illustrates the optimized user flow in Order 2.0

Main Design Focuses

According to the business requirements and user feedback, we had listed out following points to be our main design focus for this project:

Multi-location scenario


One of the biggest requirements for Order 2.0 flow need to meet is that agent should be able to capture a order for multiple locations. That requires (1) agents are clear about the locations in this order and (2) agents are clear about the products added to different locations in this order during the selling cycle.

Reduce the confusion when users are working with order address(es)

In the old design in Order 1.0, when user is adding the location which the current order is for, he/she has to (1) select from existing locations under this customer account in the first step, or (2) proceed to the next step to create a new location for this order and account in the second step. However in some use cases, e.g. when agent has already known that this order is for a brand new location, but there’s no way that user can bypass the first step“Select from existing location”. It’s very confusing that some new users thought they had to pick locations from the existing location list. And also since these 2 steps were separate in the old design, when it comes to “multi location” scenario it’s getting even more confusing since agents can pick more one location and carry on. This issue has been pointed out several times in the user interview session. There has to be a way to reduce the complexity and confusion in order to decrease the training time and errors.

Deep product hierarchy

For some of the products/services sold by TELUS, e.g Internet, TV and etc, onsite/remote installation activities are required to be scheduled when the order is being created. Agents need to have a calendar/schedule view to look at in order to talk with the customer regarding the date and time, availability and event details to arrange the installation activities and leave notes for technicians and customers for certain events.

Installation appointment calendar


Cleaner and clearer presentation of product hierarchy will help agents to talk through the deeply structured enterprise telecom products with customers in an easier and more efficient way. It will also help speed up the product configuration process in the order creation flow.

 

Responsive Design

Most of (~98%) the use cases that Order 1.0 was handled are like: call center agents are talking on the phone with the customer and meanwhile working on a big monitor to create order. Mobile device were not taken into consideration at all back in that time. That means some of the interface design of Order 1.0 are not responsive on smaller screens, which is not acceptable moving forward. Although it will be very rare that agents working on a smartphone to create a large volume enterprise order, tablets are some devices very realistic to be used in the world of Order 2.0. In this case, the interface and interaction design for Order 2.0 has to be responsive.

Solutions

According to the business requirements and user feedback, we had listed out following points to be our main design focus for this project:

Multi-location scenario

1. User should be able to add multiple locations for the current order (which can be achieved in the Select Address step)

2. At any point of this flow, user should be able to know the location that he/she is working with and he/she should be able to easily switch between different locations. In this case we designed a “Location Picker” component, which can be placed on many of the screens in the flow. The functionality of this component is to let user A. view the location information including address in a brief form and connectivity/qualification; B. select any of the order locations in the pick list if he/she needs to work with.

This component is consistently placed in a prominent location across the screen, all the content below is all “location sensitive”

We also wanted to differentiate the “single-location” scenario and “multi-location” scenario without the UI consistency. The location picker is in a “read-only” status  (with icon and color changing) when there’s only one location in the order and the pick list couldn’t be brought up.

Although only a very lightweight UI component was introduced to this process, it actually covered many location relevant use cases.

Reduce the confusion when users are working with order address(es)

In Order 1.0, although the first step (Select existing address) and second step (Add new address) have different focus, after all the purpose of having these 2 steps is the same: to let user configure location(s) for the entire order. Based on this rationale, in order to simplify the flow and reduce the confusion of having 2 steps, we combined them to 1 step. In this step, user can select order locations either from the existing list, or by creating new ones. It’s also become more flexible because it didn’t matter whether user wants to select from existing list first, or by adding a new one first. Another improvement is that the selected/added locations are presented in a list on the same screen. So user can easily tell what the chosen locations for this order are. 

Deep product hierarchy

Some of the big telecom bundles the TELUS is selling have very deep hierarchy, up to 5-6 layers. In order to make it easier for agents to talk through the offers with the customer, a better presentation of the product hierarchy is required in the UI. We have considered utilizing different UI patterns, icons, fonts and colors to show consistency across the information on the same level and difference across the information on different levels.

Installation appointment calendar

1. According to the information provided by the business, we have known agents  usually work with 1-week window when scheduling the installation activities with customers. Agents should be able to quickly scan the availabilities on the calendar and book the slots based on customer’s requests. And depending on the order item,  they can have many events (up to 10) need to be scheduled per order. In the design we horizontally layout the dates and vertically layout the events. In each cell only the bookable time slots are displayed as buttons. Different button states were used to differentiate the selected slots vs non selected ones. In the event list, user can configure/edit the work type, working hour and notes;

2. A summary view of appointments is displayed above the calendar. Once the appointments are confirmed, an additional row will populated under each event, from where agents can see the status and also cancel the appointment if something changed.

Responsive Design

The entire Order 2.0 screens were reviewed and all the screens/components/behavior which were not mobile friendly were documented and updated. The main responsiveness problems that we solved were: 

1. The 2-column layout of CPQ screen. Although this design provides convenience to agents to add products from catalog to shopping cart, it is not compatible with narrow screen.

Solution: Display the shopping cart on the primary screen and put the catalog in the slide-in secondary screen. The rationale is that agents are usually spending more time and effort to configure the products in the shopping cart. However they only need to see and work on the catalog when they need to add something else to the cart. 

ing cart in 2 tabs, because users usually are working with either catalog or cart at a time, and also it’s very easy to switch between 2 tabs. 

2. The Book Appointment screen was too “wide” since we had the event & details list and calendar layouted side by side.

Solution: Only display the event name and calendar on tablet screen. Event details can be brought up on a slide-in secondary screen.

Wireframing & Prototyping

Screen Flow

Select & Add new address

If new order being created includes existing address(s), agent can select the address(s) from the location list. If new order is needed for an address(s) that does not exist, agent can add the new address(s) to the location list manually. All the addresses selected/added will be displayed on the main screen.

Select Contact

Agent can select the contact of the new order being created from existing contact list, or add new contact manually.

Select & Configure

Agent can select and configure the offers being added to cart. Offers can be added to multiple addresses.

Credit & Contract

Agent can run credit check, select agreement, create new contract and amend an existing contract.

Book Appointment

Agent can book an appointment for the selected offers in the new order.

Billing & Shipping

Agent can select billing address(s) and shipping address(s) for the new order.

Order Summary

Agent can review the order and edit/configure the missing order details if needed.

User Testing

Testing cycles: 3

User: In total19 (7 participants in cycle 1, 7 participants in cycle 2 and 5 participants in cycle 3) participants

Mix of professional users and new users (7 months - 41 years with TELUS)

Testing Focus:

Cycle 1&2:  Overall workflow and mobile experience. 

Cycle 3: The optimized “Order Address” screen; New product with deep hierarchy configuration. 

Method: In-person and remote Moderated Usability Testing using design prototypes

Iterations & Presentations in/after the testing: After testing cycle 1, we iterated the prototype based on the commonly mentioned feedback across the board and presented the updated prototype to the testing users in cycle 2. After each cycle of testing, we generalized main findings and reflected in the prototypes and then presented to the project team. 

Key Findings

Things we’ve done good:

- Overall feedback from the majority of users was this it is easy to use and intuitive

- The majority of users think it will make their work more efficient

- Overall users told us that the instructional content and wording is clear

- The updated Address screen has become more straightforward especially to the new users.

As mentioned I have worked in lots of systems - this one seems user friendly - I liked it. I am excited for it to roll out when it is ready.

I think it will Absolutely (improve my efficiency)! Great idea not to have to call in and wait on the phone.

I am excited for the deployment and use system with the new upgrades!

Things we’ve could done better:

- Credit & Contract screen (built by the service partner) is not clear and straightforward enough to some of the users, and for some users it’s not a required step - it should be skippable in some scenarios

- The field & operations users will need a faster way to respond to small requests from customers, such as adding call display. They don’t want to go through the whole order process for small requests.

- Provide a way to remove a contact from the list (e.g. if they knew they were no longer with the company)

- 1-2 users noted that this could take time to learn for those that aren’t used to order set-up, working with contracts, etc.

Prototype Demo