DO IT ONLINE

When the pandemic started, there was a sudden surge in the transition to online or work from home for industries that allow doing so. AT&T was no exception to this environment. As AT&T still holds on to the presence of services that require physical interaction, they wanted to make a dire change from an all-inclusive physical store experience to an online experience to better prepare for any future interruptions and create a digital-first experience.

ROLE

It was a massive undertaking as this was AT&T first attempt to make all their services in one page, without the use of chatbots or a live agent to help - the page would heavily rely on the User Experience and visuals for users to navigate. It was important that the page had everything the user needed to be done in the store, and can be done online with ease.

​

As the main UI designer for the project, I had to think about how I could translate the business needs and feed customers' requirement. My responsibility was to ensure the User Experience and Visual Flow would not be complicated as most of the customers are used to doing services in store rather than online. 

I worked closely with the Lead Art Director, Project Managers, Strategist, Content Strategist, Copywriter, Engineers and stakeholders to improve the transition to an online experience. 

METHODOLOGY

As the project was time sensitive, it was difficult to conduct user research. The stakeholders wanted to get the pages live for the customers as soon as possible. We had to look into our previous user research and the Web analytics from our existing online services to make data-informed design decision. Our previous research and the Web-data showed us the overall AT&T’s customer journey experience, pain-points of the user flow and what was important to the customers. I reached out to the data science team to understand better of the user journey. 

WEB ANALYTICS 

AT&T’s audience demographics are diverse, but the main bulk of audience came from the working class between the age of 25 to 55. As the nature of the project was to provide services, we looked at pages on the AT&T website that provided similar objective.

AT&T Homepage​

Using Icons & links

Using image banner

AT&T Prepaid

Using Icons as links

Using banner

According to the data, the number of unique page views indicated that there was a 86% constant page view, an average time of no more than 20 minutes average time on page, and 78% on desirable actions which are countable clicks. In order for us to drive customers into the ‘doitonline’ funnel, we had to make the infrastructure simple, It has to be very straightforward and easy to process. With our current information architecture on the homepage, we had to weigh a different aspects of the business needs without compromising the intent of the project.​

EASY ACCESS

The overall intent of the project was to get customers to acclimate to online usage to avoid any future physical disruption and also to make AT&T digital-first. However, how do we get customers who are used to the physical-store interaction and convince them that ‘do it online’ is an easy transaction? At the same time, how do we make simplified digital transactions visually?

​

It was important that the User Interface had to be simple at a glance. The intention is not to have users stay on the page for long because they find it hard to navigate, it was quicker, click & go. Since AT&T does have some online purchases that already existed, I had these as a reference for my iterations. I worked closely with the Content Strategist and Business Analyst to ensure that the page is aligned with the needs of the business.

Below are some iterations of the wireframes. 

ITERATION 1

ITERATION 2

ITERATION 3

QUICK, CLICK & GO

It was imperative that I do not introduce a component that is new and has never been used or tested at AT&T, this will create unfamiliar territory and break the user understanding of the page that exists for those who are familiar, and for those who are not familiar, it will be a similar transaction when they explore our other pages. I explored using icons as a main drive to the page, it is easy navigation and aligned to the main objective of the project.

USER JOURNEY

After much deliberation, the team has decided that it was best if we use simplistic components - icons with direct messaging to communicate to our customers. This rationale came about when we looked into our previous research and the data analytics showed us components with icons have more clicks compared to the others especially when customers are intending to seek help services. 

USER GOALS

BUSINESS GOALS

DO IT ONLINE PAGE

THE IMPACT

It was nail-biting moment for us when we launch the page, we did not know what to expect but hope for a positive outcome. The first 24 hours of release was slow but it gradually picked up as the hours went into the release. The data-analytics showed that there was a bigger demographic on adults 45 and above visiting the page, with more than 75% on average clicks and 10 minutes average time on page.

30%

INCREASE IN DEMOGRAPHICS

75%

AVERAGE CLICKS

10

MINUTES ON AVERAGE TIME