Game Launcher
A desktop gaming platform through which players can launch, play, browse and purchase games developed and/or published by the company Square Enix, with a focus on UI animations
desktop app • content library • e-commerce • UI animations
Overview
Responsibilities
Project Management
Research
Design
Prototyping
Tools
Photoshop
Figma
After Effects
Introduction
Square Enix has developed two of the most successful titles in the MMORPG genre - Final Fantasy XI and XIV. While still maintaining a strong playerbase many years after release, I believed both of their game launchers needed to be updated to modern design tastes. The games industry has also developed a trend of utilizing consolidated platforms that act as both a gaming library and launcher. Since Square Enix makes many other PC games beyond their two MMORPGs, bringing them all together into a single launcher would be appropriate.
Project Type
self-motivated exercise to design a product for an existing company
Timeline
Mar - Apr 2019
Process
01
Discover
02
Design
01
Discover
Methods
Competitive Analysis
Summary
For secondary research, I explored 2 existing platforms that were popular and widely-used - Steam and Battle.net (by Blizzard Entertainment). I compared them with Square Enix's current launchers for Final Fantasy XI and Final Fantasy XIV. I also quickly explored another product's online store, Wargaming.com, for e-commerce inspiration.
Secondary Research
Steam is the largest and most successful digital distribution platform for PC gaming. It boasts 90 million monthly active users as of 2018. It allows for the purchase of games from over 3000 different developers and publishers (and I am only focusing on one). Its large amount of users means there is a general familiarity with Steam's user interface that should be taken into account.
Steam has three different viewing options for its library interface. I focused on the leftmost option, since it was the default view and the most similar to the Battle.net launcher (for easier comparison). One of the main elements of the interface, the "Install" button near the top, changes to a "Play" button once a game has been downloaded to the user's machine. The button's color helps it stand out, but increasing its size would help signal its priority, since the main goal of the launcher is to get users to play games. At the moment, the launcher overall feels a little overwhelmingly text-heavy.
Click / tap on image to magnify
The Steam store is the other major section of the platform with the goal of getting users to play games. Many users spend much of their time here to browse for games to buy. It contains components that follow common online shopping design patterns. These include a large image carousel, product categories and a navigation bar with ways to filter and search for games and services.
Click / tap on image to magnify
Battle.net is the online gaming, social networking and digital distribution platform for games developed and published by Blizzard Entertainment. It also hosts a few games published by their partner, Activision. It was built upon a primitive system that was first released in 1996 with Blizzard's Diablo game. The modern Battle.net Launcher (or Blizzard App) has been in use since 2013. Its success caused many other companies to release their own mimics. The Battle.net Launcher sees many users every day, with a monthly playerbase of around 40 million across Blizzard's four main game franchises and more players through Activision's two other games.
One of the most successful features of the Battle.net Launcher at its release was the streamlining of the login and launching process of its games. Previously, players would have to launch each game from wherever it was downloaded on their machine (or use a specific shortcut for each game). They would have to enter their login information individually for each game every time they wanted to play. With the Battle.net launcher, the user just needs to log in to the Battle.net system one time when opening the Launcher. Afterwards they are able to simply launch and play any game on the platform as long as the Battle.net Launcher is running.
The interface for the Battle.net launcher is very similar to Steam's library. There is a list of games on the left and a main body for news and other information. It is more image-heavy due to the unique game logos compared to Steam's minimalistic list with small font. Since Blizzard and Activision offer only 10 games on the platform next to Steam's almost 800 million titles, this design is more feasible for Battle.net. The large "Play" button stands out much more than Steam's, but I think there could be a better way to design the news section without using the "carousel within a carousel".
Click / tap on image to magnify
The Battle.net store is also very similar to Steam's. It has multiple ways to filter and search for their products and services and a large carousel of featured items.
Click / tap on image to magnify
For comparison and inspiration, I also took a quick look at a store design that was different from either Steam or Battle.net - the World of Warships (by Wargaming) website on a desktop browser. It uses a unique tile design for the main body of content. The tiles vary in size to help with prioritizing certain products and breaking up the content in a way that allows for easy scanning.
Click / tap on image to magnify
Comparing to Square Enix
Next I compared these features with the launchers for Square Enix's Final Fantasy XI and Final Fantasy XIV. The former still uses a highly antiquated system called PlayOnline from 2000. It was once used for many of Square Enix's games, but it is now only used by FFXI. It is clunky, tediously repetitive and confusing for users to set up. This is true whether they are a new player trying out FFXI for the first time or a returning player who needs to reinstall the game.
Final Fantasy XI
Ignoring the initial account setup process, in order to launch the game every time, users must first choose their account from a list. They must review their details and choose to log in before they're even presented with the fields to enter their password. It takes more than 3 different screens (if you know what you're doing) just to get to the main landing screen for the game in order to launch it and play.
At first glance, there are so many different menus, buttons and links that it is overwhelming. It is not initially clear how to actually launch the game. Many of these links and features are no longer relevant or used by players anymore, such as PlayOnline's social features. Despite its antiquated design, Final Fantasy XI still has a cult following of around 45,000 daily players. It continues to receive regular content updates from developers since it was first released in 2002.
Click / tap on image to magnify
Final Fantasy XIV
Final Fantasy XIV is Square Enix's more recent MMORPG title from 2010 with almost 600,000 currently active characters. It has a much more streamlined process for login and launch (account setup is done through the Square Enix website on a web browser). Yet the launcher could still use a design update.
The launcher is just a single screen, unlike FFXI's PlayOnline platform. It is immediately clear where and how to login and launch the game (the "Log In" button changes to "Play" as soon as the correct information is entered). The downside is that the user must enter this information every time they want to launch the game. This is still an outdated necessity compared to Steam and Battle.net. While the carousel is a clean way to display the most relevant news, the links below that are easily overlooked as a "wall of text". It is also unclear what the difference is between the "News" and "Topics" sections. However in comparison to PlayOnline, it's clear that this is a huge step forward for Square Enix.
Click / tap on image to magnify
02.0
Design
Methods
Wireframing
High-fidelity Mockups
Prototyping
Summary
I ideated low-fidelity solutions in Figma to explore different sections of the launcher for both the library and store pages. I then translated the chosen designs into high-fidelity mockups in After Effects, where I combined them into a prototype and added other UI animations.
Wireframing
I went through many different iterations of the library page. I explored different sections like the top header, the sidebar and the main body. The store page took less time, because I decided that the tile design I had explored for the library would work really well for a store environment. This mostly just left the sidebar to play with.
Square Enix Style Inspiration
I used Square Enix's official website as my main reference for their branding. It is very minimalistic, using flat colors with little to no gradients, strokes or shadows. White and black with a red accent were the clear color choices, as well as angular corners and shapes. I wanted to incorporate the sharp angles from the header and the animated pop of red when hovering over one of the main menu links. I also used their same filter categories for the store section.
Click / tap on image to magnify
High-fidelity Mockups
Because animations were a major focus for the project, the wireframes were translated into high-fidelity mockups directly in After Effects, so that adding the animations would be seamless.
Final Prototype
I put together the prototype as a demo video to exhibit some of the actions that could be taken with the launcher. These include viewing game information in the library, re-organizing games and using filters to browse the store. I also heavily featured micro-interactions, such as hover effects, drag-and-drop effects and page / modal transitions.
Final Takeaways
One of the challenges of being a UI/UX designer is making a compromise between creating business for the company (using marketing material for Square Enix to entice purchases) while advocating for the player experience. Similarly, another challenge is building upon current and familiar trends that put users at ease while still being creative and unique to the company's brand.
I had to keep in mind the significance of screen real estate and the priority hierarchy of elements. Where the user's eye will be most drawn to and where it flows, I had to make sure the elements in that area were important enough to be there, whether it was a menu button or promotional material.
Since this was mostly just an exercise in UI and animation design, I did not do much primary research or usability testing. If I were to do do this project over again, I would interview gamers about their experiences using Steam, Battle.net, Square Enix's current launchers and other similar platforms in order to identify their pain points. I would also conduct rounds of usability testing during both the wireframe phase and the high-fidelity phase.
for reading!
Thanks
View more case studies below:
