RWD redesign: Overview
Role: Visual designer & information architect
Background: AT&T was late to the responsive website game, and the new process for creating and implementing our design system required organization and communication.
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, tweaking the final component library to meet accessibility, compliance, and legal standards and with dev teams to establish breakpoints and custom workflows in AEM.
I then began wireframing and converting several legacy B2C pages using our new responsive design system and style guide.
Approach: Having learned the new upper funnel components of the new design system, I was the first designer to wireframe and update legacy content to responsive designs.
I proposed wireframes and created visual comps to redesign 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 guided and collaborated with content designers and business partners to identify the best components to reduce page scrolling and make content more consumable.
Outcomes: Besides redesigning several legacy pages, I began creating documentation and providing guidance for new teams starting RWD. I identified opportunities for developing component enhancements and formed relationships with key developers, writers, content implementation, CMS environment managers, and business partners. I also collaborated with business partners on A/B testing.
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.
