Tabletop Game Store
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's the purpose
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:
1: Redundant And Confusing Navigation
2: Poor Visual Hierarchy
3: Hard On The Eyes 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.
What the data showed
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:
1: Product items hard to read
2: Inconsistent sizing of images and text
3: Side bar takes up too much room
4: “I get it, there’s free shipping on orders $200+”
Home page wireframing
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 perticular because it went directly against something I was taught while studying design. 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.
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:
1: Price
2: Add to cart button
3: Product description
4: 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. Right now that feature is not a priority but can be added later if needed.
Scaling up to desktop
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.
High fidelity
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.
Overview and takeaways
Overall I really loved working on this project. Its something I've wanted to do for a long time and have a deep passion for. I'll always make more tweaks to this project as I think of new things and refine my design skills, but I am ultimately happy with how this project came out.