Scroll down for several examples of responsive design including comps and wireframes.
RWD redesign
AT&T began converting the legacy B2C website using a combination of a new design system and style guide created by our design standards team. Working with our design lead, I helped modify the primary B2C components that were created by a third party agency to meet accessibility and legal compliance. As a result of knowing the component library, I could recognize and translate legacy page content to the new responsive components without guidance from an information architect. 
Following our design system and style guides, I proposed wire frames 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). 
I was fortunate to have worked closely with the development team as the components were being developed, and also to have worked with a strong writer, Mireille Larkins, who demonstrated creative use of components during my first project. As a result, I was able to provide guidance for new teams on how to adapt to changing requirements and recognize potentially confusing development bugs. I also identified opportunities for developing component enhancements.
RWD .PDF wireframes
Examples of wires I created, converting legacy pages to RWD for Connected Car. For some reason, I then handed off the wires to an agency who required guidance to provide visual comps. (: /
I also created quick and dirty wires for iPhone upgrade pages, including ideas for component enhancements
RWD redesign: IRU Military Savings page
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. 
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.
Ultimately, our marketing partners would consistently change content and requirements several times during implementation, despite final wireframe and visual comp approval. We were able to adapt and reconfigure on the fly, collaborating with the development team, writers and content implementors in Adobe Experience Manager (AEM).   
Compare the legacy page and my initial rough wire with enhancements to the final layout and style of the final visual comps below. 
Final visual comps below. 
RWD: Go Plans
My first foray into RWD and marquee treatment as a visual designer. The page scrolled long and we were waiting for development of accordions to save the day. In this case, components were proposed by our content writer, Mireille Larkins, who also suggested using a product line up of icons as a more visual alternative to another dreary bulleted list. 
RWD: Site Map
Use of tabs with icons to break up the monotony. A highly-trafficked page, our team wanted to give it some love rather than just kick it down the street, so several sources were consulted for the taxonomy, and I provided the visual comps. 
RWD marquee examples
The responsive marquee designs call for transitioning color backgrounds or textures that can adapt across to the page across various device breakpoints. 
Back to Top