Bain Red Folder

About Project

Designs for the expanded functionality of Bain.com's Red Folder

Live Project
Category
Website
Client
Bain & Company
Release
June 2021

Bain's Red Folder was initially brought about as a way for Bain.com users to share a collection of insights with others. Partners quickly capitalized on it since it allowed them to share relevant insights with potential and current clients in their related industries. Seeing how successful the Red Folder was as an unexpected marketing tool, the marketing team wanted to enhance the capabilities of the Red Folder.

Initial View of the Red Folder

One of the first priorities was to allow users to have more control of the ordering of insights within the Red Folder. Initially the only way for users to set up the order of insights within the Red Folder was to add the insights within a specific order where the first insight added would be appear in the top left and each additional insight would be added after it.

I first focused on adding the ability for users to drag insights around the page so the user could put them in the ordering of their liking without having to clear the folder and adding back insights in a specific way. There were a number of considerations for the positioning of the drag icon but after much discussion with the Product Owner we ultimately settled on the top right corner so it is easily visible but doesn't interrupt any of the other icons related to the insights.

View of draggable cards for desktop

Part 2

My next focus was to allow users to create sections that they could label and add insights from their collection. This was to help users create a more curated experience for current and potential clients.

I also thought about the use cases related to the sections with how users would add or remove items from sections as well as how users would move sections. Initially I looked into having users drag items around on the page but found the UX got clunky if a user had to drag an item from the bottom of the screen to the top section. After demo-ing different design ideas to the Product Owner, it was decided it make more sense to have one section active at a time and have an easy way for user to add or remove items from the section. The end result was adding an add/remove icon to the top right of the cards allowing easy identification by users to what action they should take.

Users viewing their first section within the Red Folder.
Users have added a second section where they are in the middle of adding more insights.

Once the desktop version was locked down, the next focus was on the mobile experience. The idea was to keep the mobile as experience as close to the desktop experience as possible while allowing it to be a truly mobile experience for users who are on the go.

Mobile View for creating and editing sections within the Red Folder.

All of these updates were implemented by the Bain.com team and was received incredibly well by users who loved the changes.

Part 3

The next major ask - create an archive where users can save Red Folders so they can revisit them later on without losing their current Red Folder.

This was a fun challenge since I really had to think through all the different use cases and how the functionality would work in terms of saving folders as well as being able to access or share them down the road. I first focused on what the archive would look like with archived Red Folders and how users would interact with them. I then focused on the user experience for users who haven't archived a folder yet and what steps the user would need to take to archive a folder from the active Red Folder.

Empty Archive View
User viewing their library and seeing the different options available to them for the archived folder.

The mobile views were a bit challenging since the original focus had been for desktop.

As more and more partners were utilizing the Red Folder, we really wanted to make sure that users had all the abilities they had on desktop for the mobile versions. One of the big considerations for mobile was accounting for the two extreme device breakpoints. On the small device side, I designed around the Iphone Mini while on the large device side I designed around the Iphone 11 Pro Max.  These two sizes helped me think about how different device resolutions can affect design choices. As seen below you can see the designs for the small mobile device and the large mobile device in the prototype video.

Small Mobile view for the Archive and Red Folder

There was a lot of refining done to the Library where a lot on initial features were removed to simplify the experience. Initially we were going to include a carousel preview on the insights that are within the folder. Sadly we decided to remove the preview since it would take up a lot of space and development resources so instead opted for showing more folders within the page and use the folder title and a descriptor for the insights inside. All of these features have been implemented and are available for Bain.com partners to use. The initial stages were rolled out to all users where anyone can create a Red Folder and order their insights into an order that pleases them. The more advance functionality has been released only to users who have a Bain.com account turning the sections and archiving into more of an internal tool that can be leveraged by anyone within Bain.

Back Arrow

How We Work

Learn more about our creative process
Portfolio button

Contact Us

Let’s create something great together
Right Arrow