Designing a new call center
Designing for Enterprise.
Redesigning Starwood's customer support portal, one sprint at a time.
FRAMING THE CHALLENGE
Redesigning an enterprise-level customer support dashboard.
While working as a Visual Designer at Mad*Pow, I Ied the redesign of Starwood Hotel's internal call center dashboard. The original design, which had been created over 10 years earlier by Mad*Pow's CEO, was beginning to feel a little antiquated and deserved a refresh. The complexities of the system felt overwhelming to a new generation of call center employees, mostly comprised of millennials, and the underlying codebase required more upkeep than the value it provided. It was time for a change.
The original dashboard was made up of several modular panels, each representing an action that a representative might take during a booking. Call controls, account management, important notes, and internal messaging created a shell around the core features of the platform. The app had been created to run on tiny screen sizes, but not to make use of the real estate available on modern viewports. Immediately, we knew that we had an incredible opportunity to create a more immersive platform.
THE ORIGINAL APPLICATION. NOT PRETTY, BUT INCREDIBLY WELL PLANNED.
CONCEPTING BLUE SKIES
Defining the vision.
Leading up to the project kickoff, the Louisville office's Creative Director, David Thomas and I spent a week creating moonshot ideas for the application's evolution. We began by writing all of the current application's features on whiteboards (we literally filled up a small room), then began translating those into design explorations.
Note: David Thomas is an amazing designer and ridiculously talented Creative Director. We spent roughly a month working together on this project before I was given the opportunity to take full responsibility for it. In the interest of transparency, unless otherwise noted, I created everything you'll see here.
Immediately, we knew that we wanted to create a clear separation between the side of the application that the employee uses for herself, and the side that she uses for clients. Within her dashboard, she might find reporting and stats on her performance, important messages from her managers, and her schedule. For security and productivity, all of this needed to play second fiddle to the customer's needs.
As people who have called into call centers before, we knew that wait times, predefined scripts, and redundant questions ruin potentially friendly conversations. Our goal was to create a structure that really put the caller in charge.
What We Knew :
It had to be easy for this application to put the ownership of the conversation in the caller's hands. The caller should not be locked into the scripted flow of the dashboard.
Employee's reviews are based almost exclusively on call time and upsells, so the platform needed to be fast.
The app must be accessible to power users who prefer to use the keyboard over the mouse.
The product updates were set to roll out in stages over the course of several years. All components of the application had to be built modularly. They needed to be able to expand on the current platform without interrupting call time or employee productivity.
My first pass at the designs swung to the far end of the aesthetic spectrum. After a day or so, I took a step back to laugh at myself for indulging such insane Minority Report-ishness. But in my madness, I had actually stumbled across a couple pretty interesting ideas. At some point, I became attached to creating large tiles on the dashboard that represented common actions, such as searching for a guest or starting a new reservation. I also loved the concept of showing the expected weather of the caller's destination. This would allow the call center employee to make her script more relational, and possibly even offer interesting upgrades.
THE SHOW STOPPERS
Two ideas that set the stage for the rest of the project.
Although David and I came up with tons of interesting ideas during this moonshot phase, two really held our attention. Three weeks later in Stanford, CT. when we presented these ideas in the form of wireframes to Starwood's executive team, these two ideas set the direction for the rest of the project.
The Reservation Cart
At the office late one night, David jokingly said that booking travel should be as easy as buying food at the grocery. We locked up and went our separate ways, but the concept stuck with us. Over the next week, we iterated on the concept of decoupling each step of the reservation process, allowing it to become more of a Choose Your Own Adventure process instead of the industry standard step-by-step monotony. This allowed the call center employee to easily adapt to the conversation.
The SPG Panel
We knew that the majority of Starwood's callers were SPG (Starwood Preferred Guest) members and that they usually just wanted to change reservations, edit reservations, or check on their points balance. When calling in, members can identify themselves by their membership numbers to get faster and more accurate service. I proposed creating a persistent SPG Member Panel that could capture and showcase all of a caller's important information, from their reservation history to member status, birthdate, and beyond.
David and I turned our ideas into complete wireframes and created a prototype using Marvel. Our initial wireframes included a lot of complex but unique interactive explorations, including a card-based UI for past stays. After much discussion, this ended up in the graveyard, along with a host of other interesting but ill-fitting ideas.
THE DESIGN PHASE
Designing the core functionality.
Ideating the core functions of the application and getting sign off on the wireframes felt like a whirlwind, so we were all excited to settle into a more regular two-week sprint timeline. For the first year of the implementation, I was tasked with overseeing the design of the app's dashboard, which we coined as the "Call Panel," and the design and UX for the SPG Panel. While Starwood worked with the dev team to build the foundation for the new product, I introduced some colorful touches to our Call Panel.
At the time, over 900 Starwood Call Center employees used this tool on a daily basis, so it was important that this redesign felt cheerful and bright. Starwood has beautiful offices and an amazing company culture, and I wanted to design this tool in a way that seemed to support that underlying message.
THE COLORFUL NEW NAVIGATION
Designing the SPG Panel.
The dashboard was easy to design. There weren't a lot of unforeseen issues or complications in the Call Panel, and the executive team had no plans for developing it for at least another 12 months. Overhauling the entire call center application was a multi-million dollar commitment that was spread out over the span of five years.
We decided to implement the SPG panel first, pairing it with the pre-existing application. Thirty Jira stories, sixty-two iterations, and nineteen user testing session later, we settled on a complete UI and integration for the panel.
The Call Centers had two screen sizes. One left absolutely no room for the SPG Panel, while the other had half the screen available. We designed the panel to be dynamically visible. When the IVR (that weird system where you talk to the robot on the other end of the phone, in Starwood's case, to share your SPG number) matches with a user account, the panel is displayed. The employee may then hide it, if she desires. On the larger screens, the panel is always visible.
Here's what the panel looked like when overlaid on the preexisting design.
We used a card-based UI to showcase important alerts, property information, and reservation details. The cards used color as a wayfinder for status indicators, and could even be branded to sync up with specific Starwood properties. This allows the employee to gain a deep awareness of the caller's needs at a glance...literally.
ACCOUNT STATUSES WERE MARKED BY COLOR AND TREATMENT
HOTEL CARDS COULD BE CUSTOMIZED WITH THE BRAND'S COLORS AND LOGOS
IF A PROPERTY IS NO LONGER A PART OF THE STARWOOD BRAND, THE CARD WAS GIVEN SPECIAL VISUAL TREATMENT.
TESTING NOTES AND CLOSING
99% more efficient.
After nearly a year of design and development, we launched the SPG Panel beta to a test group of 300 employees. To our shock and excitement, 99% stated that it provided "a marked improvement in productivity." The remaining 1% noted that they had no feelings whatsoever about the new tool. Out of 300 employees, we did not receive one negative review. Wow!
Two months later, I reached out to the Product Owner at Starwood to see how the rollout was going. She excitedly told me that her team had reported that calls were shortened by up to three seconds, thanks to the SPG panel!
Not a month after I spoke with her, Starwood hired a new CFO. His first act was to slash funding on the development of internal tools, forcing our expansion to grind to an immediate halt. It was sad to see such an incredible project end so suddenly. The SPG panel rolled out to all 900 call center employees to great success. This year-long commitment to redesigning an enterprise-level application taught me a lot about designing micro-interactions and paying attention to the product's details. Since then, I've replicated steps from this research-driven process to redesign tools for HUMANA, Aetna, Fidelity, Disney, and more.