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.
User research was conducted in parallel as I explored layouts and information optimization for the small screen.
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.
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.
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.
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.
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):