FBB Timeline Module

One of the greatest challenges was that most of the information that may be used in the module was text heavy and lacked visual interest. We needed to make a module that solved for this but also allowed large video or imagery when available.

Using the FBB redesign system, I came up with a design that would allow for both text-only content as well as text and imagery. I used color stripes within the FBB empathetic color system as a visual element to add additional interest to the text heavy pages. As the user navigates through the content, they can use the category selectors to filter the information they are seeing within each year. Each category is assigned a different color set in order to signal to the user that they have changed categories. Because this module was intended to be used for various teams for various purposes, we built in the functionality to allow for the creator to set the default view to either a holistic or detailed view. Within the holistic view, the user would get a better sense of the overall timeline. The detailed view allowed for a more visual, immersive experience intended to catch the users eye as they navigate through the page. Regardless of which view was selected as the default, the user would be able to navigate between the two views in various ways, including a toggle at the top of the screen. Because the design I created for desktop was very intricate, I decided that creating an adaptive rather than responsive design for smaller screens and mobile was best. This experience was designed to be best viewed on desktop, however, it was important that the mobile experience still allow the user to navigate through the data in a similar way.