E-COMM AND SEARCH FOR BOARD GAMES
Creating an e-commerce function for a local store and designing for discovering new products.
Completed as a student at General Assembly Seattle.
Paper & Pencil
What I Did
20 Screen, Mid-Fidelity, Clickable Prototype
The Game Shelf is a friendly local game store in Kent, Washington that opened in 2019. Much of their online presence is on Facebook. They are going for a friendly, inclusive, local vibe with a wide assortment of games and related hobby material. Magic, D&D, Warhammer, and minis. There are lots of regulars and space for tables
Currently they do not have an e-commerce option, and you can arrange special orders at the store. The board game industry is quite unusual in that local game stores cannot sell games online without jeopardizing their relationships with vendors - so in store pick up only. Making sure that is clearly conveyed will be important, as confusion regarding that could be a major source of frustration to potential customers.
The Game Shelf doesn’t have too many reviews - just one on Yelp, but 30+ on their Facebook page (all very positive).
Fun place to hang out and play games! Jason is awesome and very helpful. If they don't have something in stock he's more than willing to order it for me and give me a call when it gets in.
- Sarah A. Yelp (accessed 2/3/20)
Due to the limited reviews and the need to get some information to work with as quickly as possible, I also looked at reviews for some major local competitors to get a better idea of what people were looking for in a game store. I used these reviews in an affinity map along with information garnered from interviews.
Original version of the website.
I actually approached this a bit backwards in order to stay on track time-wise - I used the comments from the reviews of the competitors to create an affinity map to determine what things about board game stores were important to consumers.
There were a number of things that were revealed, but my major findings were:
Word of mouth or recommendations are a key way to find games.
People play games because they like hanging out with family/friends.
Browsing games is fun - artwork catches people’s eye.
I completed 5 interviews with a variety of people with different gaming experience. I got background into why they play games and what they would look for in a game. This information didn’t significantly impact the affinity map I had done on the review comments, but did provide some great insights into what people look at when selecting games, which is useful for helping decide how to lay out the e-commerce portion of the site.
Beyond looking at reviews, I analyzed the websites of three local competitors. I primarily looked at information they provided and what features they called out. Because The Game Shelf's website was so bare bones, this helped provide suggestions for content that they could/should add.
Another area that I needed to explore before further development was a task analysis of buying a board game. This served to provide me with an overview of the process that the website would need to cover and put it into a larger context.
Given all of the information above, I created a persona to give my user a personality and needs and therefore give the website a definite direction. Based on the interview data, I went with a more casual gamer who isn't immersed in the hobby, but this is probably an instance where multiple personas would have been a good idea - her needs and the needs of a super serious gamer overlap some, but definitely not entirely.
Someone who is just getting into board games - they’ve played some games owned by friends and want to get something of their own.
The user doesn’t know what game to get and wants to look at the options.
At home or in downtime away from the house when they have available internet.
After they’ve played some games and are interested in playing more or with other people.
Playing games is fun!
Games are interactive and social.
It’s a way to connect with other people through shared activity.
Hanging out with friends and family is a good use of time.
It helps someone feel like they belong.
A well designed and informative e-commerce website can help people find games they should like and helps them feel confident in their decision via reviews and connections to other things they relate to.
The aim of this website is to help people find new games based on games or categories/themes they already know and then get them into the store to pick up the game.
We value being knowledgeable and friendly with a welcoming atmosphere that doesn’t overwhelm new customers.
Make it easy for the customer to find a game they may be interested in playing or buying.
Provide easy-to-use categories to find games for the non-expert user
Encourage visits to the store to buy and try games
See month-over-month increase in website sales.
Increase new user visits
Increase use of board game library
Customer Journey Map
To help refine the vision and direction, I created a Customer Journey Map for Kaitlyn as she finds and buys a new board game for herself and her fiancé. The potential opportunities for improvement lead directly into many of the features that were ultimately used in the proposed website.
Scenarios, User Story and Use Cases
Kaitlyn wants to spend more non-screen time with her fiance and wants to find a board game for them to play together.
As a relatively novice board game player, I want to find a new game to enjoy playing with my fiance and friends.
Kaitlyn goes to her browser of choice and then searches for “board game stores near me”. The results pop up and she selects the top option, which looks the most relevant. She opens The Game Shelf’s website and quickly scrolls down to the bottom to make sure that it’s nearby. Looking for a new game she does one of a few things:
She searches for the game she played with her friends last weekend that they enjoyed. She finds that game and sees the description and recommended items below. She chooses a couple of the recommended items that look interesting and opens those. She reads the descriptions and notes the specifications for the number of players and length. One looks interesting and she sees that it’s available to play in store for free.
Going to “browse by them”, she looks at games about pirates, since that’s something she’s interested in. She then filters by number of players and game length and finds a few she likes. She looks at the pictures and reads reviews and chooses the one that is most interesting. She orders and pays for one that she likes best. She plans to stop by the store tomorrow on the way home and pick up the game.
She sees the interesting “Gamefinder” widget on the front page. She puts in some settings that she’s interested in - a simple, cooperative game, with strong theming, and a mix of luck and strategy. She adds the range of players and ages (but not the length of game) and clicks the find button. The website returns a few results. She reads the descriptions, chooses a couple that seem interesting and saves them to her wishlist. When her fiance comes home she shows them the ones she was thinking about and they plan to go into the store and buy it the next weekend.
With so many potential things The Game Shelf might want to mention, I did a card sort of features and game finding methods to help inform the site structure. There were definitely some clear patterns, but coming up with category names for some groups ultimately was a bit difficult.
Using all of the information gathered above, I put together the site map below to base my wireframe around. One area I was unsure about was how to deal with all of the different ways to find games vs. buying everything else. I ultimately put "Browse All Games" under two categories to make it easier to find, but it's not a super elegant solution.
With a basic direction to move forward, it was time for sketching! I did some basic wireframes to look at different layouts. Ultimately I went with a version that had a left sidebar and kept a fairly traditional e-commerce layout.
The last step before moving into a digital wireframing tool was to create a user flow for Kaitlyn's journey through The Game Shelf website.
After my first version of the prototype, I did some user testing and used that feedback to improve my design. There were lots of grey squares that went into the first iteration. It was functional enough for an initial usability test, but I got the feeling that this many grey squares was too distracting to actually test with. Also, because this project didn’t have a paper prototyping stage, the issues that came up in user testing were probably smaller scale than they should have been. It was very interesting though.
Because this website is based around having lots of ways to find the same information,I had to structure the questions in such a way that the user would know what I wanted them to find and I had to design a variety of paths to get there without knowing what they would do. (While having a big obvious widget right up front that didn’t work.) It worked OK and people did take different paths, but I’m not sure this was the best time to be testing that.
I did make a number of changes - added a lot more pictures, fixed some issues like things not being in typographical order. I moved the “Jason’s Thoughts” and renamed it to give it less prominence. I also added the Gamefinder description to the product pages.
Prototype Version 1
The final prototype was created with Sketch and Invision. Sketch worked pretty well, but I wasn't able to do everything I wanted in InVision.
I also wasn’t able to do anything with the Gamefinder feature - that just ended up being out of scope and not something that was easily accomplished with these tools.
I did have several user flows included - searching for a game you know and then finding related, and then browsing by all or by theme and then filtering.
I found it fairly challenging to map out all of the screens needed and making them have a consistent flow. That Invision doesn’t update file names means that it’s ideal to have everything perfectly named ahead of time, but I hadn’t planned it out that well. It would be ideal to have a very complete list of screens ahead of time, but I also did add things as I had time.
Lessons Learned and Next Steps
This was a really interesting project. It certainly could have used more than two weeks of work! This was a good exercise in trying to achieve the appropriate level of fidelity for the feedback you are looking for. You don't want to have too many distracting details, but you do want to get useful information from the testing process.
As I mentioned above, a secondary persona would probably be helpful to use in further development and the game finder would be great to develop more fully.
This wasn’t a bad place for this project to end. While there are certainly areas the prototype can be improved, I’d really want some buy off from an actual client before investing more time in this particular design. Since there weren’t too many actual designs explored I’m not too convinced this is definitely the way to go. The next steps would be:
Confirm “Buy in store” is clear
Organize filters - adding tool tips
Get client buy-off to proceed with further development
Go play some games!
This is also a very data heavy project and unlikely to ever come to fruition, but it was an interesting exercise and I learned a lot.