Project: Football Manager Game
Year: 2014-2016
Description: The goal of this project was to create a casual Football Manager Game for mobile devices. During the two years I was the UX lead within the team responsible for research, interaction design, visual design, prototyping, testing and quality assurance (QA).
Deliverables: Research, Interaction Design, Visual Design, Prototyping, Testing, QA

Timeline

Image: timeline of the 23 month I worked on the project

I started working on the interaction design and visual design of the game directly after the research and definement stage was completed. This was also the time when I created the first simple prototypes to test my ideas with users. When the final implementation of the game started I set up an online styleguide which included i.a. the documentation of the interaction design and visual design of the different parts of the game.

Phases

Image: different phase of our ux design process

Each of the six stages of our UX process contained different parts. In the research stage we did market and target audience research, created personas and analysed our competitors. In the definement stage I defined our interaction and visual design pillars and created the information architecture. In the ideation stage I worked constantly on the flows for the different parts of the game and designed the first visual drafts. To test our ideas with users I built lots of low and high-fidelity prototypes. When the game was actually implemented I tested directly with the game. More than 90% of our tests were in-person tests but we also used remote-testing to test e.g. the tutorial of our game. From the very beginning I used flow documents to document the different concepts and user flows. These flow documents, the online styleguide and our regularly quality checks helped us to maintain a high quality level.

Research

Images: market research (left), persona creation (middle), competitor analysis (right)

In the research stage we started with market and target audience research. The market research was important to gain information about the competitors and genre and the target audience research helped us to get into our users brain. For the target audience research we set up an online survey to get answers to questions like „How old are our users?“. Afterwards we conducted interviews to get detailed information about the needs and behavior of our users. Based on these information we created personas. Afterwards I analysed our competitors regarding their navigation structure and visual design to figure out what we can adopt, improve or make different.

Definement

Images: interaction design pillars (left), visual design pillars (middle), information architecture (right)

Based on the findings from the previous stage I defined the interaction design pillars of our game. These pillars described the behaviour of our UI. The visual design pillars were based on the outcome of the design workshop I prepared and conducted with users before. These six adjectives described the look & feel of our UI. Afterwards I created the information architecture of our game.

Ideation

Images: concept sketches for the main menu

Images: wireframes based on the sketches for the main menu

Images: wireframes for the main menu (top), wireframes of the different views of the game (bottom)

I started with lots of sketches for the main navigation based on our interaction design pillars. Afterwards I designed the first flows, created simple prototypes and tested the concepts with users. For me it was very important to test these concepts as early as possible and also directly on the device. After the main navigation and basic structure of the ui was defined I worked on the different features of the game.

Images: splashscreen, dashboard and main menu in three versions

Images: user feedback from the usability/acceptence test

Images: analysis of the feedback (left), result of the test (right)

Based on our visual design pillars and the outcome of the competitor analysis I created the visuals for the first iteration stages of our visual design process. Above you can see three visual design directions of the second stage. I designed different versions of the splash screen, the dashboard and the navigation. Afterwards I tested these versions with reference to our visual design pillars and collected feedback from our users. The result was that one version performed best in terms of visual design and the other version performed best in terms of navigation style. Finally we decided to combine both versions in the next iteration stage.

Prototyping

Images: screenshot of Flinto Lite (left), screenshot of Flinto 4 Mac (middle), screenshot of After Effects (right)

As I already mentioned I started with prototyping directly after I worked on first interaction concepts. For low-fidelity prototypes I used Flinto Lite which is an easy to use but also very basic online prototyping tool. For more complex prototypes with animated layers and specific transitions I used Flinto for Mac or After Effects.

Low-Fidelity (interactive)	Hi-Fidelity (interactive)	Hi-Fidelity (visual)
For simple prototypes I used Flinto Lite which is an easy to use online prototyping tool where one can link screens together and add some basic transitions.	For more complex prototypes I used Flinto 4 Mac which is a layer based prototyping tool where one can create custom animations and transitions. One can also define different gestures and scrolling options.	For prototypes to showcase more complex animations or transitions I used Adobe After Effects which is a visual effects, motion graphics, and compositing application.

Testing

Images: photo of an in-person test (left), screenshot of the remote testing tool (right)

Images: screenshot of the testing guide (left), user feedback (middle), screenshot of the analysis document (right)

During the two years of the project I prepared and conducted more than 35 in-person tests with 4 to 8 users per session. Beside that we also used remote testing to test e.g. the tutorial of our game. For each in-person test I prepared a testing guide to identify the critical issues of the concept and to make sure that the results of the tests are comparable. I also collected general feedback from our users and put all the findings into a spreadsheet. That made it easier to identify the critical issues. Afterwards I prioritized the problems, created actions and discussed the feedback with the team.

QA (Quality Assurance)

Images: example of a flow document (left), example of a styleguide page (middle), screenshot of the quality check document (right)

When I started working on this project the team was pretty small (two game designers, one front-end developer, one ux designer). Within the two years the team grew up to a team size of 13 members of different professions, the game got more complex and it became more and more important to set up a proper documentation for the different parts of the game. From the very beginning I created flow documents for the different features of the game. These flow documents included all occurring user flows and also detailed information about the certain feature. When the final implementation of the game started I set up an online styleguide which included detailed information about the interaction design (structure, flows) and visual design (coloring, dimensioning, animations) of the different screens and ui components. To ensure that the game was actually implemented the way it was specified in the styleguide we did regularly quality checks. For that I set up an ongoing QA document where all issues were listed, described, categorized and prioritized.