Communicative design
for quandaries in business

Case Study: Clockwork Empires Microsite(s)

Posted by Megan Seely in Interactive

What do you do when your website has two very different audiences?

Clockwork Empires - MicrositesThis was the dilemma for Gaslamp Games when it came time to design/develop a promotional microsite for their new title, Clockwork Empires. Clockworkempires.com needed an overview landing page for people who weren’t familiar with the game yet. There also needed to be an area for early access customers to view the latest news, patch notes, and submit bug reports.

For this project, we separated the website into two distinct areas: Join the Colonies! (to promote the game itself, to game enthusiasts and the press) and the Community Portal (for game players). Visually, the areas feature the same steampunk-styled utility navigation. Visitors can toggle between the two microsites as part of the nav.

Aside from the steampunk design esthetic, we were also inspired by colonial-era newspaper typography.

 

Join the Colonies

Join the Colonies! Clockwork Empires is a steampunk city-builder game with cosmic horror elements.

Join the Colonies! Clockwork Empires is a steampunk city-builder game with cosmic horror elements. Visit the site: ClockworkEmpires.com

We developed a parallax-style single page layout for this microsite, to add a storytelling and exploration element to the visual design (there’s a surprise waiting at the bottom!)

 

The Community Portal

Keep informed of the latest development progress and player community at the Community Portal.

Keep informed of the latest development progress and player community at the Community Portal. Visit the site: Portal.ClockworkEmpires.com

This microsite acts as an aggregate feed of the latest articles, tweets, and forum posts about Clockwork Empires. We abandoned the parallax design in favour of a more utilitarian approach. There are also FAQs and a support request form for game players.

 

Additional credits:

In-house web development by Derek Bonner

Bonus: visit the 404 page.