A strategic battle game
From July 2017 to late that year, I worked on my favourite project so far. It was my internship year in MOBGEN, and I had the task to reimagine a classical boardgame into a mobile app.
We were four members in total, most of us with little professional experience in mobile development. The challenge was quite intimidating, and we had a around six months to accomplish a functional app.
As the only designer in the project, I had the responsibility for strategising, ideating, defining and designing the final deliverables of the product for iOS and Android.
Our team worked in scrum, and we set ourselves the sprint goals to accomplish. We had an incredible support from our senior colleagues, who guided us through the whole process.
What is Astutia
Astutia is the app remake of the classical board game Diplomacy. The game is set in the midst of the WWI. The player uses their intellect and ingenious in this strategic game. You win by conquering other player’s territories. The fun part is that each one of your opponents can be either your ally or your enemy.
As you can see the original game is quite complex with multiple rules and conditions to establish the battle environment. The complicated task was being true to the foundation of the game and adapting it to mobile phone users and their trends. You see, the game was intended to be played by former players and new ones, just introduced to the game through the app.
These were our objectives and goals, that we had in mind and referred to when challenging tricky UX problems.
Interface wireframes and sketches
The process began with a team ideation of the scope and architecture of the app. How much we wanted to achieve in the first release, and what could be out of scope for future improvements.
The app consisted of a main dashboard, where you could see the open games you were currently playing and some stats. From here you could either create more games or join them. Also, you could obviously open one your current games and go the game scenario. Here players had different actions to do depending on the season. These actions were played on the main view of the map. Then, they could tap or swipe to check the game and players stats or go to the internal chat. In the chat you could message all participants in the main channel or send private messages to the other players. Here is were the alliances and betrayals were plotted, and the heart of the game was: in your astute in the diplomacy.
Play carousel to see more
Early sketches and inspirations
I saw inspiration for the project in many other successful app games, also in movies, books and 3d art.
The visual and aesthetics were a huge part of the experience of the game. I wanted to challenge the traditional boardgame style but at the same time, create something appealing to this public, something they could relate to and admire.
So, the process began with endless sketches and ideation. In these you will see great influence from games like Monument Valley, Alto’s Adventure, Journey and even Pokemon Go.
Play carousel to see more
User experience at the core of development
As we developed the different flows, we discovered many details we had not accounted for. What happens if the user does this…? Where do you go when tapping there…?
Each diplomacy, retreat, and build phase had their considerations are required the user to make different actions that they needed guidance for.
Of course, this was not an easy task. For instance, the flow of assigning actions to your units during Diplomacy. We specially pushed ourselves in this case.
The original game did not guide or help the user in making the complex combinations for issuing actions. If you were wrong and the move was wrong or impossible, you’d find out in the next phase ‘retreat’. We considered this a really ineffective and frustrating experience for anyone.
So, we planned ways on how to improve this. As you are assigning the action, you will see a menu bellow with the steps remaining, as guidance. Only the available regions besides that unit will be highlighted for you (big deal, and not as easy as it sounds to implement) and then you would choose your means to get there and done! the action is confirmed an assigned, your unit gets a little action icon as a visual cue.
Aesthetics and experience became especially connected
As the game scenario and flows became more and more refined, I had more slack to focus on the aesthetics and user interface.
The interfaces became very minimal and almost transparent-like (very inspired by iOS). I wanted the main illustrations and visuals to maintain a coherent theme and story, and always standout in the flow.
These illustrations were in 2D and made in illustrator, and yet I pushed to gave them a realistic feeling and subtle 3D feeling. I was very inspired by low-poly renders and minimal gradients in indie games. They seem really minimal, and yet they show enough to let the user fill in the gaps with their imagination.
Animations and transitions were key to the game. When designing the final interface for the dashboard, I thought of it more as a whole experience and the different screen connected as a whole and the animations were just part of that interaction. I designed the experience animated, rather than making still refined screens and then thinking of the transitions. This made a huge difference in the final result, and was something the whole team pushed to achieve as we firmly believed it made a whole of a difference to the end user.
Parallax transition from homepage to game
Splash screen and login
Before going live, at the end of our internships, we planned some testing to find potential bugs and UX improvements.
The app was released internally in the company first. We prepared channels, feedback forms, game campaigns/challenges , etc. to encourage the company to join us and improve the game.
Some very insightful feedback was gathered and some of the resonating learnings were:
- Additional tutorials/onboarding was needed for the first user to understand the complex game rules.
- At first, some of the users did not understand that your game is ‘pending/blocked’ until 7 players join you and fill up all the available slots. The games can only be played with 7 players, and this was not properly highlighted.
- Everyone in the game had to be very engaged to see progress and ‘speed up’ the game. Astutia is a game that requires involvement from the players, to see the game develop and not be blocked.
So, we re-planned and calculated our next steps and improvements. We ideated a better introduction and tutorial screens, as well as a ‘demo game’ to introduce the players to the app ‘live’ as they play. Also, we changed the UI and highlighted the remaining players to join a game, as well as pushing forward opened games with free spots, so users don’t populate the app with new ‘solo’ games created by themselves.
Astutia was my very first ‘real; project in which I worked in a team as a true scrum member. I can only smile and feel extremely proud of this experience and the achievements the team accomplished.
I have gone a long way since then, and I would have done so many things differently. But I would never change how things went, as this experience really shaped me into becoming the professional I am today. I believe I progressed and learnt the most with the team and our support, thanks everyone who were involved!
Next work >