B2C Responsive Web Design

The goal of YP for Businesses was to turn a fixed width site into a responsive layout and take advantage of all the concepts behind responsive views for the content of the site. Brand updates were also part of the scope, including a redesign of the masthead.

Starting Point

User research was conducted in parallel as I explored layouts and information optimization for the small screen.

Content, Analysis, and Strategy

I worked with the Product Manager and Marketing Director in trying to identify core content, content strategy, as well as macro and micro conversions as KPIs. As far as Content Strategy, our analytics team identified the pages that had the most traffic and we modeled a strategy based on a projection of usage and content consumption.

Information Architecture:
Creating Base Templates

During the UI analysis, I identified core components that could be reused in different parts of the site and grouped them into possible templates that could be built in a modular/component approach.

Wireframes & Prototypes

I started with some initial wireframes to show the intention of the ideas for the responsive strategy. To clarify further, I decided to create an HTML prototype of the redesign. Luckily, we picked Bootstrap as a base framework for the content site, which allowed me to produce quick HTML and demonstrate the responsive strategy that I had in mind.

Cross-functional collaboration

I created detailed documentation stating the behavior of each component by breakpoint, which helped the development team to think about the components with these breakpoints in mind.