A Complete Site Overhaul to Build an Engaged User Community

Explosm_WebDesign_Cover_V1.png
 

Challenge

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

community-icon.png

Build an on-site interactive community

responsive-design-icon.png

Go mobile with responsive design

new-style-icon.png

Update the digital brand style


Discovery

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
explosm_site_flow_new.png
 
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.


Ideate

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
Explosm_Comments_Mobile_Mockup.png
Explosm_iPad_Home_Mockup.png
Explosm_iPhone_Homepage_v1.png
Explosm_iPhone_ArchivePage_v1.png
Explosm_iPhone_VideoPage_v1.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

Outcomes

checkmark.png

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.

checkmark.png

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.

checkmark.png

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

Summary

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

CosmoProf_CustomerJourney_iMac_Mockup.png

CosmoProf

A Research-Based Customer Journey for Digital Transformation

AA_Design_Cover.png

American Airlines

Leading the Way to Responsive Design