CUSTOMER TOUCH UX: CTUX!Customer & User Experience Design Approach – V1.4

What we propose and why

With the goal of enhanced customer experiences and engagement in mind, we envisioned empowering employees with quickly intelligible and actionable customer data. With this information in-hand, newly empowered and guided RSRs can assist customers more efficiently and accurately.

Making data clear, actionable, and custom, both co-workers and customers win.

UX Perspective

Our opportunity We can enhance the the customer experience by providing a tool to surface relevant and insightful recommendations and content to business employees. By harnessing insightful data and using trusted user experience principles to create digital paths toward achieving the best outcomes for both the customer and the business.

We aim to Enable a quick understanding of the “customer snapshot” for quick response to – if not anticipation of – questions, guidance, and customer satisfaction Create a unique and special experience for individual customers by tailoring customer service, offers, deals, and communications to their specific needs Tap the power of our data – provide employees with relevant, detailed data-visualizations, enabling quick comprehension and clear path-to-action.

Call Center Customer Service Representative

Miriam 28, Call Center, Seattle

“I not only solve customer problems, needs, and questions, I also want to have people really like T-Mobile.”

DAILY  TASKS    •  Takes  calls  from  customers  from  a  

Central  Call  Center  with  others  in  the  same  role  

•  Provide  relevant  offers,  promo:ons,  and  direc:on  toward  appropriate  services  and  products  

•  Forward  customer  inquiries  to  relevant  experts  to  resolve  par:cular  customer  concerns  

NEEDS    •  Easy  way  to  communicate  needs  and  

get  the  best  result  

•  Guidance  to  relevant  services  and  products  that  may  enhance  their  business  experience  

•  Easy  access  to  knowledge  about  customer  history,  service  data,  and  relevant  informa:on,  empowering  best  service  and  needs  met  quickly  

Exis/ng  Customer  

Chris 38, Seattle WA

“I am happy with my plans but I’d love to get a new phone if there’s a good offer or deal.”

DAILY  TASKS    •  Uses  phone  oDen  during  the  day  

for  conference  calls  up  to  an  hour.    

•  Some  interna:onal  calling  

•  Lots  of  text  and  data  through  tex:ng  and  sending  photographs  when  traveling  

•  Considerable  data  use  through  streaming  on  a  second  device  (an  iPad)  

Scenario: Change a plan

2 Info o Review

<u'St():'(JN Dashbo.lrd RecOOimtndauons

1 Getting Started Home Dashboard

(u~omel Engagement

3 Choose & Buy R~com~a~IOI"li

Related products & Sef\'iC~S

A differentiated expenence to tailored products and servrces

/ Close the <a , tavc noces.

follow upw1th ~all

Us1ng va'IOus conduitS to re evant cata, our approach to uX agg•egates these sou•ces 1nto

nt1u1t1ve user '"'terfaces and data v1suahzat~ons. Comb ned w;h custem·ta lored orocun anc serV>ce recommenda:>ons, T-'vlcol e CS~s are aole to g.-ide CLstomc•s 11ore accurately and effiCient~' to :he bes• 11t fo• thc1r ntcnt.

Dashboard  Elements  

New  &  Recommenda/ons  Sidebar  

General  Dashboard  &  Customer  Profile  Page  Structures  Compared  

Data  visualiza/on  Detail  (Large)  View  (in  landscape,  by  default)  

CSR / Web Home Dashboard

CSR / Web Customer Overview

RSR / Touch Home Dashboard & Customer Overview

RSR / Touch Customer Overview and Customer History Detail Views

Style guidelines!CTUX

How to use color

Magenta used for primary actionable items #fff used for content section backgrounds #f1f1f2 background #ccc content border and dividing lines Light grey used for unavailable items Dark grey for secondary actionable items

Note: to reduce the number of fonts used, fonts can be approximated using font-weight CSS styles.

Typography

Our default stack for web-fonts should degrade gracefully to accommodate the T-Mobile brand as well as device defaults and standards.

Tele-Grotesk Nor Tele-Grotesk Hal Tele-Grotesk Fet Tele-Grotesk Ultra

Helvetica Neue Light Helvetica Neue Regular Helvetica Neue Medium!Helvetica Neue Bold

Helvetica Light!Helvetica RegularHelveticaHelvetica Bold

Arial Arial Bold

Architecture Frameworks

Technology Frameworks Foundation Responsive framework for multi-channel experiences http://foundation.zurb.com

Handlebars js for the generation of information architecture and interaction templates http://handlebarsjs.com/ jQuery Standard interactions http://jqueryui.com/

Grid architecture Utilize Responsive 12-Column Grid structure accomodating: Web Browser layout up to 1200px wide iPad iPad Mini Secondary form factors to consider: Mobile (iOS & Android) Android Tablets Large-Screen displays such as televisions

THANK YOU!We appreciate your time & attention