Designing Wordament on Xbox LIVE

One of the first tasks I took on after starting full-time in Microsoft Studios was to try to figure out how to marry the visual design of Wordament with the features Xbox LIVE provides. We take change to our design pretty seriously and we try our best to only introduce changes that results in what we feel is a 100% improvement. We’ve learned from countless experiences throughout the years that change is bad; unless it’s great. In fact, that is one of the guiding principles in software design here at Microsoft. So while I was very excited about all the goodness that Xbox LIVE brought with it, I was also nervous about integrating it in a way that would feel like the natural evolution of Wordament. We had to carefully balance “adding a lot of great new functionality” against “staying true to Wordament’s heritage.”

We started off with a couple ideas and these soon morphed into our cornerstone principles:

  • The gameplay works, don’t break it – we rejected any design that fundamentally changed the game board or how the game mechanics work
  • Wordament should cheer you on more – We decided that we wanted Wordament to greet you at launch with a friendly “hello” and some data about how well you have been playing. Additionally we wanted to create challenging achievements to give every player something to strive for.
  • Make competition with Friends and Frenemies easy – Many players love to compare themselves against their Frenemies so we wanted to make this easier than ever.
  • Listen to players – we’ve added countless little features because you asked for them, without compromising the simplicity of the game.

From these principles we started noodling on patterns for the start screen. While we could have simply extended our indie design with more buttons for things like Achievements, Settings, etc. we decided that was just going to land us with a cluttered design. So, we quickly gravitated to using a pivot control, which was something we had used in our very first release of Wordament.

Capture

The pivot allows Wordament to display lots of great top-level information without the feeling of clutter. With each swipe, you can view pivots for:

  • Rank and stats –how well you are doing?
  • Frenemies –how well have you played against your Frenemies over the past 24 hours?
  • Achievements – this pivot shows what Xbox LIVE Achievements you have earned as well as instructions on how to earn the ones you have yet to earn.
  • Help & Options – here you can do things like turn off sound, change your puzzle language, update your country code and read the full rules of the game
  • About – all the info you need to contact us

We only pivot the bottom half of the page, so it’s always one swipe to do the most important thing: play the game.

Another key element is Wordament’s look. Wordament has a history of using the accent color on Windows Phone throughout its user interface. Many players love this feature and it was something we wanted to both maintain as well as evolve. As we started digging into Windows 8 design and development, we noticed that the new Windows 8 Metro-style apps often sported fancy “tattooed backgrounds.” That got us thinking about what Wordament might look like with a clean and modern background. We started drawing. We came up with about 30 different varieties of background designs and we narrowed it down to the one we liked the best. From there, we carefully chose colors for the backgrounds to pair with the accent colors on the phone. I’ll let you be the judge, but I really like how this came out. We ended up with 20 stunning color variations.

spin

The new backgrounds are also part of the game design:

game IR results

As you can see, we tweaked the way the results screens’ layout too, and we find them to be easier to read. We’ve also made some really good performance improvements in our word list code that make these views the snappiest that they have ever been. There are lots of other new features in these screens, and we will blog about those over the next couple days. We are anxious to get this in your hands and see what you think!

– John

Advertisements

About Wordament

Wordament is a fun and addictive word game from You vs. the Internet, a Microsoft Studio.
This entry was posted in Uncategorized. Bookmark the permalink.

7 Responses to Designing Wordament on Xbox LIVE

  1. danmoov2 says:

    Looks like a great step 🙂 Glad to see the swipe PLAY to start has stayed, love the idea of showing how to play to be able to play! Good work Wordament

  2. IRB (@IRB) says:

    Can’t wait, it is an awesome game even without LIVE.

    • Wordament says:

      We can’t wait either. Only a couple more days. If you are in the Seattle area come join us at Bellevue Square mall for our launch party and tournament on the 26th.

  3. Looks slick! Not sure how “cheered on” I’ll feel seeing a zero beside “First Place Wins” all the time, but it’s nice having the info front-and-center. Curious about the XBL Achievements you’ll be introducing and the thinking behind these… please share!

    • Wordament says:

      The achievements should help cheer you on a bit. We are going to do a entire blog post on those in the next couple days.

    • Wordament says:

      You won’t see that text unless you’ve done it at least once. We are trying to make you feel as good as we can. 🙂 The achievement blog post is slated for tonight!

Comments are closed.