Last October 25th, Black River Studios (BRS) made a soft-launch of Conflict0: Revolution. It’s a turn-based strategy game about a civilian uprising in an island divided by a wall.

In 2017 BRS launched a Tizen version of the same game and in 2018 the studio decided to port it for Android mobiles.

Me and Felipe Cumaru were responsible for evaluating and fixing any issues the previous interface had. While Felipe Cumaru handled the UX and implementation part of the task, I worked on the visuals. The following is a sum of how we worked and what we learned.

FIRST STEPS

First we talked with the whole project team and let everybody give input on what were the main issues the art in the game had (UI, illustrations, animation, FX, etc). We managed to compile a list for all the existent game screens: MENU, CINEMATICS, MAP, MISSION PREVIEW, DEPLOY, DECK, STATS, GAMEPLAY, MISSION REPORT, NEWSPAPER AND 3D COMBAT.

The main issues concerning the UI were:

After pointing all the problems and discussing how we would solve them, we split tasks. While Felipe Cumaru started making wireframes for UX validation, I started thinking on a cohesive art style.

PRE-PRODUCTION

First I revisited the overall art direction of the Tizen version to check a path I could follow while maintaining the essential characteristics of the game. These were the main characteristics I found :

With that in mind I made some research and was drawn to the art of old posters, postcards and flyers. The kind of art broadly known as “ephemera”.

Image 1 - Examples of reference images collected

After collecting some ephemera art examples I redesigned two screens (image 2) to present the other team members and collect their impressions.

Image 2 - First redesign studies

The overall impression was good.

Douglas Nogueira, the project team member responsible for redesigning the game illustrations, pointed out that we could make the UI and game illustrations relate more. Following his advice I redesigned one of the screens again and came to the following result:

Image 3 - Looking for a better relation between UI and game illustrations

The impressions were better than the previous, so I decided to sum up the art direction we were taking as follows:

Having a clear direction in mind I started thumbnailing all the game screens, pointing out possible UX problems and making design suggestions for a better experience. As I would finish sketching a screen I would show Felipe Cumaru and the game designers to make sure we had all the game experience covered.

At this point it was decided that we would target devices from Samsung Galaxy J5 up to Samsung Galaxy S9. Since the aspect ratio of the screens is different, we had to design the screens so the sides could be cropped with no loss of information.

This is the final version of the screens thumbnails:

Image 4 – Screen thumbnails

As the screen thumbnails evolved, we realized we could cut some screens and simplify the experience. From 12 screens we ended up with 8 : MENU, CINEMATICS, MAP, MISSION PREVIEW, DEPLOY, INFORMATION, GAMEPLAY and MISSION REPORT.

Since I was the only one responsible for making the UI art and our time budget was small, I didn’t make a full UI art bible. Instead I made a very concise image with all the information I needed, focusing on color palettes.

Image 5 – color guidelines

PRODUCTION

As pretty much everything was decided in pre-production, the production was very straight forward. Some adjustments had to be made during implementation, but since we had a very solid approach we could easily overcome the UI art alterations.

  

  

  

  

  

  

  

  
Image 6 – a collection of screens designed in photoshop

I also made some animations to be used as guidelines, icons and character portraits.

Image 7 – a sample of the icons and character portraits created for the game.

FINAL THOUGHTS

If I were to summarize a couple of important points for this project, they would be:

If you have any doubt or would like me to go deeper in any aspect of this post, write me a message or comment bellow.

Thanks!