The exercise project from Usability/Interaction Design course at FH OOE.
Date: 2015
Team: Fabian Achammer & Roman Luks
The aim of this project was to practice what we learned during course lessons. First, we picked the topic (website of a games reseller), then we researched existing solutions, came up with personas, created different sketches in Balsamiq, created and evaluated user tasks using prototype. Lastly, we evaluated mobile protype made in InVision app.
Research
The research was focused on identifying (unique) features of existing services.
Existing services
Steam
filter by genre
filter by language
filter by publisher/developer
this week’s offers
switch through new games with pictures
search functionality
personalized recommendations based on games you looked at
user tags for games
user reviews for games
individual games show a collection of videos/trailers and screenshots
filter by platform, is somewhat hidden at the bottom of secondary navigation
hover on window with game description
see recommended hw configuration for the game
wish list
share game link
embed game widget
GOG
no hover on window or box with description
filter by categories
filter by publisher/developer
top discounts
drm free games
return money policy
filter by genre
see recommended hw configuration for the game
show compatible OS for game
user reviews for games
wish list
share game link
The Humble Store
wish list
top discounts
not possible to filter by multiple filter criteria
contribution to charity
filter by DRM method
show discounts beside price
focus on discounts
itch.io
hover on window with game description
randomize game list
animated game tiles (gif) right at the game list
filter by genre
filter by platform
filter by time-to-finish the singleplayer
filter by input (mouse, joystick, gamepad, etc)
filter by accessibilty (color-blind, subtitles, one button..)
filter by tags
add game to user’s collection (can be used as wishlist)
filter by multiple criteria of the same filter category
make a sentence out of the filter criteria as heading
reset filter criteria
focus on finding games
every game has its individual page
Expected features
see games currently in sale
buy the concrete game
look for new games to play (filtering to discover what is interesting for them)
see popular games (new or just popular)
see more about the game right at the game list
filter by price range (from, to)
filter by time-to-finish the singleplayer (use data from howlongtobeat.com)
Sketches
We’ve created sketches in Balsamiq. Each sketch was focused on something else. The original sketches are no longer available, only their descriptions survived.
Sketch 1 – Community
player community oriented
reviews
user tags
user ratings
chatting about games and their things
recommended to you (percentages)
Sketch 2 – Super Discounts
innovation: timers of sales, 24/7 sales, watching the store page all the time
you want to get the best bang for your buck (inspired by steam sales, gog.com amount of copies in sales)
never know whats gonna be in sale next
discounts
sales
popularity
numbers, percentages
no navigation whatsoever just the lending page with OFFs!
no filtering no searching just top deals
Sketch 3 – Exploration
innovation: highly customizable filtering criteria, easy to discover similar titles
(I want to play sth choose criteria), (I dont know the name, but i know something about it)
discovering
filtering
searching
exploring
graph-structure
Personas
We came up with 4 distinct personas. It was pretty entertaining to write these – especially the part of picking ‘the right’ photo for each. My sincere apologies to 4 people below. If it’s you and want to take the picture down, please let me know, thanks!
It’s worth mentioning that we based personas on our own experiences and hunches. We didn’t collect any real user data to compile these. We wanted to capture few types of distinct (imaginary) users.
Ben Populirian
Gender: Male
Age: 25
Location: Germany
Occupation: student, 4500eur
Ben is 25yo. Lives in western world country. He is middle class. Has a part-time job as php developer. He likes FPS shooters such as Unreal Tournament, COD, Quake, CS:GO. He always plays the most popular game there is. He has enough money to spend on just released titles. He does not wait for sales. He wants to play what is new, talk about it with his football team and in the pub. He watches other people play on Twitch as well. Ben loses interested in the game once its popularity drops. Eg. He won’t be playing CS:Source once there is CS:GO. Always the newest. He even pre-orders games to have them ASAP. He is happy with the rise of online distribution, because he does not even have to go to the store or wait for the package to arrive – he just clicks few times and he can play.
Goals:
- get the newest/most popular multiplayer FPS
- intention to talk about them with friends, brag about his scores
- play asap
Frustrations:
- waiting for the game to come out
- waiting for download to finish
- waiting for install to finish
- not being able to buy game he wants
Hanz Cheappong
Gender: Male
Age: 13
Location: Czech Republic
Occupation: pupil, 0eur
Hanz is a teenager 13yo. He has parents with low income. His hardware is several years old with outdated OS. He can not even launch the newest titles. All he can play are either old games or low demanding (web, indie) titles. He is an introvert, he has hours of strategic gameplay in age of empires, stronghold, civilization, heroes of mm. He likes to build his virtual kingdoms. Sometimes he goes casual and plays something stupid and funny in the browser. He is a fantasy books fan (LOTR that’s his favourite. And no, he didnt like the Hobbit movies). He has little money to spend. So he mostly browse the store and look around, watch makings of, let’s plays and be part of communities of his favorite games. He buys only if he gets money as present from his uncle. Twice a year – birthday and xmas.
Goals:
- Be part of communities
- Buy cheap non-demanding games (runs on low-end hardware)
- Build his virtual kingdom
- Enjoy fantasy worlds and stories
- Browse around
Frustrations:
- has to check for hardware requirements
- not enough money to buy expensive games
- waiting for xmas/birthday to have funds to spend
- losing track of what he wanted to buy when he browsed the store
Brandon Barr
Profile: digital games collector
Gender: Male
Age: 32
Location: US
Family status: in a relationship, no kids
Education: Master of Science in civil engineering
Occupation: junior civil engineer (for 5 years)
Brandon collects games since he’s 20. At current he has a library of over 1000 games on Steam. He did not play all of them, but mainly bought them to “just have them”. He sometimes likes to show off to others how many games he has and that he has a very unique taste for games. He doesn’t like the triple A games industry and mostly focuses on indie and smaller games because there “you can still see the heart and passion”. Sometimes he gets lost in the web just researching for one of the games he’d like to have and ending up with 10 more games he “just has to have”. He knows a lot about technology through his job, but is also always up to date with digital trends.
Goals:
- Get lots of information about individual games
- Discover new games
- Create a very big collection of games and show them to others
Frustrations:
- Very restricted search and filter criteria
- Promotion / Ads for games on sale and recent games
- Handholding and recommendations by reseller pages, because he usually knows exactly what he wants
Patricia Hopkins
Profile: Mom
Gender: Female
Age: 45
Location: UK
Family status: married, 3 kids (8, 11 and 15)
Education: College
Occupation: English teacher for 15 years
Patricia wants the best for her kids. She knows that they like playing video games. She also knows the types of games her kids like to play. They have a Wii U and a PC at home and she enjoys it when the whole family can play a game together. She doesn’t play a lot, but sometimes on the subway home she plays Candy Crush on her Smartphone. She’s not too averse against new technologies (she even uses WhatsApp to communicate with her students and tries to incorporate the Internet in her lessons), but she likes to use software and apps that “just work”.
Goals:
- Buy video games for her family for birthdays / christmas
- Games shouldn’t cost too much and can ideally be played by the whole family
- Find new games that are similar to the ones she already bought
- Have a place where every member of the family can enter what games they like to buy
Frustrations:
- Not being able to filter by price
- Not getting proper recommendations
Tasks
Tasks are based on personas and available features. We evaluated each task with a 3rd classmate. They were the user and the 2 of us were moderator and observer. We proposed changes to address problems identified during evaluation.
Task: Buy similar games on Linux
Goals/Output: User has bought 1 game that is similar to „Bollwerk“ and is available for Linux using PayPal and received a confirmation e-mail
containing a link to activate the game on Steam
Inputs/Assumptions: User is on the website of the games reseller
Steps:
1. User enters „Bollwerk“ into the search bar
2. User sees the game as the first match and clicks on „Games like this“
3. User clicks on „show filters“
4. User selects „Linux“ under platforms
5. User adds the first game to the shopping cart
6. User clicks „Checkout“
7. User selects „PayPal“ as paying option and clicks next
8. User clicks next and finishes his payment with PayPal
Time to carry out task (for experts): 1 minute
User instructions:
You really liked the game „Bollwerk“. However, you finished it and want to play something similar, but you only have a Linux machine to do so. Find a game that matches these criteria and buy it via PayPal.
Evaluation:
Problem: Shopping cart content not displayed before checkout
Proposed change(s): Show shopping cart content in the popup when clicking checkout
Problem: No detailed information about games visible
Proposed change(s): Implement a detail game page when clicking on a game card
Task: Add games to wishlist and send to Mom
Goals/Output: User added three games that are released near christmas to his wishlist and sent the list to his Mom via e-mail
Inputs/Assumptions: User is logged in to the site
Steps:
- User shows all filters
- User selects Custom release date
- User enters „December“
- User sees the results and adds three games that he/she likes to the wishlist by clicking the star icon
- User clicks on Wishlist
- User clicks on “Share Wishlist”
- User chooses option “Mail”
- E-Mail program opens and user types in the E-Mail address of his mom
Time to carry out task (for experts): 2 minutes
User instructions: Your mom asked you what you wished for Christmas. Find three games that are releasing near Christmas and send the list to your Mom via E-Mail.
Evaluation:
Problem: Star icon doesn’t convey that clicking it adds it to a wishlist
Proposed change(s): Replace star icon with heart icon and also add text (or tooltip) that says “Add to wishlist” or button “Add to wishlist”, in top menu star/heart next to wishlist to help associate the meaning
Task: Wishlist replacement
Goals/Output: User wants to replace game in their wishlist with similar game, but cheaper
Inputs/Assumptions: User has registered, is logged in, located on landing page and has at least one game in their wishlist, and there are similar games to this one in the store
Steps:
- User clicks on “Wishlist”
- User picks game from their wishlist which is desirable, but too expensive
- User clicks on “Games like this”
- List of games which are similar is shown
- User adjust the “Price” filter to lower price range one desires
- User looks through results
6b. Optionally user might adjust other filters as well - User picks game they like and clicks on star icon (white filled star)
- System assigns game to user’s wishlist and changes star icon (black fill star)
- User clicks on “Wishlist”
- User clicks on star icon to deselect expensive game from their wishlist
Time to carry out task (for experts): 2 minutes
User instructions: You like Bollwerk, but it is too expensive. Look for a similar game that costs half of it and add it to your wishlist.
Evaluation:
Problem: “Games like this” – feature not clearly visible
Proposed change(s): Put “Games like this” above the description text or make a button instead of the link “Similar games” – add verb to action like “Show similar games”.
Task: Violence hunt
Goals/Output: User buys game fitting his criteria (The newest action game, which has just been released. Lot of shooting) in the shortest possible time and downloads it.
Inputs/Assumptions: User logged in on landing page.
Steps:
- User clicks on „shows filters“
- User selects Action genre
- User selects Release date “This week”
- User clicks the „Add to cart“ button of the first game
- User clicks „Checkout“ on the top right
- User selects „PayPal“ as paying option and clicks next
- User clicks next and finishes his payment with PayPal
Time to carry out task (for experts): 1 minute
User instructions: Buy a recently released action title with PayPal.
Evaluation:
Problem: It’s unclear, if item was added to shopping cart
Proposed change(s):
a. Change color of the price button to indicate that it’s already added
b. Implement animation that moves item to shopping cart
Problem: “Show filters” link is not clearly visible
Proposed change(s): Make “Show filters” bigger. Add filter icon.
Task: Remove items from shopping cart
Goals/Output: User bought Supernova and Polycrusher and cancelled Bollwerk and Lucid from the shopping cart.
Inputs/Assumptions: User has 4 games in the shopping cart, each costing 20€.
Steps:
- User clicks on shopping cart
- User clicks on cross next to Bollwerk
- User clicks on cross next to Lucid
- User clicks „Checkout“ on the top right
- User selects „PayPal“ as paying option
- User clicks next and finishes his payment with PayPal
Time to carry out task (for experts): 30 seconds
User instructions: You wanted to buy four games from the Hagenberg collection and put them in your shopping cart. However, you now realized that you only have 40 € to spend. You only want to buy Supernova and Polycrusher.
Evaluation:
Problem: It’s too easy to remove an item from the shopping cart
Proposed change(s):
a. Add temporary undo functionality when removing an item (gmail inspiration)
b. Add dialog saying “Do you really want to remove the item?”
Mobile prototype evaluation
We created a prototype of game reseller web using InVision. Here are problems & proposed changes we identified during mobile prototype evaluation.
Task: Add 3 games to wishlist and share it with mum
Text of individual filters too small > Increase the size of UI elements
Filter name should go to its settings too (not just the arrow on the side) > Click on filter name goes to filter setting
Heart icon - it is not clear whether user just “likes” the game or they are adding it to wishlist > Show “Added to wishlist” text when clicked
Missing selection for sharing > In wishlist add checkboxes to select games to share
Task: Wishlist replacement
Problems:
- Unclear task description. Users didnt know what price should they aim for.
- Users attempted to add games to their wishlist without filtering.
- Users didnt know the game Bolwerk was in their wishlist.
Proposed changes:
Improve task description: what price they want, emphasize fact that Bolwerk is in the wishlist…
Task: Violence hunt
Problems:
- Cart icon too small
- Location of checkout button is unintuitive (user wants to read the games in cart from top to bottom and then checkout)
- Missing price text for each game in cart
Proposed changes:
- Increase size of share and cart icons
- Move checkout button below the list of games
- Add price text next to each game in cart
Leave a Reply