As part of Gameloft's hiring process, I was required to quickly come up with a user flow, interface and experience for a mobile 3rd person shooter - all within 7 days. This project was to illustrate my abilities to quickly render out an elaborate UI system flow within a short amount of time, and also demonstrate my abilities to logically create an engaging UX menu. The real challenge was picking the game to base this off of.

To start, I found one of my favorite first person shooter games and brought it onto a mobile platform. The game I chose was Battlefield 4 developed by EA Games. 

One of the reasons I loved the Battlefield franchise was for it's art direction, and graphic design, and overall UX. The UX and UI of the game was fantastic on the desktop platform and felt immersive and interactive - capturing the look and feel of a spec-ops soldier's computer. The distinct colours schemes that EA used in this game made it instantly recognizable without any text indicators. As you can see in some of the images below, the themes used are often a combination of cold and warm colours. The themes are also seen in the menus of the game.

As I only had 7 days to complete this challenge, I had to clearly define what each day was used for and set goals for myself to make proper use of the time. The first few days were for planning, research and to consume what the brief was asking for - as well as to complete the other items on the challenge. Once that phase was done, it was time to create some wire frames and start banging out the final UI for the remainder of the week.

The first level of menu items were predetermined by the brief, and my challenge was to take that further and deeper into several subsets of the overarching menu - and ultimately create a tutorial to guiding a novice user through the menus. 

The menus were clean, and the composition of the screen was often split 50/50 - where there's information that start from the left and results on the right or have items side by side that both display simultaneous information. The whole UI adopts a flat UI, with parallax in some instances (such as in game, or load out screens). 

I like to lay out how each page would look first, as well as generate flows as I go. The image above is the preliminary user flow, while the final version ranged from the landing page to the actual game play!

After mapping everything out, I jumped straight into the UI and started designing. Again, I tried to stick to the theme and art direction that Battlefield had and translate it to a mobile game - while adhering to iOS design guidelines. As I built the menu, the items became more and more elaborate and I would have to go into detail for each menu item - character selection, loadout, weapon selection, map selection, and spawn location to name a few. 

As you can see, I stuck to the symmetrical layout that Battlefield had in the desktop version. It helped categorize information in a logical way that made sense to the user as the user would often times read from left to right.