Boston.com is one of region's leading destinations for news on all things Boston.
As a free news platform, the new Boston.com had to support its 4.8 million monthly readers as well as advertisers. A key consideration was, of course, creating an enjoyable and seamless reading environment. Boston.com wanted to attract new audiences, greatly improve the mobile experience, and address the needs of their loyal readers. They also wanted to encourage more visits to their lifestyle content.
Since the site is always changing with the news cycle, designing an adaptable and scaleable showcase for their content was crucial. We needed to account for existing article types as well as plan for future content aimed at encouraging interaction from readers. Designing intentional ad placements was also a top priority.
We met with key stakeholders to understand Boston.com’s goals, and reviewed existing data and user research which included interviews and large reader surveys. We also audited the current site and explored the competitive landscape for opportunities and inspiration.
We found that Boston.com readers come to the site primarily for quick updates on the news of the day, local sports, and weather. They often visit once a day and rarely leave the homepage except to visit a few top stories.
Highlight more trending topics and lifestyle content on the homepage to encourage deeper exploration. Create new modes of "recirculation", promoting other content within articles to boost articles read per session.
Designed for Change
One of the biggest challenges was that the content on the site is dynamic; new stories and content are added throughout the day, everyday. Senior product designer, Kitkat Pecson began the IA process and I completed it. We set out to balance permanent sections of the site like News, Sports, Food, etc. with topical and seasonal content like Boston Marathon and election coverage.
The navigation system allows for the introduction of trending topics, breaking news, and live updates. This gives the editorial team power to customize the homepage easily.
To begin creating the design system, we audited the site to identify all possible types of content and reduced the components down to their simplest elements.
The atomic unit of an article is a headline and a topic tag. Tags provide additional context and link to other articles with that topic.
Working from the new identity, I created an updated design for the platform. Bold red and a squared dot became defining elements of the visual style, indicating interactivity and calling attention to important features. The main typeface is bold and condensed, recalling print newspaper headlines.
A new look designed to reflect Boston.com's core values: Boston-centric, fast, collaborative, vibrant, and useful.
A smooth reading experience was the primary goal, especially on mobile. I chose an easily readable serif typeface for the body copy and designed ad placements that would minimize distractions. To encourage readers to explore more stories per visit we created a few different modules that feature related articles and popular articles within a story.
I also designed several new components that would bring more interactivity to articles, such as timelines and maps. These, combined with components like pull quotes, polls, and slideshows, made up a comprehensive set that Boston.com can use to enhance any article.
We made sure to account for the full range of article types: quick news updates to photo-heavy interactive neighborhood guides.
A home for updates on evolving stories and resources.
A new initiative for Boston.com, these sections house multiple different types of content and would act as a central hub for important topics. These sections take advantage of the flexible nature of the design system and allow Boston.com editors to quickly create special pages that showcase related articles and resources. These sections give readers an easy way to stay informed on unfolding events.
A new section of Boston.com for readers to weigh in on current events. The community features reader-submitted stories, comments, and reviews.
Leah Schmidt, Julie Brody