Purpose Duration
To create intuitive 'adding to Wishlist' experience 2 weeks
Role Team Tool
UX Reseacher Me + 4 UX Reseachers Figma
Overview
The Steam mobile application follows a similar structure like their desktop application, however it emphasizes the Steam community and their store. While you are limited in directly being able to play games through the mobile application, it still provides a quick way to make purchases and install games remotely onto your PC or macOS devices.
Our experience using Steam ranges in expertise, however we are familiar with the software and similar applications that also utilize online shopping, while also being proficient users of mobile applications, in general. We aim to break down this platform to narrow our scope on the problematic areas that most users encounter, in order to formulate a redesign for a specific component of Steam.
Design Process
User Testing & Usability Errors, Redesign Component, Competitive Analysis, Brainstorming, Sketches, Prototyping, User Testing, Strengths & Weakness of Redesigns, Predictions, Ideas for Improvement, Lessons Learned, Recommendations
User Testing & Usability Errors
In order to pinpoint potential problematic areas our users may encounter, we collaborated on familiarizing ourselves with the Steam mobile application. From there we used our own experiences from navigating the application and found the most issues with the ‘Store’ page. We brainstormed sample tests that centered around the scenario of searching for a game to buy by browsing the store and filtering your results, but then changing your mind after you add it to your cart and instead decide to add the game to a ‘Wishlist’. We felt that this was a realistic scenario, but also a broad enough scenario that gives us room for observing the different kinds of behaviors the users will portray, as well as potential issues they may encounter. As they narrate their actions during the user testing, we will also be able to gather feedback and opinions they may have.
User 1: Khoa
About Khoa
- Familiar with Steam but doesn’t shop very often
- Has been playing games for at least 20 years on PC
- When shopping for new games, he looks at price mainly, then reviews and genre
- Has been using Steam for about 12 years
- iOS user
How It went
Pros
- Steam guard
- Convenient when laptop/PC is not accessible
- Useful for limited time sales
- Quick searches on the go
- Steam guard
- Convenient when laptop/PC is not accessible
- Useful for limited time sales
- Quick searches on the go
Cons
- ‘Wishlist’ is hard to locate
- Many features not optimized for mobile
- ‘Cart’ page has overlapping texts and images
- Filters are difficult to find and reverse
- ‘Wishlist’ is hard to locate
- Many features not optimized for mobile
- ‘Cart’ page has overlapping texts and images
- Filters are difficult to find and reverse
User 2: Angel
About Angel
- Familiar with online shopping, mainly uses Amazon, regularly browses the store on a weekly basis
- Uses Steam mobile more than desktop to check the deals there
- Has been playing games for at least 20 years on console
- Shops for new games mostly by browsing the Xbox store
- Has been using Steam for about a week, very unfamiliar with layout
- Android user
How It went
Pros
- Steam guard
- Felt like every button he was looking for was easy to find
- Steam guard
- Felt like every button he was looking for was easy to find
Cons
- A lot of trouble with the filter system
- Couldn’t find it, had a hard time using it
- Difficult to navigate from the store page to the cart
- Said the “remove” button on the wishlist didn’t even look like a button
- A lot of trouble with the filter system
- Couldn’t find it, had a hard time using it
- Difficult to navigate from the store page to the cart
- Said the “remove” button on the wishlist didn’t even look like a button
User 3: Noah
About Noah
- Familiar with online shopping, uses Amazon as well as playstation store
- Shops on Steam mobile as well as desktop and console
- Has been playing games for many years, almost exclusively console gaming
- Usually buys on playstation store, sometimes buys on sale
- Used Steam desktop version a little, not very familiar with it
- Never used the Steam mobile app
- Android user
How It went
Pros
- Main store page
- New and featured games were displayed prominently
- Sidebar access
- Sidebar navigation was accessible from anywhere
- Main store page
- New and featured games were displayed prominently
- Sidebar access
- Sidebar navigation was accessible from anywhere
Cons
- Search filters weren't visible enough and were hard to find
- Buttons to remove items from the wishlist/cart were not visible enough
- Main store page wasn't the home page, so it was difficult to navigate back to
User 4: John
About John
- Familiar with online shopping, mainly uses Amazon
- Shops on Steam desktop
- Has been playing games for about 20 years, almost exclusively on PC
- Use ratings on Steam to find new games
- Extremely familiar with Steam desktop version
- Never used the Steam mobile app
- IOS user
How It went
Pros
- Searching bars are easy to find
- Categories of games are well defined
- Logos of games are shown in the lists
- Searching bars are easy to find
- Categories of games are well defined
- Logos of games are shown in the lists
Cons
- ‘Wishlist’ is hard to locate
- ‘Wishlist’ is unintuitive to use
- Filters are not found
- Exit is hard to find
- ‘Wishlist’ is unintuitive to use
- Filters are not found
- Exit is hard to find
Redesign Component
During user testing, we discovered many problems regarding the functionality of Steam’s wishlist system. Main problem areas include:
- Navigating to the wishlist from the side menu (for iOS users)
- Adding items to the wishlist from the cart
- Removing items from the wishlist
- Navigating to the wishlist from the side menu (for iOS users)
- Adding items to the wishlist from the cart
- Removing items from the wishlist
Competitive Analysis
Xbox
Pros
- ‘Save for later’ button is easy to spot
- List is placed in ‘Cart’ under the Cart items
- No need for an extra page
- Can easily add item into Cart from the list
Cons
- ‘Save for later’ button can only be accessed in ‘Cart’
- No option to Save on actual store page
- Users may not know of the function until they add an item Cart
Best Buy
Pros
- Minimal design for items added to cart and saved for later
- ‘Saved items’ are in the cart
- Intuitive two ways to save items for later
- In the item’s page
- ‘save for later’ button changes to ‘view list’
- In the cart
Cons
- ‘Saved items’ are not showing on the cart icon comparing to the items added to the cart
- Users may not know where to look for the ‘Save for later’ items
Amazon
Pros
- Minimal navigation bar at the bottom of the screen acts as an accelerator to easily locate lists, account, cart, etc.
- In this bar, there are 2 ways to locate your lists
- Ability to make more than one list
- ‘Saved for Later’ feature is a quick and efficient way to store items, similar to Steam’s wishlist
Cons
- ‘Saved for later’ feature can only be accessed in ‘Cart’
- It does not create a separate list that can be found with your other lists
- A bit ambiguous to have a function titled ‘Saved for Later’ and a default list titled ‘Save & Compare’
- These can be merged
Brainstorming Solutions
After identifying our component and the three main problem areas it had, each of us brainstormed comprehensive redesign of the Wishlist system that would address each problem area. Upon inspection, we were able to group these sketches into two main solutions: designs that combined the Cart + Wishlist pages into one page, and designs that kept them on separate pages. We used this division to create our two redesigns.
Sketches
After discussing our ideas, we noticed similarities amongst our sketches. In particular, we all wanted to redesign the sidebar navigation in order to implement a section for the Wishlist. In terms of the Wishlist itself, our top two choices were to have this located in the Cart page or designate it back to its own separate page.
Prototyping
Redesign 1
Ideas for Redesign 1 Rationale
From the competitive analysis of Xbox, Best Buy, and Amazon, we noticed that the ‘Save for Later’ feature in the Shopping Cart is similar to the ‘Wishlist’ of Steam App. It’s easy for users to locate where the saved items are and convenient to move items to the cart which is likely to be the users’ next action for items in the ‘Save for Later’ list. In addition, because many online shopping services group the two functions on the same page (including Amazon, which the majority of our participants were already familiar with), this was a common enough industry convention that it would be intuitive for the majority of our target users. So we decided to merge the Wishlist into the Shopping Cart. In order for users to notice the Wishlist, we moved the delivery message to the top, and added the Wishlist right below the Shopping Cart, so the Wishlist can be seen without scrolling through the Shopping Cart.
Also included in Redesign 1 is that “Add to Wishlist” on the Store page will now take the user directly to the wishlist after they add it. Like how the “Add to Cart” button works, we want to make the two buttons behave consistently if the two services are under the same menu.
Redesign 2
Ideas for Redesign 2 Rationale
We recognized that the PC version of Steam separates the Wishlist from the Cart and Followed games, meanwhile Steam’s wishlist function is also different from other store’s Save for Later. Thus, we decided to make the Wishlist a separate page for consistency with the desktop application. We also kept in mind the competitive analysis about Amazon, in which they utilized three main lists:
Save for later – for the user if they don’t want to buy it yet but might buy it later
Wishlist – what the user wants but might not buy it for themselves, or not until there is a sale for it. It is also useful for others to view and decide to purchase a game as a gift for the user.
Watchlist – for the user to get notified about price changes
We realized that Steam’s wishlist is more like a combination of Amazon’s Wishlist + Watchlist; You can get notified if an item is on sale, and other people can view those lists if they want to gift the items to the user. From this analysis, it made more sense as to why the Wishlist should be in its own designated page, because viewing this list is not solely for the user if they choose to share it with their friends. Rather than placing it under the shopping cart, we linked the ‘Add to list’ button to Steam’s previous Wishlist page. In this way, the user is able to refer back to a separate page where they can utilize even more features that Steam offers, such as sorting the game based on its type like softwares or videos, creating a personal rank order, or saving games based on popularity and reviews. These features would have been limited if they were placed under the Cart as it would become cluttered.
User Testing
We conducted 4 user tests total – each user only testing either Redesign 1 or 2. In order to determine which redesign was better, we decided to look at the strengths/weaknesses of each redesign and analyze whether the strengths/weaknesses were shared across both designs or unique to one particular design.
User 1: Katie
About Katie
- Familiar with online shopping, mainly uses Amazon on mobile
- Started using Steam recently, not a lot of games on her 'Wishlist'
- Has been playing games for about 20 years
- Buys games mostly on Steam for PC
- Not super familiar with Steam, mostly plays games from her brother’s shared library
Feedback for Redesign 1
Likes
- Liked how the wishlist being on the cart page was easy to see
- More convenient to have both of 'Wishlist' and 'Shopping Cart' on the same page
- “If they’re on the cart page, I can be reminded that they’re there”
Dislikes
- 'Wishlist' is hard to see when games in the 'Shopping Cart' fill the screen
User 2: Michael
About Michael
- Familiar with online shopping, mainly uses Amazon on mobile
- Started using Steam recently, not a lot of games on her 'Wishlist'
- Has been playing games for about 20 years
- Used 'Wishlist' to buy games a few times, but never used on mobile
Feedback for Redesign 1
Likes
- Easy to move the game from the cart to the 'Wishlist' and vice versa
Dislikes
- Interfaces changed abruptly when moved the game to the 'Wishlist'
User 3: Kajsa
About Kajsa
- Familiar with online shopping, on UCSD bookstore, Amazon, clothing stores, etc
- Sometimes uses 'Wishlist' if the feature is good, but otherwise defaults to saving things in the car
- Plays games exclusively on PC
- Not super familiar with Steam, uses it for playing but has never bought anything
- Never used mobile app
Feedback for Redesign 2
Likes
- Easy it was to add or remove from 'Wishlist'
Dislikes
- 'Wishlist' was kind of hard to find
- Expected to find it directly in the sidebar
- Expected to find it directly in the sidebar
User 4: Kevin
About Kevin
- Familiar with online shopping, uses Amazon and Best Buy on mobile
- Has not used 'Wishlist' before but has used 'Save for Later'
- Has been playing games 15+ years on both console and PC
- Has used Steam before to purchase one game, and is somewhat familiar with the page
- Never used the mobile app
- Never used the mobile app
Feedback for Redesign 2
Likes
- The navigation for adding the game to your 'Wishlist'
- Had a designated page for the 'Wishlist'
- How the games were laid out in 'Wishlist'
Dislikes
- Wished that from the game’s info page that when you ‘Add to Wishlist’ there was a way to redirect you to the 'Wishlist' page
Strengths
Weaknesses
Predictions
Ideas for Improvement
Lessons Learned
There were several times throughout testing our redesigns that participants would try things that we did not expect or implement. For example, one of them tried searching for Cyberpunk 2077 through the “Search” option under the Store sidebar tab – something we did not implement functionality for, because it never came up in our previous round of testing. This resulted in that particular user looking for things on the Sidebar menu to click… and led her to tapping on the Wishlist, where Cyberpunk 2077 was already wishlisted even though she hadn’t gone through the first 2 steps. This was an important lesson for us regarding prototyping – you cannot simply make a prototype that functions only in one direction.
Recommendations
Rather than sticking to solely one redesign, we decided it would be best to combine the strengths of the two redesigns. Using Redesign 2 as the base, we would keep the Wishlist on a separate page and make it easily accessible under the Store tab. We would also include the aspect of easily moving an item from Cart → Wishlist and vice versa by adding an 'Add to Cart' button in the Wishlist page. In case users forget about their wishlisted items when checking out, we propose to add a preview of the Wishlist on the Cart page before the users finalize a purchase. Since you can order the items on your wishlist based on which item you want the most, the preview in the Cart can consist of the first 3-5 items on your wishlist. If any of the items on the user’s wishlist are on sale, those items will be placed above the regular priced items in the preview. We believe that this will help users remember what items they have on their wishlist and whether the item is currently on sale.
