Tabletop Game Web-store
An unsolicited redesign of my local game shop’s webstore to help users find what they want easier on desktop and mobile platforms.
What’s the purpose?
A webstore in general is meant to allow people to shop online rather than in the store. This web-store has the added challenge of also being a community hub. A place where locals and frequent shoppers can go to see what events are being hosted, when new products are releasing, and read general updates about the store like sales or holiday hours.
What are the problems?
While I think the site is serviceable, I think it has some glaring issues that make using the site more difficult than it needs to be.
These problems include:
Redundant Navigation
Poor Visual Hierarchy
Bad Styles
Out of all of the issues, I knew the navigation was the biggest. Having two very similar types of navigation, the side bar and the nav bar, that helped the user do two different things, search for products and engage with the community, just took up a lot of the page.
Understanding the users
I needed some data to understand what the everyday user was thinking. Were they confused? Did they have a hard time finding what they wanted? Did they even know about everything the site offered?
I worked within my weekly gaming group of about 25 people who had a range of experience using the website. I asked them to show me how they would find specific products, view updates about the store, and general thoughts on the look of the site.
Learning #1:
Restructure the search process so users can find what they are looking for faster. This can be done by adding more common keywords to the search fuction in the backend and by redesigning the filters to be usable.
Learning #2:
Consolidate community engagement and “news” to avoid confusion.
Learning #3:
Product items hard to read
Inconsistent sizing of images and text
Side bar takes up too much room
“I get it, there’s free shipping on orders $200+”
Constraining myself
While this is just for skill building and not an official redesign for the site, I am treating it as though it is. With that comes constraints. I’m not on a tight deadline but I do need to keep my imaginary developers in mind. This site was made through Shopify, so I also need to dig into my understanding of how Shopify sites are built and what limitations they have. Lastly I want to keep it realistic. A small business is going to be cautious of big changes. Big changes can take away time from the business and lead to potential profits loss. Any changes I make beyond colors, fonts and layout need to be intentional and show their value upfront.
Iterating on the Home Page
Focusing on visual hierarchy alone, many great ideas came out through the ideation process. I had never worked on a project that required heavy hierarchy reworks, so I was shocked to see how much of an impact it had on where the pages took your eye, even with just plain copy and some gray boxes.
Although many great ideas came out, I really liked one in particular. The main feature was an image carousel that would highlight popular games in the store. Games that both require a bit of effort (money) to really get into and are constantly being played at the shop so visitors always have a community to play with.
Beyond that, the home page would show featured products (whether that was new releases, clearance items, or thematic sales), have a section about upcoming releases and events, and a “store news” section. The home page was going to be the embodiment of what the store is. Focused on community, sales, and getting people into the shop to play.
Expanding the product
With a great idea on lock, I started to expand on the product picking out a few main screens that were important to the users. I decided those screens were the search results and the main product page.
Search results
A lot of the issues with the search results page are in the logic of how products are displayed. So the main thing I focused on were cleaning up the style of the product tiles, making them easier to read and more attractive. further down the line, in low and high fidelity stages, I’ll organize the tiles in a way to show how the backend logic will display the products.
The design for the product tiles were very similar to the original tiles. This design would later change as they didn’t work well in a desktop layout. Images were far too small and the connected “chin” that held the product text, made it hard to scale the tile up and still have it look attractive.
Product page
All of the issues on the product page are purly cosmetic, but they touch on many of the general problems that my user group had with the site. The main product images were inconsistent and sometimes just too small. The elements had inconsistent styles. And the description of the product was nowhere near rest of the product interactions.
As far as organizing the product page, I wanted to keep it simple:
Price
Add to cart button
Product description
Product image
The site also has options to write reviews and rate the product, but after a fairly long search I have found that the feature was used 4 times across 3 products out of hundreds. Most people either know why they’re buying the product and don’t need reviews, or are already talking with other people that bought the product during the time that they spend at the shop. Overall that feature is just adding clutter to the page and simplifying down to the most helpful items is going to make the site better.
Scaling up
This is the point where I realized the product tiles needed to be updated. Fortunately by taking the “chin” away, allowing the image to scale independently of the text, the work was basically done. It was just a matter of finding an image size that worked well for desktop. The aim was to have four products per row. That way it didn’t feel like your eyes were scanning across a whole screen.
Prototyping
With low fidelity done I built out some inbetween screens and showed my user group what I had created. After only a few seconds they could tell me exactly how they would navigate it to find a game they wanted to buy and noticed how rich with info the home page was.
Finalizing
I jumped into high fidelity, really focusing on keeping my styles in line with what worked in the existing site. Existing typefaces were lacking because of the visual hierarchy, so with that updated, the text looked clean and fun.
Color was a bit of an issue though. The site was built using a dark template in Shopify and it worked for the store’s brand. For the first time, I was designing for a product in dark mode.
The first thing I changed was the type of black being used. Originally it was pure black but I changed it to dark graphite, invoking that feeling of pencil lead being scribbled down on your character sheet while playing Dungeons and Dragons. This “black” felt far more comforting and less distracting. Next I changed the red that was being used because it was too bright. I toned it down to a desaturated blood red. It still pops on the screen, but its not as crazy as the old red. However, the old red does live on in the logo. While it is contrasting the rest of the site, I don’t think its distracting.
Conclusion
Overall, I loved working on this project. It really got me to think about how to solve problems creatively and put everything I’ve learned to the test.