Grouped Content Display

There was a broad need across multiple sites to be able to display and organize like content together, especially as the collection changes and evolves over time
💬 This contains abbreviated details of the full project. If you'd like to talk more deeply about UX projects, feel free to reach out directly.

Problem Spaces

Inconsistent Patterns

While there were existing implementations across the framework to support groups of content, they were fragmented with inconsistent logic and presentations both in terms of design and engineering.

Need for Scalable Pattern

The sites collectively had various requirements for a portable solution that could fit into existing interfaces as well as on new layouts, so there was a need for a scalable pattern that could fit in many different scenarios.

Design Considerations

Giant Bomb

The site had an abundance of content that needed to be organized in a myriad of ways: by show, content type, chronologically, relevancy, etc. The original format treated the content mostly through a mixed feed relative to what would be displayed on a blog.

Often on the site, delineating between one type of content and another was done so through iconography while the rest of the elements of each object remained exactly the same in each feed, causing everything to blend in with one another.

GameSpot Event Hubs

An important part of GameSpot's content strategy revolved around seasonal events and announcements in the games industry, often resulting in a large amount of content created in a small span of time. As this content is made and published over time, layouts often felt either too empty or too dense.

Being able to have pages and hubs evolve depending on the amount of content that was created and published would be beneficial for the site since they experienced these surges in related content several times throughout a single year.

UX Patterns

Portable, Modular Object

At a high level, a pattern for a module was created to be able to organize and display like content in a way that can grow and evolve depending on the amount of published content within the group.

The module allows the content to be displayed either in a grid or a carousel either depending on a manual selection in the CMS or automatically depending on the volume of content.

Carousel View

The carousel mode allows for a compact display for the user to interact with that translates well across responsive layouts. This is best suited for showing the most relevant or recent content initially while allowing the user to discover more content through a click or swipe.

This mode is also beneficial for stacking several carousels together in a single layout in the event that several groups of content are required to be displayed.

Grid View

The grid mode is beneficial for displaying a large group of related content that is best viewed in a less confined area and more suited for discovery rather than having a focus specifically on recency or relevancy.

Groups can grow in column size as items are either added or published automatically. Optionally, the module can automatically switch to the carousel view when all items are published in the group.

Layout Evolving As Content Changes

Applied Example: Giant Bomb Homepage

Projects Using These Patterns

Giant Bomb Homepage

Giant Bomb Episode Layout

GameSpot Event Hubs