BoardGameGeek Redesign

The Concept

This is the dashboard to one of my favorite websites, Board Game Geek. Although BGG rolled out a fairly recent update to improve the UI, this website has had a longstanding reputation for being poorly designed and difficult to navigate, despite dominating the board game space and having significant influence on the hobbyist board game market.

Speed Sketches

I started by speed sketching 9 different designs for the website. I used a technique I learned in an UI/UX course, dividing a notebook page into 9 small sections, and spending no longer than one minute sketching in each section. I tried to think outside the box as much as possible -- when brainstorming, I believe quantity can come over quality, because if you are not willing to consider unorthodox solutions, you might miss the best solution.

Low Fidelity Wireframes

I hoped to create a new dashboard that would improve upon the design of the original first by making it more clear what the different sections of the website are. I wanted it to be more obvious that more threads and information in a given section could be accessed by using a large arrow indicating to users that the shown threads were only a small preview of the total content.

The Hotness

I also moved the Hotness, or section for the most trending board games, to the top of the page, in a hope to remove some visual clutter and give a larger preview of each game.

Responsiveness

In both my low fidelity and high fidelity Figma wireframes, I strove to design a dashboard that would be responsive to various screen sizes and window dimensions.

Style Guide

I then created a Style Guide to continue the color palette and other UI design choices that BGG's users had already learned, so that learned user behavior from the old site would still apply to the new design.

High Fidelity Wireframes

These are the final result of the high fidelity wireframes that I created. I added a more clear depiction of where forum previwes would be, as can be seen from where the gray boxes are.

The Hotness: Updated

I moved the Hotness into its own separate section, after realizing that more user content could be associated with The Hotness, such as forum posts and comments that would otherwise end up elsewhere.

Meeple Selection

Finally, I added a meeple icon in the corner of every section, so that the meeple could be animated to move around to whichever section the user clicks on, and reinforcing the idea that these sections reprsented an affordance using language that board game players could understand.