RWD redesign: Overview
Role: Visual designer & information architect
Background: AT&T began the process of 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 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).
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.
Examples below:
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 consistently changed content and requirements several times during implementation, despite final wireframe and visual comp approval.
Results: We were able to adapt and reconfigure on the fly, collaborating across dev, content writers, and content implementors in Adobe Experience Manager (AEM).
Below: Final visual comps
Below: Compare the legacy page (Left) and my initial rough wire with enhancements to the final layout and style of the final visual comps below.
RWD wireframes: Connected Car
Role: Information architect, visual design guidance.
Background: 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: Go Plans
Role: Visual designer & information architect collaborator
Background: 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. She also created excellent, clear content requirement documents which, much to my delight, were eventually distributed across the writer teams to standardize communications.
Results: As I mentioned in the page intro, I credit Mireille with setting a good example of how to use components in a creative and flexible way.
RWD: Site Map
Role: Visual designer & information architect collaborator
Challenge: Redesign our site map, a highly-trafficked page. Our team wanted to give it some love rather than just kick it down the street.
Approach: I requested that we gather additional data to establish weights for the links, so several sources were consulted for the taxonomy, and I provided the visual comps. We used tabs with icons to break up the monotony.
RWD marquee examples
Role: Visual designer
Background: Responsive marquee designs call for creative transitioning using color backgrounds or textures that can adapt across to the page across various device breakpoints.
