RWD redesign: Overview
Role: Visual designer & information architect
Background: AT&T hired a third-party agency to create the first round of B2C components that formed the foundation of our new RWD design system.
I worked closely with our design lead and dev teams to establish the final component library, revising each component to meet accessibility, legal & compliance standards and establishing breakpoints and custom workflows in AEM.
I then began converting several legacy B2C pages using our new responsive design system and style guide created by our design standards team.
Approach: Having learned the components of the new design system, I was the first designer to update and modify legacy pages with the new upper funnel components.
I 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).
Outcomes: 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.
