A Complete Site Overhaul to Build an Engaged User Community



Explosm contacted me with what sounded like a simple request at first: “We need a website redesign.”

After a deeper dive into what challenges the business was wrestling with, we found that a website redesign was just the surface. The team wanted to bring people back from social media to interact with their content. They wanted to make Explosm a true home for their content with engaged users and an interactive community.

Establish Vision and Project Goals


Build an on-site interactive community


Go mobile with responsive design


Update the digital brand style


Interpret Google Analytics

Competitive Analysis

  Excerpts from the Competitive Analysis document

Excerpts from the Competitive Analysis document

Re-organize Site Taxonomy for Content

I conducted an analysis and audit of the site information architecture and taxonomy. There was no clear connection between content types: videos weren't easily accessible from comics and vice-versa. I sought to fix those holes as well as introduce a hub-spoke model for connecting content around themes and keywords.

Site Taxonomy Recommendations

  • Redesign the homepage to feature more site content up front
  • Reduce clicks to view the latest content
  • Move the news landing page from the homepage to it's own page
  • Create an Account Home accessible from the header
  • Comics, Show, Shorts, and News sections get a landing page focused around that content Individual comics, show episodes, or shorts get their own page to track commenting and link to related content
  Client sensitive information obscured.

Client sensitive information obscured.

Hub and Spoke Concept

To reach our goal of creating a connected user experience, I introduced the Hub model for intertwining content and products together. Videos, comics, show episodes, news posts, and products would be connected by keyword tags that would allow “Related Content” to show throughout the site. For example, a comic about a popular character called the Purple Shirted Eye Stabber would show video shorts and merch that also included that character.


Wireframes are an important tool for validating information architecture, content, and feature requirements. I worked with the client to iterate on the site wireframes to validate the proposed page flow, confirm requirements, and illustrate responsive design principles.

  Responsive homepage concept wireframes pictured

Responsive homepage concept wireframes pictured

Establish A New Design Aesthetic

I conducted a competitive analysis to understand the overall brand design aesthetic of Explosm's competition around the web. I chose a design style that kept elements of their previous look with some new colors and typography that would stick out apart from their competitors.

Lighten the mood with white space and color

Being a site for comics and funny animated videos, the character of the site needed to reflect that. Using white backgrounds and brighter colors creates a light feel for the humor to come through and place focus on the content.

New type for a modern voice

Proxima Nova was chosen for it’s light, modern, and unobtrusive aesthetic. It would be used for basic headings, labels, and paragraph text. CreativeBlock was kept from the previous site design for button labels as a contrast to the clean look of Proxima Nova to help express the humor and character of the brand.

Explosm - Web Color Palette

Rapid Prototyping

Prototypes help bring wireframes and designs to life by more closely demonstrating the final product. I used the ZURB Foundation responsive framework to build the page templates and components that would be used on the site. I used placeholders for dynamic images, which were populated during development.

explosm home desktop.png

Iterate and Launch

The site launched on December 10, 2014. With great anticipation, we watched how our changes affected traffic flow, content engagement, and most of all–the community. Did we reach our goals? In short, yes.

Explosm Mobile Homepage



Build a community

New comics have averaged 200 comments and 150 saves a day. On-site user interaction and conversation is happening every day, which didn’t exist before.


Implement responsive design

The user experience improved dramatically for mobile and tablet users by bringing content to the homepage and making navigation easier to access.


Update digital brand style

Explosm has integrated their new look into their iOS mobile applications to further reinforce the new, friendlier brand look and feel.

Looking to the Future


Since the launch, Explosm has seen their community grow steadily. On every daily comic, a conversation ensues in the comments section between users. Videos and comics are being favorited and saved every day.

Thousands of comics continue to be generated on the Random Comic Generator every month and posted to the dedicated RCG sub-Reddit on Reddit.com.

Explosm - Random Comic Generator

Future Feature Recommendations

With additional time and budget, the following features are recommended to further boost user engagement and site growth:

Modern ad solutions–implement modern web advertising methods to increase ad revenue: seamless ad experience, responsive ads, mobile-specific ads, relevant ads to the user

Related content–show related content by similar tags or categories

Related products–drive users to the store by showing products related to the content being viewed

Additionally, conduct user research, testing, and A/B testing to increase site conversions.

More Case Studies



A Research-Based Customer Journey for Digital Transformation


American Airlines

Leading the Way to Responsive Design