KILOO

Section one: Mobile game FAQ page design, & creation. Working on designs and content with UX Team.
Section two: Mobile game design process research and establishment of a new solution.

  • Project period: 2021 Aug – 2022 Jan
  • Duration: 6 months

Access the FAQ page here

I was part of the Game Services department at KILOO. The Game Services department has teams of Video Creators, Game Promotions & Marketing, Customer Support, and Communications. I had an opportunity to experience full-time work in the UX/UI field. The tasks that were carried out have been divided between KILOO Games and Kiloo.com.

FAQ PAGE FOR METROLAND

  • Develop UI mockups and prototypes that clearly illustrate how the site functions and looks with site maps to effectively communicate interaction and design ideas.
  • Build page navigation buttons and search fields.
  • Design graphic user interface elements: menus, tabs, and widgets.
  • Execute all visual design stages from concept to final hand-off to engineering.
  • Keep abreast of competitor products and industry trends.

I started with research where I investigated what previous developers did with Subway Surfers FAQ, to make sure that the definition of a FAQ page was clearly outlined, I included all necessary elements to the page and that the users can find everything that they are looking for.

After brainstorming and sketching I designed two interactive mockup prototypes in FIGMA (screenshots on the right). The mockups were tested on my colleagues, to see which mockup had the best engagement, interaction, and flow. Most of the tested users preferred and had a better flow on the website Mockup 1 and by basing it on user testing my supervisor agreed to follow the before mentioned mockup.

FAQ has been made using HTML, CSS, and some JavaScript. I have also made sure the website is Search Engine Optimized.

The website is active and can be found here.

Mockup 1
Mockup 2
New Games

Thumbnail & Screenshot creation

Game thumbnail and screenshots creation and idealization following UX research without having a final game version ready

Boat upgrade
Fish collecting
Player controlled fishing
Sailing navigation

KILOO.COM – My contribution (Project is closed)

  • New category thumbnails for 2.0 website release as when I started working on the project the whole website was changing to a more modern and appealing look. I made 243 new thumbnails by taking into consideration eye-grabbing and attractive visuals based on UX.
  • Thumbnail fixing following the UX guidelines that we set up during the research that I will mention later.
New Games

Icons

Game icon brainstorming, sketching, and creation

App_Icon_cat
App_Icon_General
App_Icon_office
New Games

Instant Games Thumbnails

Different-sized thumbnail creation for Facebook Instant Games. Basing on the effectiveness of small-sized screens, scalability, composition, and perspective

BB_banner
BB_banner2
155x100
bb-cover

MOBILE GAME DESIGN PROCESS RESEARCH – Bachelor project

I got to see UX and UI processes used in mobile games and browser games, and I was involved in game branding, design, and usability testing. I had an opportunity to work with experienced game UX/UI Designers.

The competition in games over the last 10 years has grown rapidly and the library of mobile games has become exceptionally huge. It is therefore more important than ever that game developers focus their resources on the user experience to stand out from the competition, therefore UX/UI research and design are and will be even more important in the future. The mobile game industry is relatively new, so mobile game UX/UI theories and methodologies have not yet been explored and described as broadly as it has in the field of web UX/UI.

Based on the observations above, I was motivated to research how a Web Developer can apply their theoretical education and their knowledge, skills and competencies within Web Development to the mobile game UX/UI design process  by answering the following problem:

“What is the most relevant way a Web Developer can apply their knowledge, skills and competencies of website development to the mobile game UX/UI design process?”

METHODOLOGY

  • Literature reviews: they were based on qualitative and quantitative reviews of articles, books and published texts, where analysis and best practices will be the main objective. Literature choices were based on what methods can be applied to the solution of the problem statement and on knowledge acquired during Web Development studies.
  • Interviews: were done as semi-structured interviews, where the main questions are prepared before the interviews, and additional questions might be asked during the interviews, to clarify the answers.
  • Competitor Analysis: based on a specific Competitor Analysis Framework called GameRefinery. There are several benefits of using Competitor Analysis Frameworks, such as identifying market gaps within an industry, finding market trends and patterns, analyzing effective marketing strategies, and making data more visually appealing.

CONCLUSIONS ON RESEARCH – Conclusions are summarized due to NDA restrictions

  • Interview: the main website used in the game design process is GameRefinery. (Interview also concluded KILOOs strategy in Game Development which will not be shared here)
  • GameRefinery Player Motivations & Archetypes research:  focusing on one or two Player Archetypes will make it easier to make a UI for the game without sacrificing the UX and this also leaves more time to polish the gameplay, since time spent on the development of features will be less. Research shows that focusing on one or two GameRefinery Player Archetypes will reduce the weight of the UI and consequently make sure that the UX is not
    impacted negatively.
  • Goal-Directed Design process: focusing on the users’ needs and goals is very important in UI/UX design. Focus on the games is usually on tasks rather than the user’s needs and goals.
  • Cognitive Processing: to attract users, the Visceral, Behavioral and Reflective Cognitive process has to be satisfied. There needs to be more time spent on working with concepts, designs and polishing graphics as this would likely satisfy the users’ Visceral Cognitive process, and in turn, the Reflective Process would be more likely fulfilled.
  • Peepholes: if the design creates tension for the user it increases engagement. This of course requires a lot of resources for development and generally
    the game loses the Casual aspect which can be used in other types of games instead.
  • Gamification: using gamification can be done with different outcomes. Rather than inducing compulsion, the design should focus on creating hope, by
    focusing on the users’ social interaction, sense of control, and goals. The need for Social Interaction, giving users a Sense of Control, and again, focusing on User Goals will naturally create a more attractive product for the user.
  • Dark Patterns: websites can have a variety of Dark Patterns. Same is valid in Mobile Game Development and specific Dark Patterns have been identified for mobile games. Using Dark Patterns can be highly unethical, but some strategies within Dark Patterns are viable methods of increasing revenue, without being highly unethical. The Dark Pattern strategies for mobile games can be used for benefit if used ethically and moderately without reaching extremes. Some of the Dark Patterns create more fun features such as Social Interactions and Infinite Treadmill creates more content to
    uncover and experience for the users. Overall, the ethics of Dark Patterns should be made aware of in order to reduce the risk of losing users to frustration.

CONCLUSIONS ON ANALYSIS – Conclusions are summarized due to NDA restrictions

  • One or two Player Archetypes: the success of “Royal Match” shows that targeting one specific Player Archetype can bring as much success as if a game would target two, or three. “Royal Match” is a live example that there is no need to include a lot of Player Archetypes, to make a successful game. “Homescapes” on the other hand, targets almost two Player Archetypes; they are keeping their success, but “Royal Match” is catching up with them in
    revenue.
  • Goal-Directed Design: the needs and goals are in general the reason for the user to play the game, and if they are not fulfilled the user will stop playing the game or not start at all. Being focused on the tasks that would be in the game and how to create revenue rather than focusing on the user’s needs and goals, which would arguably bring more success to the games. Meta Elements and Storytelling create a goal for the user and keep them
    playing, to keep uncovering new things and progressing.
  • Meta Element:  the focus on a goal rather than on a task within mobile games has created the need for Meta Elements. “Homescapes’” Meta Element is Decoration and users do a task, which is Match-3, to unlock new options to decorate their mansion and see progress right in front of their eyes. They
    are so focused on the goal that they are not even thinking about the task so much. Research shows that Meta Elements are essential to stand out from competition as well as being easier to monetize. Lastly, experimenting with different Meta Layers could help create something new and unique that would stand out from competitors and attract new users from different game genres.
  • Storytelling: even though Storytelling has become huge in mobile games, it does not look as essential as Meta Element would. “Royal Match” does not include a Storytelling element, and it is just as successful as “Homescapes” that has heavy Storytelling within the game. If we would think of priorities and time constraints I believe Storytelling is not as impactful to the success of the game.
  • Cartoon Art Style: cartoon art style is very appealing and should be very much targeted at Visceral Cognitive Processing. Being familiar with the art style, which is usually very much Disney-like, appeals to most users as it is so close to the heart. It is polished and simple which attracts users to try out the game.
  • Dark Patterns: if used in moderation, could help with generating revenue. Social features in games are displayed as Dark Patterns, however, some Player Archetypes are playing specifically to socialize and expand their friend group. Infinite Treadmill is another Dark Pattern however some users complain if the game ends unexpectedly. And there are many others that if used responsibly and ethically could be beneficial for everyone.

CONCLUSION – Due to NDA restrictions I will not be sharing the full solution to the problem, just a summary of my work

To conclude my research and analysis I believe that the most relevant way a web developer can apply their knowledge, skills, and competencies of website development to mobile game UX/UI design process at KILOO is to introduce the Goal-Directed Design process including elements such as Gamification, Meta Elements, Dark Patterns, Cognitive Process and the focus on the users’ needs and goals by applying designing for the main Personas or in this case Player
Archetypes are identified by researching the targeted users in the different projects. This brought me to the new design process that would include this method and elements.

If there is any need for elaboration on my research above please do not hesitate to reach out here.