Product vision:

The original customer service application
The original customer service application

Clients and partners will support their own call centers using Shopatron API’s and the Customer Care interface. With Customer Care, customer service representatives from any affiliated organization can search, view, and modify order data and consumer information within the Shopatron ecosystem. Orders will be retrieved from multiple sources (API, FTP, eCommerce, mobile point of sale, telephone order) and changes made to order data through Customer Care will be communicated immediately to connected systems. Users will easily identify the order status, health, and delivery progress of any order, and the user interface will guide call agents through common resolution workflows.

Business goals:

  • Reduce the average length of customer service calls
  • Reduce the average number of calls needed to resolve a customer service issue
  • Improve the ability of call center representatives to predict customer needs during a call
  • Create a scalable, cloud-based, API-driven customer service application that can be sold as an add-on module to clients and partners

What problem does this product solve?

Customer Care meets the need for scalable order support by replacing a legacy direct-to-database, internal-only customer support application with a cloud-based, API-driven user interface.

Customer service representative workflow diagram

How did I contribute?

  • user research
  • design project management
  • interaction diagram / workflow chart
  • wireframe
  • prototype
  • usability test
  • visual design
  • design quality assurance

After receiving a product requirements document, I grabbed a headset and moved my workstation into the Shopatron call center. I spent two weeks conducting ethnographic research, listening to customer support calls and observing service representatives. I noticed the agents experiencing fatigue and job dissatisfaction because of a poorly-designed interface with unusual UI patterns and unpredictable interactions. I documented their workflows, behavior patterns, and the ways call agents used hacks and workarounds to bypass a broken system. As I created interaction diagrams and workflow charts, the need for a total UI overhaul became clear as day.

By sketching the customer detail view, I was able to quickly identify all of the order modification actions.
An early sketch of the order detail screen

I presented my findings to the product manager and VP of Product, then received approval to expand the scope of the project to include a user interface redesign that would focus on the three user-centered business goals. Next, I hosted a design workshop with two customer service agents, the lead front-end developer, and the product manager. Then I created an interactive prototype using UxPin, and designed a series of usability tests based on the same tasks I’d previously observed in the call agent workflows. I gave the usability tests to 15 participants and adjusted the prototype until the tests had an 80% pass rate.

To facilitate handoff to front-end development, I created a JIRA epic, breakout task tickets, and hosted a kickoff meeting with relevant engineers present. I joined regular scrum meetings and assisted with sprint planning. Additionally, I assisted the quality assurance engineers with visual and interaction design QA. Finally, I designed a product measurement plan using Google Analytics and call center issue tracking logs.



A wireframe for the order detail screen
A wireframe for the order detail screen

Google Analytics snapshot

  • Customer Care supports hundreds of users each month. 90% are located in the United States, with an additional 5% in Great Britain and 5% in Canada.
  • Within the past month, nearly 5,000 unique order modification actions have been taken:
    • Customer service representatives added notes to orders over 2,200 times (19% of all actions)
    • 1,200+ open returns were viewed (10%) and 900+ returns were created (5%). 30 returns were processed through the call center rather than the return warehouse.
    • 500~ shipments were canceled (4.5% of all call center actions).
    • Phone agents manually reassigned orders to fulfillment locations 150 times.
In summary, Customer Care is mostly used by North Americans to cancel shipments, create and process returns, and reassign orders among fulfillment locations. They generally leave a note after providing order support. As a product designer, I can use this information to save money for the call center by optimizing return, cancellation, and reassignment workflows. I can save time for CSRs by designing better activity logging so they don’t need to summarize actions taken on an order.

Version 1:

The first version of the product met two of the four business goals:

  • Improve the ability of call center representatives to predict customer needs during a call
    • My new design uses a system of notifications and feedback messages. Agents no longer need to ask, “How may I help you today?” because common problems like payment error, late shipment, suspected fraud, and backordered items are clarified as soon as a call agent loads an order.
    • Customer service reps interacted with 98 alerts like these last month. Clicking an alert retrieves detailed information for the user to browse and take action on.
    • The Customer Care UI delivered 2,800+ feedback messages to users last month. Most of these were success messages, indicating a healthy system in which users are able to accomplish tasks and complete workflows.
    • The most frequently occuring feedback message indicates that returns of a single item were successfully created over 500 times. Since a total of 900 returns were created last month, I should ensure the create return workflow is optimized for single-item sendbacks as they make up more than half of all new return requests.
  • Create a scalable, cloud-based, API-driven customer service application that can be sold as an add-on module to clients and partners
    • Customer Care is used in several client and partner call centers, in addition to the Shopatron in-house customer service team.
    • The availability of the Customer Care module has driven over $2m in new sales as larger retailers often operate their own in-house order support centers.

Version 1 Customer Care user interface

I found the other two business goals much harder to measure. Self-reporting and anecdotal evidence from the customer service representatives indicate there is a perception that the average number of calls needed to resolve a customer service issue has been reduced, but this not a true measurement since this data was not tracked prior to the Customer Care project. Additionally, reduction in call length cannot be compared with a before-and-after.

Version 2.0 was launched in 2014, and subsequent releases have introduced new features, performance improvements, and usability enhancements. Version 3.0 was released in November 2015 and all users were automatically upgraded. Version 3.1 will be released in October 2016 and adds support for international users, currencies, and additional payment gateways.

Want to know more about Customer Care? Read about the effort to rebrand it and many other user interfaces when Shopatron merged with Marketlive and Fiverun to form Kibo Software, Inc.

Customer Care