UX Changes for Players

We've packed a lot into our latest release. In this post, I'll share with you the more dramatic changes from a players perspective: the changed user interface. With this release, we are adopting Google Material Design. If you are familiar with Google Apps For Education (GAFE) then many of the design elements will be familiar. Let's get started - and where applicable I'll share before and after pictures.  

New Options for Signing In

When signing in to Chrome Warrior, you'll notice an additional sign in option: Office 365. For nearly all of our districts, you will want to click on the "G" (Google). However, if you are an Office 365 district, you will use your Office 365 credentials when signing in to Chrome Warrior.

Activity Dashboard

Once you are signed in, you'll land on the game Activity Dashboard. Here's what the Activity Dashboard looked like before the redesign.

While this design is perfectly functional, it requires a little extra guidance for players. For example, it's not entirely clear what a player needs to do to play the game. With the refresh, we wanted to emphasize clarity of purpose.

In the new Activity Dashboard, it is extremely straightforward as to the action we want players to take. Note, while the game in the screenshot above is "ChromeWarrior," your players will see the name of your district's game.

Updated Player Game Board

The refreshed Player Game Board places more emphasis on playing the game and introduces new elements to convey to the player the state of their achievements. In the old game, the emphasis was placed on information about the player: their avatar, points, and relative position. Playing the game is secondary. This is expressed by having all of the player information at the top of the screen.

In the refreshed game board, playing the game is emphasized as the levels, missions, and sorties are now at the top of the page.

You may also note the additional graphical elements prefixed to the sorties. I've pulled out a section from the screenshot above to illustrate the new notation.

Following Material Design guidelines, we placed indicators next to sorties to show the player the status of their achievements.

  • The "play" symbol represents sorties that have not been played yet
  • The "pause" symbol represents achievements that have been marked incomplete by an admin or reviewer and require action from the player
  • The "checkmark" symbol represents successfully completed achievements
  • The "timer" symbol represents achievements that require action from an admin or reviewer

Submitting an Achievement

We also wanted to improve the experience for submitting an achievement. Here is the current page for submitting an achievement.

In the update, we separated instructions and guidance the player reads from the evidence the player needs to submit into two cards. Functionally it is the same but our hope is that it is more clear for players.

Updating Achievements based on Reviewer Feedback

While there are some functional changes, most of the changes I've covered so far focus on improving user experience. There is one change that represents a fairly significant improvement: reviewers can mark achievements as incomplete (suspend) achievements that players can then update and engage with reviewers. In the screenshot below, we have a suspended achievement that can be edited - by clicking on the three dots. The player can respond to the reviewer in the comments section. For example, the player might ask for guidance from the reviewer.

A player knows that an achievement is suspended if the achievement has a "pause" button next to it.

In the example above, "Have Students Create a Doc" is suspended. When the player clicks into the achievement, they'll see a screen like the one below where the reviewer's reason for suspending is included in the comments section.

Suspended achievements provide two direct benefits to the player: they no longer have to submit the entire achievement again and they can get more feedback (learning) from reviewers.

Navigation Changes

Wrapping the UX changes up for the player, I'll talk about the navigation changes. The current menu requires that the user have underlying knowledge about the Chrome Warrior page structure to successfully navigate the site. E.g., you have to train users that they must click on their name to navigate to the game board.

In the new menu, we make links more explicit - and add in some nifty icons. The player navigates to their game board by clicking "My Game Board". They manage their profile by clicking "Profile".

Wrapping Up

In our shift to Google Material Design, there are a six significant changes to the Chrome Warrior Players' user experience:

  1. Login Screen - Chrome Warrior now supports Office 365
  2. Updated Activity Dashboard
  3. Updated Game Board - additional symbols on activities and emphasis placed on game playing
  4. Achievement Layout - action the player must take is clearer
  5. Suspended Achievements - players can resubmit without having completely redo their achievements and can engage with reviewers
  6. Navigation Changes - menu items are more explicit

We will continue refining the user experience so please continue to provide feedback!