Mr Autofire

Mobile game project where I helped Lightheart get their game ready for soft launch with a goal of creating systems and assets that can be easily expanded on and used in future projects. My focus was on UX, UI design and visuals, and front-end development in Unity game engine.

The game can be found in the Apple App Store and Google Play Store in Finland and the US.

My Role

UX
UI
Graphic design

Undisclosed project

A mobile game project together with Next Games based on a well known movie franchise. I worked as the only UX designer during pre-production and during production as the product owner for the meta design team.

Due to the project being cancelled before launch, I cannot share the project IP or any visuals hinting to the IP. This study focuses on the process we used during pre-production.

My Role

Product Owner
UX
UI

Challenge

Creating a long lasting mobile game based on a well known movie franchise that would appeal to both franchise fans as well as gamers.

Pre-Production

The scale of the planned project was large for a mobile game, which is why we wanted to spend more effort in pre-production before spending a lot of resources on production. The goal of pre-production was to research, understand, explore and test in order to create a solid product strategy and minimise as many risks as possible before investing into full scale production.

We started the pre-production phase from a game prototype that featured the basic core gameplay elements that were accepted by the IP owner as a starting point for more in-depth design. Since we already had a prototype to start with we wanted to validate the prototype with potential users as soon as possible.

We were dealing with a well known movie franchise, so we also wanted to get a good understanding of the current state of the franchise movies as well as potential users. Personally I started by doing background research on all of the movies in the franchise, the main cast, fanbase activity on the internet as well as several reference and competitor games. I wanted to make my own assumptions before jumping into the users shoes.

Focus group testing

Users tend to have strong existing expectations and assumptions when dealing with a well known IP. We conducted a focus group test at the beginning of pre-production to find out if our own expectations and assumptions matched those of the potential users. Subjects were selected from three different groups of people. The first group was made up of fans of the movie franchise. The second and the third group were made up of gamers, specifically fans of two different genres that we considered relevant to the game we were making.

The style of the movies had changed quite a lot from the first instalment to the last one, which we took into account when selecting subjects for the test. We made sure that they had seen at least the latest movie in the franchise.

What we wanted to find out during the tests:

  • Expectations about a game based on this movie franchise
  • Best visual style direction based on examples (stylised to realistic)
  • Importance of incorporating movie cast into the game

The game prototype was shown at the end to see reactions versus expectations.

Focus group findings

Our assumptions were that our prototype would not be a direct match to users’ expectations of gameplay, but that it would be well fitting to the more recent direction the movies had taken. This new direction is also what the IP owner wanted the game to focus on. The test revealed that the expectations for gameplay were indeed quite different from our prototype. Many fans still affiliated the movie franchise with the style of the earlier movies that had a different style to them. As a positive note, many users found the prototype gameplay interesting even though it did not match their original expectation.

An additional finding was that getting the actual cast integrated as a core part into the game was one of the most important parts of making the game feel part of the movie universe. This was not a big surprice since in this movie franchise the cast and their relationships are key drivers. This became very clear when users reacted positively every time they saw cast members shown inside the prototype. Basically, we could not create a great experience without integrating the movie cast as a major part in the game.

Personas and design pillars

Based on the focus group findings, data gotten from the IP owner and gamer motivation data from Quantic Foundry, we created three simple user personas to help us focus our design. One representing a movie fan and one for each target gamer group. These were created in a workshop together with the team mainly to gather the expectations and motivations of our target audience to a format that everyone can understand.

We also created design pillars to serve as a foundation for decision making. This was done to give us concrete goals, preferences and constraints to direct future design and prioritisation decisions.

Design system

At this point we had enough information to start diving deeper into design. We had a plan of ramping up the team after pre-production with additional help for ui design and development. To make working on the project easier for all people involved I started collecting together design principles and guidelines to for a basis for a simple a design system. The goal was to make a live system that would be updated whenever needed consisting of guidelines, assets and examples of use.

The focus of the design system at this point was in UX guidelines based on the research data, Human Interface Guidelines from Apple and Material Design from Google. I included information about clear and consistent design, interaction, feedback, role of animation and motion in the project, layout guidelines, information about navigation as well as font sizes.

Layout guidelines

Later on we built on top of these guidelines by creating a Sketch library for visual assets as well as in-engine (Unity 3D) elements.

Exploration

During the discovery and research we already started exploring with design. Starting from high level (Site map and core loop user flows ) and moving towards finer details (Flow chart with screen wireframes). These designs were then used to start creation of game features.

High level sitemapTo make a long lasting game, in addition to fun second to second gameplay the user needs both short term and long term goals. For us this meant starting the design process with flows on getting into core gameplay, getting new characters and upgrading the characters. Getting into action easily and quickly is especially important in mobile games, since games need to work in very short sessions for example while waiting on a bus stop. Getting new characters/equipment as rewards and upgrading them was one of the ways we wanted to provide short term and long term goals for the user as well as the sense of progression within the game. User goals and sense of progression are essential for retention in the type of game we were making.

Core loop user flow explorationWireframes

Production

At this point we moved into the production phase which meant ramping up the team size and moving into feature development. There were certain tasks that in my opinion should have been done during the pre-production phase but were delayed due to reasons we could not affect. For example the visual branding of the product was done too late in the project. This led to our UI designer having to redo designs multiple times due to changes in the visual branding of the product. There were also some gameplay related discussions that weren’t finalised during pre-production that came to bite us in the ass later on during production.

Improvements for future

I would add more continous testing throughout the process. Focus goups are a great way of finding the right starting point and for creating hypotheses. However it alone is not enough to validate these hepotheses. This is where shorter design iterations and testing cycles would have been a great addition.

Project Nitro

Mobile game project where I worked on UX concepting, prototyping, UI visuals and design, and front-end development in Unity game engine.

My Role

UX
UI
Graphic design

Reforged Studios Visual Identity

Visual identity for Reforged Studios, including logo design, typography, colors, website, slide templates as well as visual guidelines.

My Role

Logo design
Visual identity
Graphic design
Web design

The Walking Dead: No Man's Land

Worked as a consultant for Next Games on a live mobile game The Walking Dead: No Man's Land.

My role included UX and UI design of a new game mode to re-engage veteran players and increase the importance of a wide character roster. I also started UX and UI design on a guild game mode that was released.

My Role

UX
UI

Metro Ticket UI

A concept UI-design for a metro ticket purchase machine with a touch screen interface.

My Role

UI
Graphic design

VirtualLawyer

An online legal database containing over 1500 free articles with an option to puchase contract templates for a monthly fee.

I was responsible for the visual design and co-operated in the UI-designs.

My Role

UX
UI
Web design

Kanava

Logo designs and business card concept for Kanava. In the end, none of these designs were chosen but they led to the final design.

My Role

Graphic design
Logo design
Visual identity

Magazine add

A half page magazine add, which was displayed on the back cover of Kauppalehti's Innovation supplement.

I was responsible for the all of the visual design from creating the clock mechanism (designed in Illustrator and rendered in Photoshop) to designing the actual add.

My Role

Graphic design

Fondia business card

New business card design for Fondia. I was responsible for bringing a new, more modern, look and feel to the text side of the business card.

I also designed the visual look of the new company slogan.

My Role

Graphic design
Visual identity

The Stag

This design was created for my friends stag party. Inspiration for the logo came from my friend's interest in motorsports. So I desided to use the combination of The Stig's helmet with horns growing out of it.

The stag got a red shirt with his own design while the rest of us wore black shirts with the design on the right.

My Role

Graphic design

Slush14

Giveaway designs to be used at Slush14.

My responsibility was the visual design of this two-sided card.

My Role

Graphic design

Valentine's day

A design for a Valentine's Day card that was sent to our customers.

For this design I was responsible for everything from the text to the overall look and feel.

My Role

Graphic design

Fondia 10

I designed this set of balloons to be used during the 10th anniversary year of Fondia. They were used in different places ranging from wallpaper to take-away coffee cups and stickers.

My Role

Graphic design

Company presentation

A complete visual upgrade to an already existing short version of Fondia's PowerPoint presentation.

On this project I was responsible for everything visual from the icons and graphics to the overall visual style and layout.

My Role

Graphic design
Visual identity

Jazz invitation

Invitation created to promote an event for clients held during the April Jazz festival in Espoo, Finland.

The April Jazz logo and a plain version of the image used at the top of the page were provided material. The look and feel incorporated into the invitation is strongly influenced by the image of the April Jazz festival.

My Role

Graphic design

Slush13

T-shirt and giveaway designs to be used at Slush13.

My responsibility was to come up with a new version of the company's logo to suit the slush theme, and design a t-shirt and campaign giveaway cards using the new logo.

The concept was to stand out in the crowd. The venue at slush is quite dark, so the shirt was printed using a glow-in-the-dark material.

My Role

Graphic design
Logo design
Visual identity

Event site

This was a single page site designed to promote an event held in 2013.

My Role

Web design

Gaming Event

Brochure, banner and PowerPoint template created for an event focused for new gaming companies in Finland.

In addition to the design I also took the photograph needed for the work.

My Role

Graphic design
Photography

Online tools

Brochures designed to showcase Fondia's online SaaS products ranging from board collaboration tools and contract archives to eLearning environments.

My Role

Graphic design
Photography

Training materials

Book covers and a brochure designed for legal training material.

My Role

Graphic design

Menu stand

A 3-sided standing brochure to showcase Fondia's services to vsiting customers and potential new customers.

My Role

Graphic design

Sketch templates

I created some A4 size templates to help me with sketching design ideas for web and mobile.

My Role

Web design
Graphic design

Wireframe gear

Just had some fun with Illustrator and created a wireframe of some of my gear.

My Role

Graphic design

Skull

I have been interested in concept art for as long as I can remember and recently got into digital painting and sketching.

This was my first ever attempt at a still life style where I painted a skull from reference. It still requires a lot of detailing, but my focus was on values and overall shapes.

My Role

Photoshop
Digital painting