Here's how I applied the five W's and one H to this screen.The What : This screen needs to serve as a central hub for the entire game. It should show the player their current collection of puzzle packs, allow the player to select a pack and puzzle to play. It should connect to the puzzle selection popup so players can select their puzzle play options (piece selection, rotation etc.). It should display information about the puzzle packs, their description, title and cost. Players should be able to access the global charm store, settings menu and keep track of their current charm amount. There should also be a system for keeping track of puzzles a player has completed or is currently playing.The Who : For this game we knew our demographic would skew older so I wanted to emphasize simpler interfaces with larger font sizes and accessible tools. I didn’t want to isolate younger demographics with my choices, so I needed to make sure everything still felt stylish and seamless for more universal appeal.The When : This is the first screen after the splash that we see in game. It serves as the launch point for all of our game interactions. Therefore it is going to need to allow for several other popups to layer on top of it, and seamlessly connect to the gameplay screens.Where : This is the beginning of the game, so it needs to feel welcoming and exciting. The player should feel like there are endless opportunities to explore. I realized here that I wanted the puzzle art to be very prominent on these screens the further entice the player to tap new puzzles.Why : Players are most likely using the screen to select a puzzle to play. They want to sift through lots of information and possibilities and select their favorite choice to play.How : I studied a lot of other mobile games and how they presented their content. I noticed a lot of the top competitors had very organized libraries to access each of their puzzles, but some of their interfaces lacked a consistent style or unifying theme.At this point in the process I also took the wireframes and mocked up how this screen would transition to other parts of the game. I also sketched out different states for this screen. It’s always important when designing UI to think 4-5 steps ahead of the part you are currently designing, so it all flows naturally together. Never design in a vacuum!
I like to ensure that my designs are as user forward as possible so I took these designs and built several prototype versions so I could get them in front of users as soon as possible. After conducting several user tests and getting some feedback on designs we decided that the first menu style was the most promising. Personally I was a fan of this design because it emphasized a vertical display of information that allowed the users eye to travel down the screen, collecting information as they went. This helped my influence my decision to have a drop down “drawer” for displaying the different puzzles that made up a pack.This is where the UI Artist aspect of my job kicked in. I started thinking about the "flavor" of our UI. As a team we decided that our game should have a library sort of feel as it is a collection of stories and puzzles. I translated this into the UI Art by determining we should have a paper/book theme. I looked at a lot of pictures of books, paper textures and UI Art for other literary games. Then I began taking my layouts and beautifying them. Eventually as a team we determined we liked this menu design and presented it for company feedback.
After getting company feedback and reflecting a bit more on this first pass, I realized there were a lot of things I could do to improve the menu design. So back to the drawing board I went. And eventually we ended up here!
While I loved the tactile feeling of the textured edges of the first design, they made the pack buttons feel messy, and they did not fit well together. I went for more clear cut shapes, which were more organized and then applied a texture overlay to keep the tactile paper feel. Originally I thought the tab layout would be good for our older audience, since all the information would be upfront and available for the user. However having tabs created a whole new slew of problems in organizing data when we had more than three categories of puzzle. So I did away with the tab system and went with a swipe filtering system. Finally I toned down the colors to use a darker background with lighter accents, which felt more mature and luxurious versus our original menu layout which skewed a little younger. The final result was definitely something I felt satisfied about. It looked great on device too!
Almost there! As a UI Designer and Artist I absolutely love motion - honestly I could write a whole other blog post on the importance of motion in UI design. But lets save that for another day. Not only does animation make the whole system look a lot more polished it also can educate the user on the function of certain elements. I always like to do a couple motion passes to demonstrate how I, as the designer, want screen elements to move together. They also help to clearly convey my ideas to the programmers and rest of the team so we are all on the same page!
Finally programming gets all of my mockups and notes and begins implementing my dream UI. I help by adjusting placements in Unity and implementing some of the smaller stuff if they have too much on their plates. I also answer any and all questions they may have about certain elements.Once its in game its time for another lengthy round of playtesting and usability testing. I determine the best type of testing needed for the situation and structure the tests according to premeditated guidelines. During the tests I take lots of notes on how I can make the experience better for our users and tweak things until it feels just right!And after all that it is done right? One super cool menu that is hopefully focused, feeling, flavorful and overall functional! But don’t get too comfortable. One thing about the field of user experience is it is always growing and changing. And since our development cycle is largely agile, I am always looking for opportunities to go back and improve things as we add new features to Puzzlescapes. For example, I just used that same process to redesign the Puzzle Selection popup you can see in the above gif. And next week I am going to be using my process to design a storefront, reworked menu and possibly a whole new game.*Sigh* My work is never done. Its probably a good thing I love doing it!