BACK TO PROJECTS

Boston Consulting Group

UI/UX

Microsite

The Challenge

BCG, a global consulting firm that partners with leaders in business to solve their toughest problems, came to The Charles Grp looking for a way to arm business decision-makers with concrete, actionable information that tackles some of society’s toughest challenges - food waste, climate action, AI expansion, etc.

Working with BCG’s editorial team, we created a series of interactive microsites with the goal of making dense information digestible without losing the invaluable nuance.

KEY OBJECTIVES

Create a microsite that encourages audience to keep scrolling
Prevent "quickscrolls"
Explore modules that users engage and educate
Drive audience to learn more and contact BCG

VIEW SITE

Understanding the Audience

For this project, it was important to keep in mind that we were targeting higher profile business leaders. During our discovery phase, using data and metrics from BCG's development team, we found that generally this audience tended to scroll through the site very quickly and then scroll back up looking for the most important bits of information. Knowing this, I wanted to prevent this behavior as much as possible. It was important for the audience to understand the full story as it its true essence is that time is running out.

To counteract this behavior. I looked into ways that we could break out the text to help create more of a narrative element to the story. Using shorter blocks of copy and larger text to fill the screen allowed us to tell parts of the story without sacrificing information.

How can we balance providing detailed content while making it digestible for some of the world’s top business leaders? During our discovery phase, using metrics and heatmaps from BCG's development team, Our team discovered that this audience tended to scroll through the full site very quickly. Typically, they would pause on bigger headlines and then keep scrolling till they reached the end. Only to scroll back up looking for the bits of information that was most relevant to them.

With this information, It was important for us to find ways to tell a whole narrative story while reducing copy to its true essence. I was tasked with finding ways in which we could condense copy, utilize scroll interactions to highlight information, and create interactive modules that allowed the user to learn as they explored the page.

Heatmap showing audiences cursor behavior on previous interactive article

Scroll interaction - Highlight is triggered as text moves up the page

Using a tabbed navigation that encourages users to stop and explore

Using a tabbed navigation that encourages users to stop and explore while reducing page height

During the research phase, we looked at alot of editorial references and data driven sites to help tell the story

As the user scrolls, masks shape shift on the page to represent climate change

The Narrative and concept

How do we tell the story of a climate change that inspires change? During the concepting phase, I and my team wanted to explore ways that we could represent climate change with scroll interactions. Looking at other scroll based interaction sites and infographic style modules, we came up with the idea of representing climate change as a circle. As the user scrolls throughout the site the circle shifts shape, expands out and shrinks, showing that the users actions despite their intentions, will always have an effect on climate change.

During the research phase, we looked at alot of editorial references and data driven sites to help tell the story

Automated Stat graphics were used to conserve space and grab attention

As the user scrolls, masks shape shift on the page to represent climate change

Solution & Results

Created interactive modules that utilized tabbed navigation and condensed information
Implemented a contact button that invited audience to talk and potentially use BCG for future projects
Embedded new and existing video to highlight key points
Used scroll animation to create interest and hold audiences attention
We saw an increase in page clicks and interactions when compared to previous articles
Time spent on page increased compared to previous
Social Media posts were created to promote and drive audience to view the site

View more of the site below or view site here

Created interactive modules that utilized tabbed navigation that condensed information
Implemented a contact button that invited audience to talk and potentially use BCG for future projects
Embedded new and existing video to highlight key points
Used scroll animation to create interest and hold audiences attention
We saw an increase in page clicks and interactions when compared to previous articles
Time spent on page increased compared to previous

View more of the site below or view site here

Created interactive modules that utilized tabbed navigation that condensed information
Implemented a contact button that invited audience to talk and potentially use BCG for future projects
Embedded new and existing video to highlight key points
Used scroll animation to create interest and hold audiences attention
We saw an increase in page clicks and interactions when compared to previous articles
Time spent on page increased compared to previous

View more of the site below or view site here

Created interactive modules that utilized tabbed navigation that condensed information
Implemented a contact button that invited audience to talk and potentially use BCG for future projects
Embedded new and existing video to highlight key points
Used scroll animation to create interest and hold audiences attention
We saw an increase in page clicks and interactions when compared to previous articles
Time spent on page increased compared to previous