Project Goals and Objectives

The purpose of the project was to completely redesign the entire AT&T Shop U-Verse experience, from Check Availability all the way to Purchase Confirmation. With the current experience, the drop-off rate was very high, and customers would turn to calling Customer Service to ask questions and make their purchases. There were too many pain points with the digital experience that needed to be addressed.

Our goal was to empathize with the user to make the new experience more clear, intuitive, user-friendly, and enjoyable, which would lead to higher conversion rate online by customers, and less calls to the call center.

Current Experience Usability Study

AT&T's Usability team members reviewed the current experience to identify any pain points in the user experience, such as the design features that could cause user error, inefficiency, or low satisfaction.

I condensed some of the high priority feedback found:

• No clear connection between the pre-configured bundle a user could choose on one page versus another;
• Several calls to action on the hub (landing) page
• No clear visual hierarchy or identified next steps to help the customer proceed
• Lack of bundle name and price recognition from one page to the next (inconsistent price calls)
• No clear visual attention to let the user know he has chosen a pre-configured bundle
• No understanding of what to do first on hub page due to lack of steps and hierarchy to Call to Actions
• Disconnects between bundle selections and Other Options
• It is unclear what is required and what is optional.
• Lack of distinct association between elements.
• Inconsistencies with language and unclear usage of language
  

Digging Right In

With the feedback given, I came up with some recommendations. In addition to some of the obvious solutions to include in my designs, it was important that the new experience have clear information architecture and visual hierarchy. Also, providing consistent names and pricing across experience and distinct visual cues for feedback was a must.  Lastly, I came up the assumption that incorporating a step-model wizard approach would solve much of the experience's problems.

I also wanted some inspiration, so, I started looking around another digital experiences from competitor's sites, as well as some ideas for step-models and wizards.

In addition to the usability study feedback and my recommendations, I was also given spreadsheets and documents for User Stories, Feature Sets & Epics, and Wireless Bundles and Plan Details. These assisted in the wireframes and interaction designs I created. I worked directly with the stakeholder and Business Analyst on AT&T, and the User Flow document would get updated based on the wireframes and any changes made to the scope of the project. Below are examples of each of the documents.

Wireframes & Concepts

I created my wireframes using Microsoft Visio. These reflected the feedback, my recommendations, and user stories provided. My wireframe deliverables contained many annotated side-interactions. Click here for the deck to my earlier iteration of wireframes. Below are also some still shots of a couple of my screens.

Another concept I came up with was a “Quiz model”, by answering a few questions, a plan/package would be suggested as a perfect fit.  I had two ideas for this and built them each as interactive prototypes in Axure. Here is the initial concept, which was really brief and simple. The second concept was more in-depth. You can click on "Show Hotspots" in the top-right menu bar (the three dots) for each of these prototypes.

Wireframe Updates

Iterations on my wireframes were continuously made. I would make updates on my designs and submit for feedback from the lead and UX Manager (varying given the time of the project). During the majority of the project, the UX Manager in Atlanta would review my designs and provide feedback using markups.

Again, some further iterated wireframes based on feedback.

Higher-Fidelity Designs

With a few months of feedback and iterations on my designs, this is where it last ended before User Testing and before Visual Design. These are Mid-to-High-Fidelity Designs.

Usability Testing

Stakeholders from AT&T and Usability Team from Critical Mass in Canada conducted a Usability test on the designs for new experience. While I was tasked with building the prototype, I wasn’t actually part of the test sessions, nor was I given any feedback, unfortunately. The most I heard was that it tested extremely well. I then moved to another project. That's consultant life! Again, if you'd like to view the prototype, you may opt to Show Hotspots in the top-right corner menu.

‍

Where it Landed

Visual Design was implemented on the wires and eventually launched to AT&T's Shop U-verse website shortly after.

Results & Outcomes

The site was launched shortly after the usability test on my wireframes was conducted, and after Visual Design was completed. It eventually changed to DirecTV.

I won an award for best re-design at my agency because of the outcome the new experience resulted in, which was 30% more online conversions/purchases, and just as much in decrease of calls to the call-center.  Our goals were met!

Challenges Encountered

Just with any other projects, I was faced with some challenges. First, with everyone being in a different state and/or country other than myself for the majority of the project; sometimes communication was lacking and delayed. I love leading a project, but being apart from everyone had its difficult moments.

Also, when I built the prototype for the Usability Testing, I had to create a lot of the different "states." There was no Sketch, Figma, or Adobe XD at the time, and I had no access to Photoshop or Illustrator as an Experience Architect role. So, I had to split and crop images in Axure, and had to create separate elements to make the prototype fully functional and smooth. It took a lot of extra time and was not efficient.

Lastly, I had to use Microsoft Visio to create my wireframes. Visio is not Mac Compatible, soI had to use a virtual machine/computer and use it from there. Sometimes, this would shut down and my work would not be saved.