100 Greatest Living Business Minds

Forbes

Platform
Desktop & Mobile Web App
Team
  • UX Designer (me)
  • 1 UI Designer
  • 1 Project Manager
  • 2 Senior Developers
Status
Launched
Overview

In celebration of Forbes’ 100th anniversary, the magazine unveiled its special centennial issue which highlighted lessons, essays, and ideas for the next 100 years from the world’s 100 Greatest Living Business Minds.

Once the user has decided to explore one of these profiles, they’re taken to a stack of cards that can be navigated via swipe gestures. Vertical swiping through the cards takes you deeper into the data for any person whose profile you’ve chosen to explore; swiping left and right allows you to easily browse the list. The Mobile Infographic delivers an interactive visual experience constructed around bite-size information -- a choose-your-own-adventure design -- that we determined is exponentially more engaging than the equivalent mobile list format.

My Role

As UX designer on the project, my role was to conceptualize the digital experience while making sure users felt engaged after landing on the page. I partnered with a designer and collaborated closely with developers and a project manager to successfully launch this special package.

Recognition

Conceptualization

Knowing that the photos were being shot by Martin Schoeller, renown for his signature close-up head shots, I wanted to make sure the images were presented in a dignified manner while emphasizing the Forbes centennial celebration.

I immediately pictured upon landing on the page all 100 photos scaling down and fading in revealing themselves individually to form a mosaic of the number 100.

Once I had the design concept laid out in Sketch I imported them into Principle where I was able to bring my concept to life.

From there I was able to create the interactions, animations, and transitions to demonstrate the flow. Users can toggle between the mosaic and list view making it easier to find a specific person by name. Clicking on a person’s photo opens up their lesson along with additional content if available.

Here I'm testing the transition from entity to expanded view and the reverse when closing.

Transition of entity expanding and collapsing.
Transition of entity expanding and collapsing.

When it came down to crunch time, I assisted with front-end by making sure all elements on the page were fully responsive. With no remaining dev resources left I ended up creating the "Read More" scroll experience using only CSS.

Mobile Counterpart

Even though I made sure the experience was responsive, scaling the 100 mosaic all the way down to a mobile screen size would not be optimal. With an existing mobile interactive infographic web app in our back pockets, it only made sense to use it as the backbone for the mobile experience. Stepping away from the standard circular ‘bubble’ style established by previous list launches, we decided to go with a grid layout in order to maintain the viewability and aspect ratio of the photos. The rest of the experience remained the same with some minor tweaks and updates to support new content card types.