SPIELBOUND

Role | UX Design, UI Design, User Research
Deliverables | User Survey, Competitive Analysis, User Flow, Mood Board, Sketches, Wireframe, Branding, Prototype, Sitemap,
Two screenshots side by side of the Spielbound nonprofit and for profit websites

"WE BELIEVE GAMES INSPIRE, MOTIVATE, AND HELP US GROW. IN THIS POSITIVE SPACE, WE SEEK TO PROVIDE ALL PEOPLE THE CHALLENGE, ART, AND FUN UNIQUE TO THE WORLD OF BOARD GAMES."

Design Goals + Objectives

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.

USER RESEARCH

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 Research

RESEARCH ANALYSIS

The 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 Analysis

Design

user flow

The 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.

content strategy

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.

.com OLD SITE MAP

.com NEW SITE MAP

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.

.org OLD SITE MAP

.org NEW SITE MAP

wireframing + prototyping

.cOM

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.

HOME

HOW TO

MEMBERSHIP

EVENTS + rESERVATIONS

.ORG

The non-profit site's main use is the game library lookup - so I focused most of my attention there.

HOME

LIBRARY

FILTER

.ORG MOBILE

HOME

SPIELMASONS GROUP

accessibility

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."

ui + assets

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 Assets

Non-profit

high-fidelity prototype

Cafe

Live Site