Halo: Reach is here, and a new official Halo site has also been released using a well-orchestrated combination of Silverlight and HTML.

Silverlight allows Microsoft Game Studios to bring an experience to the web that is on brand and offers a familiar look and feel to what users experience on the console. The quality of the creative and animation design hasn’t been matched across an experience this large.

clip_image002_thumb

Halo Waypoint is a special place for all things Halo. You’ll find videos, screenshots, event info, interviews, the latest news feeds and much more. Videos are streamed using IIS Smooth Streaming.

3 Screens

The vision for this project was actually based around a three screen strategy for connecting Waypoint to XBOX Consoles, PC Desktops, and Windows Phone 7 devices.

The general idea is that each of these screens represents a different military role within the “Haloverse”.

Console: the Admirals view, with a lot of breadth, but limited depth, covering the high level information available to Halo players

Desktop/Website: the engineers view, with all the details that he might want to dig in to

Phone: for the soldier in the field, where the application serves as his sidearm, keeping him connected to the “Haloverse” while going about his business

The phone app will even be pre-installed on Windows Phone 7 devices as they become available later this year.

Insights on features

The video browsing and viewing system implements keyboard commands as well as mouse, offering nice, intuitive control over the viewing experience.

clip_image004_thumb

Galleries are presented with a handy “scrub bar” allowing you to not only quickly discover content, but know how much there is, and where you are at all times. Filters can also be applied to target specific content types (video, screenshots, etc.).

clip_image006_thumb

Bookmark items for quick and easy recall. You can also share content from anywhere within the site, with “deep links” that take you right back to that specific point in the application. For example, here is a link directly to the Halo: Reach Zealot Gameplay video you see bookmarked below.

clip_image008_thumb

Behind the Scenes

Using Microsoft Expression Blend 4, the design team was able to rapidly create the UI elements for the page, connect to services such as Twitter, and populate it with sample data to show senior management realistic comps.

clip_image002_thumb

Seamless Experience

The site has a down-level experience with HTML, optimized for SEO. Users with Silverlight installed can switch back and forth between these experiences without losing their place on the site.

We are really happy with what Microsoft Game Studios has been able to accomplish here. This site was also built in part by BLITZ, and sets the bar for a rich experience online, developed in Silverlight. Go check it out today at http://halo.xbox.com!