B2C Responsive Web Design

Platform: Web | Team size: 2 designers, 1 PM, 1 Marketing manager, 3 Engineers

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.

Final Product

We met the goals of turning a static site into a responsive web design, including the brand updates and the redesign of the navbar. At the same time, we established a baseline for our redesign, which allows the product and marketing team to create A/B testing of new product offerings and customer acquisition opportunities.

We also saw a tremendous increase in engagement on the site. See graph below that compares engagement in our site during July thru December (before and after the launch of the redesign):