RWD redesign: Overview
Role: Visual designer & information architect
Background: AT&T began converting the legacy B2C website using our new responsive design system and style guide created by our design standards team.
Approach: Learned and modified upper funnel B2C components created by a third-party agency to meet accessibility, legal & compliance standards.
Proposed wireframes and created visual comps for redesign of several legacy pages, then began working collaboratively with the marketing partners, development team, writers and content implementors to build out the pages using responsive components via Adobe Experience Manager (AEM).
Outcome: In addition to redesigning several legacy pages, I began creating documentation and providing guidance for new teams starting RWD. I also identified opportunities for developing component enhancements and formed relationships with key developers, writers, content implementation, CMS environment managers, & business partners
RWD: Go Plans
Role: Visual designer & information architect collaborator
Background: An early foray into RWD collaborating with our content writer. The page scrolled long and the development of accordions saved the day.
Results: The process created an opportunity for learning how to use components creatively and flexibly.
RWD wireframes: Connected Car
Role: Information architect, visual design guidance.
Background: Examples of wires I created, converting legacy pages to RWD for Connected Car.
RWD redesign: IRU Military Savings page
Role: Visual designer & information architect
Background: IRU customers are employees of companies who have relationships with AT&T. IRU pages were some of the first responsive redesigns of legacy pages, and were highly visible to C-level leadership.
Approach: I initially created rough wires for seven IRU partner pages, including component enhancements, which I later refined using a cleaner wire library, then created final visual comps.
Challenges: Our marketing partners changed content and requirements several times during implementation, despite final wireframe and visual comp approval.
Results: We could adapt and reconfigure on the fly, collaborating across dev, content writers, and content implementors in Adobe Experience Manager (AEM).
Below: Final visual comps
Below: Legacy page (left) and my initial rough wireframes with enhancements to the final layout.
RWD marquee examples
Role: Visual designer
Background: Responsive marquee designs call for creative transitioning using color backgrounds or textures that can adapt to the page across various device breakpoints.
