Art Direction

AT&T Responsive Design

Client: AT&T
Date: April 2016
Role: Project Lead & Art Director
Tools: PhotoShop, Illustrator, InDesign, Adobe Experience Manager
“As a stakeholder, our organization needs a faster more efficient method of delivering offers to customers without a complete redesign or the need for a new development effort for each initiative. We need a device agnostic website to serve all content.”

PROJECT SUMMARY

 

Background.

In 2015 AT&T decided to take the plunge into responsive design. In addition, the current site platform which launched in 2010, was not responsive and performing slow. To make up for the lack of responsive content, in 2012 we launched a separate mobile site. However, that created two sites to maintain which doubled the effort in updating and creating new content. Additionally, the methods & styles to design for the 2010 site were archaic by 2015.

Problem.

  • The current site launched in 2010, after a 3-year development process; so was outdated by launch due to HTML5 and CSS3 advancements.
  • Our mobile site only offered limited information/functionality for customers.
  • A true templating system was never implemented. The discovery phase of the responsive process revealed we had 1,500 page templates on the existing platform.
  • Project SLAs were too long – with two sites to maintain, project teams had to produce double the work: one solution for desktop, one for mobile.
  • Each initiative was designed using loose brand guidelines, not digital design standards. This left a lot of room for mis-interpretation and personal style resulting in a disjointed look.

Strategy.

  1. Update the platform to Adobe Experience Manager (AEM).
  2. Create a responsive website, with a mobile-first content approach.
  3. Move away from page templates and create a modular design system so pages could be built/updated by content implementors and released daily, instead of by developers and released on a project schedule. 
  4. Most SLAs would reduce since there was only one site to design.
  5. Utilize the newly emerged Digital Standards team to ensure design, code, copy and accessibility requirements were built uniformly.  

My Role.

I was asked to oversee the creative efforts to redesign and "responsify" the upper funnel pages of att.com. This was 12-15 pages, plus up to 3 versions of each for regional and authenticated-user specific content. The project was underway when I was assigned the initiative. Some of my tasks included:

  • PROJECT LEAD. I coordinated the efforts of our external design agency, UX research, content implementors, development team, and copy strategists.

  • RESOURCE MANAGEMENT & MENTORSHIP. The initial design was heavily dictated by an external design agency. I wanted to give our internal talent, who’d be sustaining this work, an opportunity to grow their responsive design skills. So I pulled designers to ensure they were getting acclimated to the responsive design process we were creating before deadline and metric dependent work assignments were handed out.

  • GARNER TRUST. I worked with stakeholders to gather their content and functional requirements for a redesign. We started lean, so some of the requested functionality would be placed in a backlog. I made myself available to attend regular Q&A sessions with stakeholders to alleviate their concerns.

  • PROCESS CREATION. I created a workflow with input from the the development and content implementation team, to create a feature request intake process. This allowed product owners to request new pages, content updates, or functionality enhancements starting in Phase 2.

    As part of this process, I created an intake form to track requests.
    See the intake form here 

    Requests were submitted to me or my producer. Once vetted, I'd assign an IA to provide an analysis or solution.
    See Apple landing page analysis 

  • PROCESS DOCUMENTATION. I designed our module “bible” which contained detailed information on each module at each breakpoint.

    See excerpt of the guideline documentation  

  • QUALITY ASSURANCE. I performed Visual QA on each component to ensure each component was coded to spec, at each breakpoint on Chrome, Firefox Safari, and Internet Explorer.


  • TRAINING & SUPPORT. From March - November 2016, I held multiple training sessions to ensure the standards team, design teams, content implementors, and copywriters knew where to access the files, documentation.
         

RESULTS

 

The AEM Multi-screen redesign launched in April 2016.

I oversaw the creation of 99 module templates across 3 breakpoints, which replaced the previous 1500 templates.

Product Owners were no longer restricted to template-based pages. A section of a page could be updated through the daily release process instead of a full development effort.

I created a repository for assets available to all disciplines and external vendors.

I helped promote and encourage collaboration with the newly established standards team by following and referencing their guidelines.