Mech Mice was a strategy MMO created by Hyper Hippo Studios in Kelowna, BC, Canada.
In late 2013, the Hyper Hippo team needed a responsive website built to host the online game and share updates with their community.
Mech Mice was a completely new product and didn’t have a brand following yet. The first challenge was to create a teaser website to announce the beta launch of the game. The website was launching in phases: teaser, beta, and full website. Since myself and the lead developer, Joel Wan, were commissioned for a 6 month timeframe we had to plan and design each phase before our contract ended.
After several preliminary meetings with the community manager and the lead project manager we identified the primary pages and goals of the website for each phase.
The goal was to build up hype for the game via a teaser website, then for phase 2 expand the website to include community features, like a blog. For phase 3, the full game would be available and additional support pages like parents, membership and a help section would be required.
I started my process with basic flows to establish hierarchy of the main pages and phases of the website.
After hierarchy was established, a low-fidelity prototype was created to get a feel for user interactions throughout the website.
Part of the responsive framework for the website was to utilize a grid structure. Featured content, such as blogs and popular in-game items, would be presented in widgets.
Once the framework of the website was approved by the client, I moved onto creating a visual style. Since the game was still in early production and an overall style guide hadn’t been created yet, I was given freedom to build it from scratch.
I wanted to keep with the dark dirty tone for the primary feel, but brighten up the UI with secondary colors. Elements of the dirt and paint splatter textures were also featured throughout the UI to tie-in with the characters in game.
