Build-a-lot World Map

Build-a-lot World (free to play) went live with 104 levels and had an additional 24 levels ready for the first update. I was tasked with designing a user interface that would display all 128 levels, the player's location, and what the player had or hadn't achieved on each of the levels. This interface also had to to be designed so that new content could be added to it indefinitely and the visual elements could be scaled or rearranged to accommodate other mobile devices. My duties and responsibilities on this project were to design the entire interface which included creating the fictional towns, sketching thumbnails, creating wireframes and completing all of the finished art assets (buttons, dialogs, map, town graphics). All artwork for the Map Screen Interface was created using Adobe Photoshop and Autodesk Maya.

Given the fact that player's are traveling around the globe in Build-a-lot World, it made perfect sense for the player progress interface to be a world map. This interface solution would be a visually interesting way to display the games content as well as the player's progress through it. I designed this screen with a map motif complete with latitude and longitude lines, and "island" graphics of each of the eighteen fictional towns floating on top. I researched the country that each fictional town was in and came up with town names that made logical sense to that geographic location, and then designed each town graphic to reveal the game content that the player would experience there. This included type selection and design that reflected the "feel" of the town, country specific graphics, and modified backgrounds from the actual game.

There was a fair amount of information associated with each level that had to be clearly conveyed to the player on the map screen interface. This included what level the player was currently on, how many stars the player had achieved on the level, if they had found the hidden Travel Gnome, if they had completed the World Goal for that level, and of course what level the player's facebook friends were on. My solution was to design the map screen buttons as circular, compact, badge-like graphics that would show what the player had completed on each level. This way the player could easily see what goals were missing from each level so that they could better decide which levels to replay. Below is my sketch of the button design and a series of the final buttons ranging from no stars all the way up to fully completed.

The player progress map interface also contains information about the amount of Energy, Stars and World Points that the user has at any given time. Icons and color keyed numbers are used to convey these important map screen resources to the user. In addition to the map screen resources, there are also smaller buttons that I grouped to the right of the status bar that allow the user to access facebook, check important messages, adjust the game's options and close the application.

I designed all of the dialogs in Build-a-lot World using colored concrete textures, bold hazard striping and heavy architectural fonts that I felt successfully conveyed the construction theme of the game. When a user clicks (or taps) a level button, the Energy Required Dialog pops up and let's the player know how much energy is needed to play that particular level. I wanted to make sure that the player not only knew how much energy the level was going to cost them to play, but also what they had or hadn't achieved on the level. This was done by incorporating Stars, Gnome and World Goal icons into the top header of the dialog.

When a user reaches a passport gate and they haven't earned enough stars to pass through it, the Unlock More Levels Dialog will pop-up and inform the player of how many stars they need to continue. I designed this dialog to emphasize the passport that is seen on the actual map screen and color keyed the buttons to influence "paying" to unlock the content.

In Build-a-lot World you can invite friends that are playing Build-a-lot World to become part of your workforce. Each participating member of your workforce earn a paycheck in the form of in-game currency. This first dialog is where the player selects which of their friends they want to invite to their workforce.

After the player has a workforce of friends that have accepted their invitation, the player can select which friends they will use during their current play session. Each friend can only be used once every twenty-four hours. Players that are available in the workforce are represented by a blue box with the friends name and picture. Players that have already been used are shown in grayed out boxes with a countdown timer showing when they can be used again. The green "Invite" boxes are used by the player to recruit friends to join the workforce.

The player can also be invited to join a friends workforce. When the player logs into the game they will see messages regarding any "paychecks" that they have earned while away from the game as a result of being selected to participate in their friend's construction jobs. The dialog below shows how easy it is for the player to collect their in-game currency.