User Experience Architect
Boston.com is consistently ranked as the seventh or eighth largest media website in the country (in terms of audience according to Nielson). Each month it is visited by more than four million unique visitors – people who come looking for the latest news, sports, entertainment and things to do. We also offer a comprehensive suite of tools for home buyers, car buyers and job seekers as well as business listings, our own search engine and a video channel.
As Director of User Experience, my first job in 2007 was to oversee the redesign of the entire site. The goal was to improve engagement by increasing pageviews and growing our audience. I was lucky to be helped by some talented consultants at Creative Good who guided us through the research phase which included two dozen listening labs – some at homes and some in a lab setting. In the end, Creative Good presented us with a framework and strategic recommendations for the new site’s design and layout. It was my job to take that strategy and see it through the design and production process.
I contributed in a number of ways to this project:
With help from Creative Good, we conducted about ten site visits where I was able to observe real users in their natural environments while they visited Boston.com and other sites for news and local information. We also ran two days of study in a lab setting. The result of this study was a clear doctrine from Creative Good on how we should promote and organize our content and functions – something they called “information retailing”. They also made some wireframes for a few key pages to show how we could interpret the new strategy.
I made wireframes for about thirty different sections of the site. The goal was to make pages that displayed content as clean and straightforward as we can, so users saw meaning and relevance in it. The wires were very detailed because we needed to understand and agree on guidelines for the quantity and denseness of the information being presented.
Homepage Wireframe
The wireframe for the homepage was a rough sketch to help us agree on what elements could be above the fold and the make up and size of the content sections. It was also where we agreed on the precise display advertising requirements.
Today's Globe Wireframe
The new site would have the Globe as a key element of the navigational structure.
Sports Section Wireframe
This really shows how we wanted to clean up the chaos of the old design - using more whitespace, less color, consistent use of images and of course those lovely display ads.
The Lifestyle Section Wireframe
This page used a sighlty different approach to the content to reflect the greater variety of topics within that section, as well as its non-news nature.
The design of the site was carried out by a team of designers that I directed.
New Boston.com Homepage '07
This was the last comp we made before the page was built.
New Things to Do section
This was a new section for Boston.com. We found in the user study that people were looking for this content in a variety of places.
New Boston.com Article
This article template was designed to be more flexible, more legible and offer more utility.
New Boston.com Gallery
The gallery was taken out of a pop-up so we could display more ads.
A lot of great effort went into making sure the new design was implemented properly. Among many documents, I created a style guide for the technology team to ensure the CSS was well done and one for the editorial team who would be laying out the page using various elements in the CMS.
Boston.com Redesign Style Guide
Dana Giuliana is a UX Architect based in Boston, MA (USA). I'd love to hear from you.
Based on a template by
All content © 2012 by Dana Giuliana – UX Architect Boston – Portfolio site