Case Study

New templating framework enforces consistency during redesign at social networking site

The client

The client was a social networking site delivering more than a million pageviews per day.

The problem

The client wanted to overhaul the homepage for signed-in users, repackaging existing features and paving the way for the easy addition of new features. Existing features had been created independently from each other, and there was limited continuity in either the markup or the CSS from one feature to the next. Redesigning the signed-in homepage would require rewriting the markup for each of the existing features.

How we met

The client engaged me on the recommendation of their lead application developer, after he identified the need for a developer to take ownership of a front end that was rapidly growing unwieldy.

My solution

I worked remotely with the lead application developer to create a new framework that would allow disparate back-end features to be presented in a consistent manner on the front end. We crafted a new templating system that centralized common markup such as module wrappers and form elements, and I developed a standardized approach to writing the internal module markup that eliminated design discrepancies across components. We created a reusable, JSON-based configuration pattern for describing pages and configuring components that was easily readable by both the front end and the server. I also developed a JavaScript framework using the jQuery library for handling common component behaviors.

The outcome

The new signed-in homepage, and the framework used to create it, became the prototype for future overhauls, and promoted a new level of consistency in the site's design. The CSS and JavaScript framework became the basis for additional site updates, enabling the rapid prototyping, development, and deployment of new features while requiring minimal communication between the front- and back-end developers.