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