Close

Checkr

A website for background checks

Quinn

An erotic audio platform for women

Boston.com

A design system for the news

indicates what page the user is on

Healist

An e-commerce site for natural CBD

Carnegie Hall

An interactive map for young students

experiments

fun things

Product Design
Design System
Editoral Design
Product Design
Branding
B2B Design
Product Design
App Design
Audio Platform
Product Design
eCommerce Design

Boston.com

Product Design
Design System
Visual Identity

A flexible and robust design system for a fast-moving news platform.

Role

As the lead designer on the project I was responsible for interpreting research, establishing the design system, and creating a scalable system of modules and page templates to help Boston.com modernize and grow. I also worked on the new brand identity with other Big Human designers.

Before

Boston.com is one of region's leading destinations for news on all things Boston.

Brief

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.

Homepage sketch

Research

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.

Approach

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.

Navigation

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.

Desktop wires

Content Units

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.

Design System

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.

Components in use

Article Design

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.

Featured article types

mobile articles

Special Sections

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.

Weather + sports

Community

A new section of Boston.com for readers to weigh in on current events. The community features reader-submitted stories, comments, and reviews.

Project is currently in development

Boston.com

Client

Teammates

Haley Danylchuk

Product Management

Andrew Tejerina

Strategy

Kitkat Pecson

Product Design

Leah Schmidt, Julie Brody

Brand Design

Hayley Fiege

Design Direction

@2021 Katie Cullinan