854556-hero-dsk-wireless_whybuyonline-retina.jpg

DO IT ONLINE

Accountable for the design and user experience for AT&T Do It Online page, its first all-inclusive service from the store to online in the United States. It resulted in an increase in online adoption of AT&T services by 18%. Improved AT&T's existing customer experience by shifting its traditional physical store presence to an all-inclusive online user journey and visual design presence. 

Role

UX/UI Designer

Project Type

Webpage

 

Technology

Sketch

Collaborators

Lead Art Director,

Copywriter, Business Analyst, Strategist

Artboard 1.png

THE PROBLEM

The long lines in-store during peak hours cause frustration to customers. At the same time, these customers find it difficult to navigate through pages on the AT&T website for the services they need. 

DISCOVER

AT&T, like any other telecommunication provider, provides physical in-store services such as payment, product purchases, and general customer help services. According to data research, there are at least 37% of customers visit the physical store for customer services. This causes long lines in-store during peak hours. AT&T would like to provide an easier digital platform for customers seeking services. 

HOW DO WE GET CUSTOMERS TO TRANSITION FROM IN-PERSON STORE SERVICES TO ALL-ONLINE SERVICES?

105916287-1557987865515gettyimages-970432404.jpeg

WHY IS THIS IMPORTANT TO AT&T?

There are a few pointers that make this important for AT&T. First, there is less reliance on physical stores, which means lesser waiting times for customers, and lesser delay operations for services that can be done online. There will be an increase in online page visits which will help with the business and overall, it will enhance the digital experience for the customers. 

THE GOAL

Transition and enhance the ease of use to online customer service from physical stores while addressing the pain points of customers.

Learning to use smartphone

METHODOLOGY

To have a deeper understanding of the pain points, I worked together with 2 other UX designers and did research and design. The following are our processes.

methodology.jpg

RESEARCH &
DISCOVERY

DEFINE &
SCOPE

DEVELOP &
DESIGN

PROTOTYPE &
TESTING

RESEARCH & DISCOVERY

We did preliminary research to understand AT&T customers better and did an online survey with in-store customers. We analyzed the common user journey of these customers and synthesized insights.

28_excel-01.png

Prefer in store services

Interact with products

Staff product knowledge

Interact with staff

Difficulty navigating online

Staff inventory knowledge 

Even as Millennials and Gen Z account for a growing number of consumers, the preference for in-store customer service experiences remains strong with all age groups. A majority of consumers (57%) generally prefer to seek services in physical stores as opposed to online. 

The vast majority of consumers (85%) say the opportunity to interact with representative and physical products are among their top three reasons for being in-store versus online.

76% find it difficult to navigate online for the service they want.

Nearly half of consumers (46%) noted that the ability to deal with personnel directly is among their top-three reasons for being in physical stores. The research found that most consumers consider product knowledge (65%) and inventory knowledge (61%) among their top three most important qualities when dealing with in-store personnel.

WEB ANALYTICS

We looked at the heatmap data of the current AT&T pages that render online services as a reference. Based on the data, we synthesize that there is a consistent percentage of click-throughs for services. However, these are customers who regularly use online services. 

att_page.jpg
prepaid.jpg

USER PERSONA

To ensure we address the needs of AT&T customers, we derived 2 primary users from research and outlined their requirements.

Artist in Workshop

Sarah Newman, 32

Artist in residence and a mother of two. Good with time management and tech savvy.

Wants

  • To have all the services on a page and easily accessible

  • To be able to do any services while on the go, webpage must be mobile friendly

Key Insights (Inferred from user interviews)

  • Likes to multi-task and do things on the go

  • Dislike when she can't find a service online easily

Image by Bryan Pulgar

Paul Tan, 55

Entrepreneur. A people person who enjoys the presence of people around him. 

Wants

  • To have reliable services, especially if he is busy, but would need to speak to a person

  • To be given an option he could choose whether online or in-person

Key Insights (Inferred from user interviews)

  • Would prefer to have a balance of personal services versus just doing it online

  • Would need services to be rendered easily

USER FLOW

We worked closely with stakeholders and strategists to create a holistic experience that would benefit both the customers and AT&T business. 

user flow-01.png

DEVELOP & DESIGN

Based on the user flow and research. I created some wireframe variations for the do-it-online page, keeping in mind the business needs and customers' pain points. 

Initial sketches

wireframe-01.png
wireframe-03.png
wireframe-02.png

During this process, the strategists and business analysts insisted to showcase business opportunities for example, advertising wireless plans or new products. However, stakeholders would prefer the page simple, with less real estate. 

Iteration 1

Iteration 2

Iteration 3

2.jpg
1.jpg
3.jpg

The iterations adopted the use of icons for easy visual reference when a customer visits the page. However, the placement of each component to advertise business opportunities has proven to be a distraction and derailed from the intent of the page and we decided to remove it and focus only services.

DEVELOP & DESIGN

The iconography is the main visual representation of each service rendered online. The visual cues are similar to the main pages for AT&T, giving a consistent and familiar user experience. The stakeholders have requested that the 'Track and set up new phone' component are important but should not take dominance on top of the funnel. The AT&T blue was used to highlight the component while the rest of the components remained neutral with the essence of AT&T blue on the icons. There were some non-existing icons  that are suitable for the service, these are some of the icons I designed.

icons.png

Icons

AdobeStock_483393596_Preview [Converted]-01.png
ezgif.com-gif-maker.gif

Desktop

911381_wireless.jpg
911381_Wireless_Mobile.jpg
911381_Wireless_Mobile.jpg

Mobile

clayphone_iphonex.png
911381_Wireless_Mobile.jpg
clayphone_iphonex.png
911381_Internet_Mobile.jpg

PROTOTYPE, TEST & RESULTS

We did remote usability testing and users were delighted with the easy navigation to find service they need in one page without the hassle of exploring other pages. 

"I liked the walkthrough of it, it seemed intuitive to go from one task to the next.”

- User tester

"I would not imagine how easy it was for me to do this online, I saved a lot of time”

- User tester

"The icons helped a lot when I was on the page, I like that it is not too much of scrolling too”

- User tester

THE IMPACT

There was an increase in online adoption by 18% within the first month and services in the physical stores have reduced gradually. There are 60% page visits with a 2-minute average time while navigating. 

18%

2

INCREASE IN ONLINE ADOPTION

MINUTES ON AVERAGE
TIME NAVIGATING

WHAT DID WE LEARN?

Regardless of age, there will still be a demand for in-store services, but how we alter and convince users to transit doing online services makes the difference. If there was time, we would speak to the ground staff to have clarity on their pain points. We would also do more testing and refine other aspects of the user interaction such as adding Quetips on each icon to give a little information before the user navigates further. Possibly ideate more.

LIVE SITE

You may visit the live site and observe from the link here; https://www.att.com/online/wireless/

MORE WORKS

To play, press and hold the enter key. To stop, release the enter key.

Ridwan Madon © Copyright 2009-2022. All Rights Reserved.