Google Stadia

Feature Expansion

Introduction

This project was an educational exercise to add a feature (or in this case add several features) to an existing product. I chose Google Stadia.

*Update* Google has implemented a search function in Stadia and has plans for categorization/organization of titles. At the time I was working on this design these features weren’t publicly announced.

Brief

For those who are unfamiliar, Google Stadia is a service that allows users to play video games on nearly any device. On its own that doesn’t sound particularly impressive, but then you see games that usually run on dedicated gaming consoles or desktop PCs work just fine on your cell phone. Or you purchase a game online and rather than waiting for delivery or download times you play it immediately.

Stadia lacks many of the features its competitors have, even direct competitors that haven’t been out as long such as Amazon Luna. For this case study I focused on adding the features to Stadia that would most improve the user experience outside of gameplay on the desktop interface using mouse and keyboard rather than a controller.

DISCLAIMER • I want to be very clear: I am operating from a position without the information Google has, and I am not presuming to be a more informed or better designer than the Stadia team. This is an educational project and I am making the best decisions I can given the information I can gather.

In addition, I do not claim rights to any of the images shown in the prototype.

Here are the high-level design goals for this project:

• Add a search function that indexes both the titles in a user’s library and in the store catalog.

• Create a distinct library page that allows users to sort and categorize their purchases.

• Design a review system that is implemented into the store product pages as well as the flow for leaving a review with a star rating and text description.

Tools used:

• Figma

• Adobe Illustrator

• Adobe Photoshop

• Google Docs

Here’s a link to the Hi-Fi prototype:

Research

Goals

For the purpose of this case study I designed around the following tasks:

• Purchasing a specific game from the store page

• Accessing a game through the library

• Leaving a review for a game

You can see my research plan here. I focused on the following goals:

• Understand the current perception of Stadia among users and non-users.

• Establish which features consumers value most highly in their gaming platforms.

• Uncover any pain points, both within Stadia and other platforms.

• Reveal common trends in design of similar services.

• Build a reference document that details Stadia’s existing design language.

Methodologies

I had initially planned on four methodologies:

• Inspect the current site

• User Survey

• User Interviews

• Competitor Research

After the survey results came back I realized there weren’t any specific questions I wanted answered in user interviews. In addition I stumbled across a few very informative posts on the Stadia subreddit such as this one by user “tgcp” that reinforced the information I had already gathered. I decided to omit user interviews for this case study.

Below is my research report covering primary takeaways and actionable items. If you are interested you can view my User Survey Report here, and my Competitor Analysis Report here.

I do want to note the difficulty in finding any research participants who have used Stadia. I asked the moderators of the Stadia subreddit if I could post asking for people to complete my survey and they turned me down. Out of 23 responses to the survey a single person had tried the service and they were unwilling to speak to me further.

Define

Persona

My goal in creating this persona was to match the target audience Google is designing for. If I found out they have a similar persona behind their design process I’d consider it a win. Essentially Brett is someone who doesn’t have a lot of disposable income and likes to try and play games when and where they can.

Sitemap

This sitemap shows the existing site as well as the proposed additions. Stadia utilizes a lot of overlays, those are shown as their own pages in this context.

Wireframes

Wireframes were a little tricky on this project. As I had already generated a style tile and defined my styles it felt like additional work to produce a true low-fidelity wireframe. I settled on a mid-fi set of wireframes.

I decided to work with the 1440px breakpoint for this project. All components, styles, font sizes, etc., are based around this sizing.

At this point I was intending on adding three features:

• Search,

• A distinct library page, and

• User reviews.

As I sketched I realized the additional features would require a change to the primary navigation. As such I added in a sidebar (something every single competitor studied in the research phase had). You’ll see that sidebar in the first sketch below, the following images represent my original thoughts for primary navigation.

The sidebar feels significantly better than the alternative and it brings Stadia closer in line with other Google services such as YouTube and Drive.

Here are the digital wireframes, interspersed with screenshots of the existing interface to show the changes. As mentioned above, these are more towards mid-fi than traditional wireframes. (In the current interface the library section on the home page extends to show you all the games you have access to. My homepage is more than four times longer than this screenshot.)

Design

Styles

I established my typography and color choices using Figma’s style system, seen below. As I was attempting to match an existing design system I only included the styles I identified while inspecting the site.

UI Kit

I was building these components immediately after Figma’s interactive component feature was released into beta. I utilized that feature where useful. Most components are variants and include multiple different states.

Below is my UI Kit.

Here are some of the variants in action, using the icon component (some colors are altered due to this being a relatively low fidelity gif, it’s more noticeable in some of the other gif examples):

As I write this the interactive component feature is still a little buggy. I had to disable it for Usability Testing as it was making things rather difficult.

Below are some of the interactive components in action (hover states have never been this easy and it is amazing):

Hi-Fi Designs

At this point I generated the first draft of the Hi-Fi Design of the site. For the sake of brevity and efficiency I’ll save the display of the design for the end, post-Usability Testing inspired changes. If you’d like to jump ahead, here is the prototype.

Testing

Usability Testing

I had five participants in Usability Testing.

Here are the questions I was looking to answer:

• Is the prototype functional? Can the users complete the following tasks:

  • Purchase a specific game. (Ideally using the search function but I did not restrict them to that. All but one user accessed the specified title using the search function, the other went through the store home page.)

  • Play the game they just purchased using the library page. I wanted the participants to use the library sorting feature so I included the information that the game is an RPG.

  • Leave a review for the game they just “played”.

• Will there be any errors made consistently?

• How does the site look and feel?

Here is the script I used to introduce participants to the test.

Affinity Map

After completing the Usability testing I created an affinity map to highlight patterns.

Usability Test Results

Here are the actionable items generated during Usability Testing:

• Update the star rating component so it’s easier to see.

• Add a percentage to the number of users who found a given review helpful

• Rearrange the product page to give reviews more importance.

• Add videos to the product page carousel.

• Remove the similar results from the predictive overlay and put them in a different section in the search results page.

• Fix some minor typos that were identified in testing.

The full Usability Testing Report can be found here.

These items were relatively easy to complete and I finished them all.

Final Design

The best way to view this design is in the prototype. You can view it as an embed below or by following this link.

You can press “R” to start the prototype over from the beginning. I recommend viewing in full screen.

The specific tasks that should be functional copied from the usability testing script:

• Your first task will be to purchase the game Cyberpunk 2077.

• Your next task will be to find Cyberpunk 2077 in your library and play it. (Hint, the game is

  an RPG.)

• Your final task will be to leave a review for Cyberpunk 2077.

The existing site has a lot of polish that it is difficult to replicate within Figma. I did replicate some of the more simple animations, shown below:

Here’s the animation as you first load into the site (the initial splash page/countdown was my addition, I wanted the prototype images to be fully loaded by the time the user reaches the homepage):

Here’s the animation that shows up when you go to sync a controller:

Conclusion

I’m happy with this design, though I have a hard time limiting my scope to only adding features. I had to restrain myself from redesigning certain elements or changing various things.

It was particularly difficult to continue working within the design language given the addition of the sidebar. I still worked at the 1440px breakpoint but with the sidebar and not wanting to redesign the homepage/store layout, their width suddenly became 1063px. I tried to reverse engineer the formula that determines sizing at different breakpoints to inform the new dimensions of various elements. I think I did a decent job, but there could be some mistakes in sizing/layout as a result.

If I was going to continue with this project here are the next features I’d look to add:

• Custom library categorization. First I would focus on a basic Favorites section, then expand to include custom categories.

• Store Wishlist

• Add review score to all instances of a title’s card when that title has not been purchased.

• Further review features, such as a method to add photos to a review and the ability to list a few games the title being reviewed is similar to.

Here are the things I will do differently for my next project:

• Hopefully further integrate and utilize interactive components. I say hopefully as I hope the bugs will be fixed and it will be a usable feature.

• Take some time from a different device to test my prototypes prior to Usability Testing. Everything worked fine on my machine until my first testing session when I ran into the bugs with interactive components. This will avoid the aborted testing session I had this time around.

• Introduce a round of Usability Testing after wireframes are established. This will result in more time prior to reaching the Hi-Fis but will eliminate some problems early. I said this on my last project, but due to the nature of this case study I was 80% of the way to hi-fis in my wireframing stage so I decided not to include an intermediate usability test.

• Spend some time understanding how to build for different breakpoints. The next project I’ll be working on will be exclusively mobile so this is more of a general goal than specifically intended for my next case study.

Thank you for reading through this case study on adding features to Google Stadia.

Other Case Studies