Google Stadia Mobile App Redesign
Project Summary
I redesigned the mobile app to enable users to easily navigate the app and find game information as intuitively as possible.
Goal
With the new layout and interaction design, users may navigate through different dashboard tabs smoothly, locate games faster, and explore different games in their favorite genres.
There are around 2.8 billion gamers in 2021, and 2.7 billion are mobile gamers worldwide.
(Source: New Zoo)
Stadia Mobile App Problem
Users want the freedom to view their game information and search for new games more intuitively. Historically, the Stadia app has offered neither the search ability, nor the ability to group games by genre. In the “Store” tab, users may have trouble quickly identifying games they might enjoy.
Similarly, in the “Home” tab, users can’t view details about the game(s) they own, and the layout makes it difficult to navigate through large quantities of purchased content.
In addition, the current “Explore” tab has information that does not necessarily improve the user’s experience of finding and playing games on Stadia. In my redesign, I have removed this tab in order to simplify the user journey through the mobile experience.
Here's a quick look at the current Stadia mobile app, as of March 2021:
Goal
Improve the Stadia app experience for users and maximize sales of different games. Specifically, the user experience will be improved in the following ways, and could help promote profit through the aspects listed below:
User-facing changes:
A new dashboard setup and ribbon will help users navigate more smoothly - in addition, the new Search bar will help find all the information users need, from game to account information
In the Store and Play tabs, users may find games more easily by grouping them according to their preferences
Information about purchased games will be visible directly through the “Play” tab
Potential business improvements:
Increase sales by streamlining users’ search for for new games
Maximize user usage on mobile apps by incorporating a more intuitive user interface
Acquire more users on Stadia Pro through more scaleable app design
Ribbon and Dashboard are life.
Having a map with no legend is like having branches without fire in the cold winter. An effective ribbon and dashboard bring users navigational comfort. Thus, I redesigned the navigation bars to help users navigate more easily.
Currently, the Stadia mobile app's ribbon and dashboard (as of March 2021) feature the simple needs users will utilize when they are on the app - however, it limits the amount of resources available to users. On the ribbon, users have access to the gift basket, controller, friends' status, and account information icons. The features on the dashboard show Store, Stadia Home, and Explore tabs.
Yet, users still have trouble finding what they need. The Explore tab on the dashboard's bottom right corner is quite misleading - when users see "Explore," generally they will associate that tab with a "search" or "find" functionality. However, the current "Explore" tab only displays videos about Stadia. To help users navigate with more intuition, I created brand new Ribbon and Dashboard tabs that provide all necessary and desirable functions for the Stadia mobile app.
The new ribbon and dashboard design concept guides users more effectively. Users may find the location of their current tab on the top right of the ribbon, and find the gift basket, notification, and search buttons. Having the gift basket, notification, and the find/search buttons grouped together is more clear than having a gift button living by itself on the left, as it is in the March 2021 Stadia app.
On the dashboard, users may still find the Store on the left, followed by the new Stadia Play, Messages, and You buttons, respectively. The four tabs are the crucial buttons that users will use on a daily basis. You will find more details on the rest of this redesign project information below.
Hello Find. New edition = best edition.
Stadia Find - We get your searches. The easier for the user to find/locate something, the more they will want to stay on the website. The same idea applies to mobile applications that may help user(s) to locate what they want easily.
Historically, users on Stadia app have had difficulty finding games or searching for anything.
From a user's standpoint, finding games or searching for other app-related content is a very crucial aspect of their experience. So, let's welcome the birth of the Find button. Helping you to find anything you need.
To help users to eliminate the time they use to find their desired games, I decided to incorporate a Find button on the dashboard - this will help users to eliminate time for game searching, and play games more effectively - whether searching for genres or games' names, it will help users to determine exactly which game(s) they would like to buy.
Hello Store. Your new favorite game shop.
Stadia Store, the new way to buy. The Store tab is very crucial for all mobile users. It is the moment where users smile with their new purchase(s), and businesses gain new buyers. My goal for Stadia Store is all about the layout, and promoting the "easy-to-find" concept.
Historically, the Stadia Store has made it hard for users to locate games, especially to find games in the genres they enjoy the most. Users must often scroll all the way down to find the "Show All" button, where they may see all the games Stadia is offering.
The new design idea is based on marketing logic - what the user wants and needs. I incorporated the Find button, "Group by genre" function with its associated genre buttons, "Deals of the Week," and lastly, the featured game of the week on the top. These will help users find and learn about what types of games they enjoy playing, and help them search for games by sorting them by genre, alphabetical order, etc.
Store homepage
To find, and to purchase. A store is very important when users make their decision to commit to a new game. Having an effective store layout will make users want to buy more.
Supporting users from the very start is necessary for getting users to stick around and purchase more items. Therefore, by having the "Group by genre" functionality and its associated genre buttons (boxed in orange), the app will allow users to group games they want to find and play - at the same time, users will be exposed to new and different games in their favorite genres.
Having the "Deals of the week" section in the Store tab will generate potential purchases of new game deals that Stadia is offering for either Stadia Pro members or just regular users. With new deals featured each week, users will be motivated to check in the Store at least once per week, to see which bargains they can snag.
Hello Stadia Play. Goodbye Stadia Home.
Growing Stadia's user base is the one of the main focuses for Stadia and all third-party companies who have their games on the Stadia application. Therefore, the Stadia homepage is very important, with the purpose of highlighting all the games you have purchased and are currently playing on the Stadia app. That is why I created a new concept, which transitions the old Stadia Home to the new Stadia Play.
Stadia Play's main focus is the user, with the ultimate idea of making it easier to play and read descriptions about purchased games. By associating the word "Play" with "Stadia," it will promote Stadia's main purpose as a gaming platform. Stadia Play is the home to all the games you own, allowing you to directly play your games, read about your games' descriptions, and find all of the screenshots you have taken while playing.
Everything about Stadia Play is new. A new layout. A new outlook. Users may now find the game(s) they own more easily by grouping them together, and learn more about their game(s) directly through Stadia Play.
Historically, users have had to browse through the Store tab to locate a game they have purchased before they can learn more details about it. To relieve users from that stress, the new design offers a way for user to view details about the game they own with a single touch.
Here is my new Stadia Play game description concept:
Detail of your game
From the game details, users may see which add-on(s) they may purchase to advance in their game. This new design concept is a combination between marketing idea and UI design.
From a marketing and user standpoint, knowing more about the game(s) you have and are playing is important - for example, whether or not the game has multiplayer capabilities, or if there are any other add-ons for the game. Taking this into account, I added the functionality to view a game's description and other information when you click on any of your purchased games.
In addition, when users see more detail about their game, they will also see the add-ons they have purchased with their bundle, or add-ons available for them to purchase (boxed in orange), and advance in their game. This is crucial for game development companies; it will help businesses to grow more in the Stadia app through add-on sales, and learn about whether or not users need/want specific add-ons.
Hello, Social tab.
You, your friends, and Stadia Social. Playing games with your friend(s) is what life is - whether it's playing games in person or behind a screen, you feel their presence. That is why having a messaging platform in the Stadia app, or any gaming app, is important. So, to have your Stadia friends and messages all in one place, I created Stadia Social tab.
The current Stadia tab with messages and friends is simple and clean - yet, it doesn't allow the user to quickly switch out to the main homepage where they may find their purchased games and the Stadia Store. User will have to click the "X" button before returning to the homepage - this creates a multi-step process.
Here is some more detail about my new Stadia Social concept:
Detail of Friends and Messages tabs
In the Friends tab within Stadia Social, users may add friends via QR codes or user ID. In the Messages tab, users may send messages and add friends via user ID.
For many users, messaging and adding new friends to your guild or party are very important aspects of gaming. To make the process of adding and messaging friends easier, I created two easy-to-use sub-tabs within Stadia Social.
In the Friends tab, users may see the list of their current friends, and add friends via QR codes and user ID.
Similarily, in the Messages tab, users may reply to the messages their friends sent, write new messages, and add new friends without having to navigate back to the Friends tab.
Hello You. View your account simply.
Your Stadia account, under your control. Your Stadia account should feature everything you need, from connecting your Stadia controllers, to managing your account, to finding your payments and subscriptions.
The current account profile in the Stadia mobile app is clean and has everything you need, as you may see on the right image above. However, users cannot quickly switch to the Home or Store tab.
In the new You tab, featured above and to the left, your account is made more accessible with the addition of the Ribbon and Dashboard, at the top and bottom of the application, respectively. This way, the user may quickly and intuitively switch from one tab to another.
My thoughts...
The reason why I chose to redesign the Stadia Mobile App is because I see potential in Stadia as a platform where anyone, from kids to adults, can have fun wherever they go. The concept of Stadia is amazing - with just a Chromecast and your controller, you have high-powered gaming at your fingertips, and you can even access your games anywhere you go with your mobile device or computer! It even keeps your TV stand looking nice and uncluttered.
With this UI design experience, I learned about what each user likes - from customer feedback research online, to showing the design to my sister who doesn't own any game sets, to consulting with my housemates who love online gaming. Their feedback helped me make this design more accessible to everyone.
This design is also featured on my Behance account:
Thank you for scrolling and reading!
Thank you for scrolling and reading!
This is also posted on my lovely Behance account: https://www.behance.net/gallery/116464145/Stadia-App-Redesign