BACK TO PROJECTS

Boston Consulting Group

UI/UX

UI/UX

UI/UX

Microsite

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 parse the information creating more of storyline to the content. Using shorter blocks of copy and larger text to fill the screen allowed us to tell parts of the story without sacrificing information.

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 parse the information creating more of storyline to the content. Using shorter blocks of copy and larger text to fill the screen allowed us to tell parts of the story without sacrificing information.

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 parse the information creating more of storyline to the content. Using shorter blocks of copy and larger text to fill the screen allowed us to tell parts of the story without sacrificing information.

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

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.

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.

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.

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 articles

  • 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

Available for Full-time and Freelance Work.

Instagram

Linkedin

Contact

ahutchingsdesign@gmail.com

© Hutch Design llc.

Created on Framer.

Available for Full-time and Freelance Work.

Contact

ahutchingsdesign@gmail.com

© Hutch Design llc.

Created on Framer.