Scramble Legends all started with an idea for a new user interface. After releasing Adlib I started to work on multiplier functionality for the title. At the same time, I felt that Adlib’s style was holding the game back. Its artwork was not well suited for larger screens and its theme was a bit too generic. Given I needed to create new interfaces for multiplayer I felt the time was ripe to make a break. So one weekend I powered up Photoshop and started to explore different options.

From the get go I had three goals in mind when updating the user interface:

Focus on the content

Emphasis on typography

Alive with activity

In the back of my mind I had games such as Spelltower and Letterpress which both emphasize the letters over the game area. I really liked their aesthetic and wanted to see how it might apply to Adlib.

Initially I tried to keep Adlib’s layout with a second board added for the opponent. I liked Adlib’s placement of its logo and usage of white space and tried to preserve that in Scramble Legends. In order to place more emphasis on the game itself, I also removed the faux textures, gradients, and other distracting elements.

Initial mock-up for Scramble Legends

Encouraged by my progress I kept working eventually striking on the idea of avatars. I wanted Scramble Legends to have a personal feel and also a strong brand and early on I felt that avatars offered these things. In addition, the avatars provided a great way to add more activity and feedback to the game. They can bounce, wiggle, and change state in response to various game events.

Second iteration featuring avatars

You can also see the addition of a subtle guide to the board. The board fills up as the game progresses and you lose when the board is full. As a result I wanted to make it easier for you to gauge how you are doing. The guide was added to this end as it helps you quickly estimate how many rows are empty. It also helps break up the space on the board making it a bit less plain looking.

Eventually, I hired Kyle McGill to help create the avatars. As we worked together it became clear that the avatars were going to be bigger on the screen than originally planned. After all, if avatars are really an important part of the game and reflect on you they should be big and visible not tucked away out of sight. As are a result I had to rebalance the user interface. Gone were the title and ample white space at the top of the screen. In their stead are the avatars, commanding the board from on high.

Second iteration featuring avatars

Along the way I also gave the board eyes. Once again I wanted to create a more personal, alive aesthetic. The board eyes offer yet another way to customize the experience as well as some juicy activity for various events in the game.

In the end the game’s user interface evolved a bit more to look like this:

In-game screenshot from Scramble Legends

Mainly, the changes were dictated by changes to the gameplay itself. As features were added or removed the interface changed as necessary. All in all I’m quite pleased with the result. The avatars, board, and eyes are all alive with activity, and there are very few non-essential elements on the screens letting you focus on the act of spelling.