Research + Wireframes
I first researched the original Facebook game in order to pinpoint key features of the existing UI for our mobile port of the game. This included changing the user flow when separating content into multiple screens to maintain legibility and communicate information in a clear manner. I collaborated with producers and game designers to wireframe new and improved UI to streamline engaging gameplay.
I set the look and feel of the mobile version of the game including new buttons and font colors and size and documented it in company confluence to share with designers and engineers on the project. This allowed mockups to be done by multiple designers while keeping a consistent style as well as giving engineers a quick guide to how things should be implemented.
Mockups + Iterations
I was responsible for mocking up multiple features of the game, including all the screens and user flows related to each feature so that it is clear to the engineers how a feature should work. During this process, I would work closely with producers and game designers to iterate on mockups to find the optimal design solutions. Potential employers may inquire to view more design iterations of the features in this game.
Often times there is a lot of back and forth between designers and engineers and a lot of time lost on getting the implemented game to match the mockups. I led the effort to polish the game efficiently by getting access to and learning the programs necessary to do so. This involved my working in the visual editor of XCode and CocosBuilder to directly polish the final product.
After Gardens of Time had been released for about a year on mobile, I took the initiative to prioritize the revamping of Gardens of Time's user interface. Till that point, the mobile version of the game was taking elements from the Facebook version of the game which meant that the UI was not optimized for mobile. The following are some insights on mobile UI that drive my design.
Bigger + Brighter
One of the biggest faults with the old UI was that everything was very small and too dark for a social game on a mobile device. Therefore one of the first improvements made was to make all interactable elements bigger and the color theme brighter. The example shown here is for the iPad version of the game.
In addition to making the buttons bigger and brighter, it was also important to improve the legibility of the text. I needed to keep in mind the many devices we are supporting to make sure the font is easy to read. This included both retina and non-retina iPhone and iPad.
Often times, new features are added at a later date after the game has already been launched. Therefore, when I designed new features, I maintained a consistent style by drawing similar graphic elements and user flow from other parts of the game. At the same time, I made it look different enough to stand out on its own.
One of the most exciting and fun parts of design is getting the chance to work on vastly different visual styles and incorporating that into the new mobile UI. For Animal Kingdom, using a compass as the menu button is an example of how I made the UI feel like it's part of the world, rather than just a button overlaid on top of a game. I enjoy creating UI that immerses the user in the game as much as possible.
I used Adobe Flash to demonstrate how I wanted a certain effect to look like so that it'd be easier for the engineers. In this example, I wanted an overlay on the image when the user has selected an object to move. I provided information on what color, opacity, and timing should be to assist engineers with their implementation.
One challenge universal to porting games like these was in communicating large amounts of information in a small iPhone screen. Knowing how to take advantage of the natural gestures users have learned from using iPhones was key in figuring out how to include more information without cluttering the screen.
Taking a game from start to end, I was also responsible for the mockups. For each new feature, after the research step and wireframing step, I mocked up each step of the user experience to present to the project managers or game designers for iteration and improvement or approval.
Blackwood & Bell, like all the other Facebook games that I have ported, are from the other game teams within the company. Cross-team communication was necessary in order to organize all the necessary assets. I collaborated directly with the UI designer from the web team to create the new mobile UI.
Bundle size of the applications are always something to consider when making apps. One way to reduce file size is to use 9-sliced assets when possible, but occasionally, there are too many painted textures to scale, so I set three sizes of popups in order to achieve a consistent UI.
Blackwood & Bell was developed using the existing Gardens of Time code with several new features. In order to meet aggressive timelines associated with game production, I efficiently replaced the assets from Gardens of Time with those of Blackwood & Bell to minimize the amount of work necessary for the engineers.
As part of the first team in the company to work on the mobile platform, I realized that our assets for the Facebook game were not large enough to support the iPad3's retina screen. I communicated this to the rest of the teams for future projects and by reaching out to the UI artists on the Facebook game teams, I was able to organize a rapid upscaling of the assets.
Year of the Horse illustration.
Concept art for original story.
Costume design & environment study.
Mood & lighting piece.
Cel-shaded illustration with perspective practice.
Year of the Dragon illustration.
Quick caricature rendering.