Early UI Comps

These are some of the first compositions of the screens that I created, mostly using existing assets. The choice to use the actual game assets rather than gray box shapes was to give a better sense of what the final design would look like. While our previous compositions had been focused on getting spacial reference for the screen size, these were exploring other equally important aspects of the UI design.


Home Screen 1

This is a menu style for the home screen that was experimenting with the facebook version's more exciting visual features. It utilizes the diagonal lines to evoke a more dynamic and energetic feeling. The color contrast between the three main sections was not exactly well implemented and needed rethinking. Overall it felt too haphazard and sloppy to be visually appealing, so major changes needed to be made.





Home Screen 2

This composition was a revamp of the previous layout. The general idea was kept, but the coloration and size differences for the three sections were tweaked to attract the player to the Daily Puzzle and Game Show sections, rather than the Create-A-Puzzle. Even with these changes, it didn't work as well as it could've. We decided this comp was not going to be used in the final product, but aspects of it may have made their way into future builds of the game.





Daily Puzzle Screen 1


This was the first of several compositions primarily focused on arranging the leaderboards in a way that would save screen space while still creating a sense of community for the players. This comp did a fine job of saving space by removing the player portraits and collapsing the leaderboard information into small tabs, but the community aspect was greatly diminished because you couldn't see the other players' faces. We didn't want to reduce the other players into numbers and letters, so this level of leaderboard reduction was scrapped.





Daily Puzzle Screen 2



These two compositions brought back the player portraits for the leaderboards, and also toyed with the placement of the options button and menu. By removing the diamonds, energy and experience counters from the top navigation bar, we had more room to show the puzzle and phrase necessary for gameplay. At the same time, the options button was shifted to the middle to see if the symmetry would be more appealing. While the button itself might've worked in the center, once it expanded into the other buttons and display it was too unwieldy to consider as a viable option. In addition, it was decided that the player portraits were too small and needed to be expanded for the final product.





Daily Puzzle 3

In this comp, the options button was returned to its original location and the player portraits were enlarged. In order to save space on the leaderboards, player names were removed. The idea was that players would be able to recognize their friends without the names, and the picture was enough to convey the sense that you were playing along with other human players. The final change from the last comp was the rethinking of the Revive hearts, Move Arrow, and Reveal Letter buttons. The old way of having a circular button next to the explanatory text was far too space-hungry to fit comfortably amongst the other screen elements. They retained their circular shape while being absorbed into a larger rectangular button along with the text. This saved space and allowed the buttons to be a more comfortable size for pressing on a mobile device. The main problem with this design was the abundance of wasted space around the buttons and the puzzle picture, which was counteracting our efforts to save space with the rest of the design.