Loading ...

Responses by BCG Henderson Institute and Schema Design.

Background: The Idea Explorer is a new 3-D digital interactive experience created in partnership with the BCG Henderson Institute’s (BHI) think tank and Schema Design. This distinctive map of BHI’s content enables users to dive deep into a rich repository of ideas and innovations, encouraging exploration and connections across themes and topics to uncover idea adjacencies, or intellectually connected ideas.

Design core: At its core, the Idea Explorer is about dynamic engagement and enabling users to explore idea adjacencies. It features an immersive, self-directed interface that encourages visitors to uncover new sources of inspiration and establish meaningful connections. Users can change perspectives, navigate through various themes, and access a range of articles, podcasts, videos and various formats from the BHI content archive. The design is intuitive, emphasizing ease of use while encouraging exploration and interaction with the content in innovative ways. As new content is added to BHI’s website, the Idea Explorer will continue to evolve for a real-time view of BHI’s content universe and provide new insights with each visit.

Favorite details: The opportunity to create an innovative, immersive experience that fosters deeper discovery, insights and meaning that is aligned with the forward-looking vision of the BHI. Also, the moment we unveiled the network map to BHI—the team’s excitement to see their content mapped in a data-forward visual that showcases the full universe of their work in one visual.

The BHI team decided to launch the Idea Explorer on April 30, the birthday of BCG’s founder Bruce Henderson—of which the Institute is named after—to honor his legacy and love for new ideas and innovation with this forward-looking user experience.

Challenges: Designing user-friendly mobile interactions for the complex network map. The limited screen space on mobile devices meant we had to be innovative with our UI solutions to ensure the platform remained accessible and easy to navigate across platforms.

There was also a large amount of tagging and categorization of each content piece in BHI’s archive to ensure the data feeding into the Idea Explorer is appropriately tagged to showcase relevant themes, topics and connections.

Navigation structure: The Idea Explorer’s navigation is centered around a 3-D network map, with parent nodes symbolizing BHI’s key content themes: Strategy, Society & Planet, Organization, Technology, and Economics. These nodes are linked to subtheme nodes, which, in turn, connect to end nodes corresponding to individual pieces of content, such as articles, videos or podcasts. The map organizes the content structure and also serves as an interactive navigation tool, letting users click any node to access content. Additionally, we integrated a sidebar menu, providing users an alternative way to browse articles by theme or subtheme in addition to a shuffle feature, which users can click on to receive content recommendations from the map.

Technology: The Idea Explorer uses an underlying physics engine to simulate physical forces and create a three-dimensional, force-directed network graph. Each published article and associated article themes are represented as a node in the simulation, and their interacting forces determine the visualization’s final shape. In particular, we leveraged D3.js, three.js and Vasturiano’s 3d-force-graph web component to achieve this. The Idea Explorer is integrated with live data from BHI’s website and rendered in the browser for dynamic graph updates.

bcghendersoninstitute.com/ideaexplorer

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In