Spielbound is a board game cafe in Omaha, Nebraska, that has both a non-profit and for-profit website and organization. They haven’t updated their websites since their creation in 2014 and have never had a designer on board. The .com website uses Square and they intend to keep the free version of that site, limiting the design choices we can make. In contrast, the .org site uses Drupal and they would like to switch over to an easier to manage and edit website host. We had a target deadline of 6 months, and we went past that to finish both sites. They need to have both websites for tax purposes, and both contain information useful for visitors of the physical cafe.
The .org website contains information on the non profit groups, volunteers, event calendar, donations, blog/newsletter archive, and most importantly the game library. The .com site includes cafe information, the online store, reservation system, information on how to visit, and memberships.
Surveys and usability tests to gather user feedback, focusing on both the .com and .org sites of Spielbound, leading to a focus on shopping and the game library sections.
View ResearchThe board game cafe's .com site caters to purchases and reservations, while the .org site focuses on the game library and events, suggesting a WordPress transition for improved management.
View AnalysisThe user flow for the board game cafe's websites starts with visitors to the .com site looking to purchase games, memberships, or reserve tables. The .org site is mainly used by guests looking up the rentable game library and volunteer groups. It's important that the two sites remain separate, but the sites should link to each other. The .com to the .org for the game library, and vice versa to encourage visits and retail purchases.
Click image for larger view
The cafe site needed consolidation, several of the pages were redundant and could be removed, and there were a few pages that were missing, such as and event calendar and a link to the game library.
Click image for larger view
The cafe site needed consolidation, several of the pages were redundant and could be removed, and there were a few pages that were missing, such as and event calendar and a link to the game library.
I focused on streamlining the process of linking the two sites, while trying to give visual clues so the user always knows which site they're on, regardless of being able to see the url.
Click image for larger view
Click image for larger view
The non-profit site's main use is the game library lookup - so I focused most of my attention there.
Click image for larger view
Click image for larger view
Click image for larger view
I designed Spielbound to be compliant with the Web Content Accessibility Guidelines (WCAG) by following version 2.2. I ensured sufficient font color contrast by using WebAIM's contrast checker to meet accessibility standards. Additionally, I set a default font size of 16px, which is larger than the browser default of 14px, to enhance readability. To provide accessibility for media, I made sure to include text captions when using any form of media. I avoided taking control of the user's keyboard and ensured that keyboard focus was not trapped when making alterations. I refrained from using blinking, moving, and flashing items altogether. I did not utilize colors solely to indicate function, such as using green to represent "go" or red to signify "stop."
There had been some preliminary branding work done, and I used that as a starting point for the continued branding and assets created.
View UI Assetshigh-fidelity prototype
Live Site
Link