Hello
Guerrilla Games!
In this page you can see a brief showcase of my UX and UI work in games. I also say a few things about me and why I would like to work with you.
In this page you can see a brief showcase of my UX and UI work in games. I also say a few things about me and why I would like to work with you.
I am Stratos Tzanavaris, a designer based in Amsterdam and the co-founder of Bomburo. Nice to meet you!
I've been a gamer since childhood and my most memorable Christmas holidays were when I got a bulky Xbox as a present with Halo and Jet Set Radio inside the box.
Nowadays I find double joy in playing games, both as a gamer but also as a game creator, having acquired a deeper appreciation for the artistry and love that teams put in their games.
I would like to get the chance to work with Guerrilla Games because I've heard great things about the company culture and your approach to making games and I feel that my skills could combine really well with the expertise and talent of the Guerrilla people.
In this page I present samples of my work which was done in collaboration with a team of talented writers, designers and developers but the examples of UI & UX presented are my own. The background art and character art of the examples is done by game artists. For a comprehensive list of the artists please see these credits.
Since 2009 I've worked as a web designer and animator and in 2016 I started working on serious mobile games doing game design, UI and UX, animation, as well as asset implementation and development in Unity.
Besides my client work I'm also working on personal game projects in my free time, designing, animating and coding as a way to keep learning and challenging myself.
As a UI designer I created and was involved in implementing UI systems inside Unity. Besides the implementation of assets I also contributed in code by creating interactions and animations, in-game tutorials, visual effects, several core game mechanics and iterating on level design and bug fixes.
As a UX designer I created detailed flowcharts of every functional aspect of our games as a way to create a unified visual representation of the game systems and user flow for the whole team to align with. I also created interactive mobile prototypes in the early stages of development that helped me gather player feedback and iterate on game design and user flow before the actual coding work had begun.
Additionally I've created user journeys to map the way players and users interact with the game systems and onboarding processes. That helped us improve those processes and share a common vision across the team.
As a game designer I created sketches and prototypes of game levels and puzzles, written and maintained game design documents, functional requirements lists and artists' briefs. I also created simulated versions of the games' progression systems in spreadsheets to test game design assumptions and to provide our developers with indicative numbers on important system variables to build on.
For the Secrets of Arabia Felix I designed all the UI elements, the user flow, UI animations and in-game cutscenes and visual effects.
Before the brief for the art direction was defined, I started working on some early UX prototypes with placeholder art, sketches and UI that I created. Below are a few examples.
This is the character creation panel, which was placed on the right side of the screen because our main language and audience was Arabic and the text would eventually be in a right-to-left direction. While I was working in English, I constantly tested the UI in Arabic and double checked with our consultants in Yemen. The gender selection was later replaced by character portraits.
Next are a few different ways to treat in-game dialogue, depending on whether the player was interacting with it or not.
Finally, an early layout and interaction for the main menu and the transition into the gameplay.
The game takes place in a fictional city of Yemen and it was important for the look and feel to be authentic Yemeni. For the UI I drew inspiration from traditional Yemeni architecture and the distinct patterns in the handcrafted belt of the ubiquitous Janbiya knife.
Since we are dealing with a kind of dark, scary story for young adults, I created a more mature and ominous palette and style.
The Google Play icons' composition, the game logo, inventory, in-game icons and buttons were created by me. The background artwork, the inventory items and the character artwork were done by the game artist following my sketches and art direction.
The background on the start screen is black and white. It fades into colour once the player presses the start button and the camera starts panning down to the city.
The settings panel. The language switcher is shown in the respective languages to accommodate players who might not be familiar with English, as was a requirement in the brief. Also we are not using country flags to minimise any political implications within the sensitive context of a country in civil war.
The final character creation panel. Instead of gender choice we have the two portraits of the protagonists. The player can choose a traditional or a modern outfit, to accommodate players with different cultural preferences within Yemen.
The use of icons instead of text was considered as a way to make the game more approachable for players with difficulties reading. In the end due to the narrative driven nature of the game we ended up having text based dialogues.
CWTL Ukraine is a digital learning platform created to ensure Ukrainian children have continued access to education. Initially launched as an emergency response to the outbreak of war, the app has since evolved into a comprehensive companion tool that supports students and teachers in following the official curriculum.
In this project, I led the game design and UX/UI design. My aim was to create a cohesive experience across the game that served both players and teachers. I developed a design system using atomic design principles and I implemented the UI designs in Unity.
An interesting way I approached implementation was to create a Unity component that replicated Figma’s variant functionality. By attaching this single component to any button element, I could easily switch between all design variations for buttons and icons, ensuring consistent implementation throughout the game.
The game's UI is divided in two areas, the teacher facing administration screens and the player facing game screens. Below are a few examples of the player facing designs for the Reading section of the game.
I paid special attention to accessibility here, creating interfaces that don’t require high motor coordination, cognitive ability, visual and hearing strength. Interactive elements and drop zones are large, things that can be pressed look like buttons and things that can be dragged look like flat tiles.
Some of my work in the game included creating prototypes for the game puzzles, UI animations and visual effects. Here are a few examples:
Animated cursor
Designing and implementing an animated cursor for the player's navigation. The problem that I was solving here was that it wasn't obvious to the players whether a tap was detected and without visual feedback, navigation didn't feel so good. An animated cursor, still visible behind the player's finger made walking around feel more fun.
Puzzle prototype
Two approaches for prototyping the same puzzle. Animated and paper prototypes helped us test the functionality before coding it. The aim of this puzzle is to make the players think about the difficulties of communication in a multicultural, crisis affected community.
Visual effects
Design and implementation of visual effects inside Unity to make the world feel more alive and magical.
UI animation
Prototype of a reward animation in After Effects.
Below are some examples of the UX work I have done in the past. This is work I really enjoy doing because it combines two elements that I find fascinating.
The first is to organise large amounts of, sometimes chaotic, information about the game's mechanics, storytelling, business goals and technical constraints and creating a clear documentation in the form of flowcharts and trees that act as reference for developers and designers.
The second is putting all the above together, while making the interaction as seamless and intuitive for the player as possible. Playtesting and iterating on the user flow is a major part of my process and I tend to do this early with rough interactive prototypes but also later with in-engine changes.
To design the narrative and user flow I am starting from very abstract ideas and milestones in the story and then defining each detail by creating detailed flowcharts, with almost every possible interaction. This, along with detailed lists of functional requirements helps developers and designers focus on building with less back and forth.
I created the flowcharts below for Arwa's World and for Tuba. Since we were working with the same team for both games it was useful to keep a consistent visual language. These flowcharts were a powerful addition to the GDD and the functional requirements that I also created, providing visual explanations for every aspect of the user flow to the developers and the UI designers.
This scary looking flowchart describes the characters and the relationships and affiliations between them for the Secrets of Arabia Felix game.
Some of the character's affiliations were important not only for convincing world building but also for resolving puzzles. This information was shown here to help the developers with a visual aid when building the puzzle mechanics. This was in addition to the more detailed functional requirements.
I animated all the characters and effects for 7 Yemeni serious mobile games. Here you can see a sample of the character's animations that went into the games.
The rigging and animation were done inside Unity. This limited my options in terms of rigging and deformation but saved us processing power and costs, since at the time the tools available were heavier and expensive for the constraints of this project.
This is one of the first games I started making in my free time. It was for me a way to dive deeper into coding and animation for games. The short video below shows some work in progress mechanics and animations.
The screenshot below is from the latest game I'm working on as a solo developer. As the Devils Accountant your job is to combine characters and deeds in order to maximise the amount of sins. In this project I've done the game design, art, code, sfx and animation myself. The game is not published yet but is available to play upon request.
