
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 gaining 75% page traffic and clicks in the first 48 hours of release. Improved AT&T's existing customer experience by shifting the 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

HOW DO WE GET CUSTOMERS TO MOVE FROM IN-PERSON STORE SERVICES TO ALL-ONLINE SERVICES?
EVERYTHING DONE 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.
![AdobeStock_483393596_Preview [Converted]-01.png](https://static.wixstatic.com/media/ad3ffb_eaa503c231bb464382a71c00c5e95f18~mv2.png/v1/fill/w_753,h_502,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/AdobeStock_483393596_Preview%20%5BConverted%5D-01.png)

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
It tells me an introduction of the page & what I am expecting in a brief visual presentation
I want to find services for wireless
I want to have a directory to internet services
How can I look at other plans or offers AT&T has?
Dedicated services on phones
Are there any information related to setting up my new device?
BUSINESS GOALS
To give a brief idea on the page intent
A quick guide to customers who would like to use wireless online services
A segue for customers to other resources
How can I look at other plans or offers AT&T has?
Dedicated services on phones
A segue to other services in AT&T page
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.