Board & Hoard

Mobile App Design for Board Game Enthusiasts **Iterating UI 7/26/2021**

Overview

I was tasked with finding a client in my life with an mobile application idea. I partnered with my friend, Ethan. He is a a board game collector and player. He wanted to create a mobile app that functions and looks better than the current one he uses.

Roles and Responsibilities

Client: Contributed the scope of the project and discussed ideas with me.
My Roles: Research, deliverable creation, sketching, wireframing, prototyping, logo design and animation design

Problem

1. How will we provide a mobile based community for board game enthusiasts to meet in real life to play board games?
2. How will we create a UI that is more delightful, organized, and user friendly than the competitor mobile apps?

Audience

1. Board Game Players
2. Board Game Collectors
3. Age 20-40 years old, any gender

Solution

1. Created during a 3 week design sprint
2. Designed for iPhone

Discovery and research

How Might We?

My client and I spent time together to ideate what he would like in a board mobile application. Most of what he wanted could be organized into four categories.

Competitive Analysis

Board Game hobbyists one main source for finding out information about board games. That source is Board Game Geek (https://boardgamegeek.com/). Board Game Geek has three apps on the mobile store that link with their database of games. These are the most popular mobile apps that are similar to what my client would like to create.

BGG Game Information

Strengths

  • Detailed search options
  • Icons
  • Game description area

Weaknesses

  • New board game players might not understand how to use the app or what terms mean.
  • Visual design and layout is not mobile friendly or user friendly. It also isn't simplistic and has too much visual noise.

Threats

  • Adding onboarding and definitions for types of games.

Opportunities

  • Text size issues and Readability issues.

Board Game bible

Strengths

  • Favorites list has many categories and is easy to access.
  • Favorites has a wish list and sharing feature.

Weaknesses

  • Text needs padding.
  • Layout is awkward and confusing.

Threats

  • Searching doesn’t offer ways to sort results.

Opportunities

  • Tracking Kickstarter backed games would be a nice feature to add.
    Social functions
  • Social functions

Gamehood

Strengths

  • Visual Design is the best of the three apps.
    Homepage
    Name and Logo
  • Homepage
    Name and Logo
  • Name and Logo

Weaknesses

  • Users can’t track gameplay or leave reviews.

Opportunities

  • Adding more features.

Overall Thoughts

Overall, I think that the mobile app with the most relevant features is BGG Game Information, but unfortunately it has the worst UI.  None of these apps have community features, such as events and sharing information with friends.

Pain Points

1. The mobile apps available are not user friendly, and don’t follow best design practices.

The mobile apps available are not user friendly, and don’t follow best design practices.

2. Board Game Collectors have organization problems and users will need an organized interface.

The mobile app design that we are creating is going to offer users with ways to organize their game collections. Part of that organization will allow users to view a game shelf, wishlist, and a list for games they own but haven’t played yet.

3. Tracking a user’s board game playing experiences.

We want users to be able to create a history of game plays and reviews. This will help with keeping track of important notes about game play.

4. Creating and Expanding a user’s board gaming community.

User Journey map

Empathy Map

Persona

Information Architecture

User Stories & Flows

We chose these user stories:

1. As a board game player, I would like to find local board game events.
2. As a board game player, I would like to rate and review board games.
3. As a board game owner, I need to save a list of all my games that I own.

Important User Stories that we didn’t focus on for the MVP of the product.

As a user, I would like to be able to scan my board games barcodes to add them to my bookshelf.
As a user, I would like to be able to decide which aspects of my profile are visible to whom.
As a user, I would like to buy board games from the mobile app through an Amazon Affiliate Link.
As a user, I would like to be able to message my friends on the app directly.
As a user, I would like to be able to keep track of who has borrowed my games.
As a user, I would like to know which games I co-own with friends

Site Map

I created a site map to help organize my thoughts before sitting down to sketch and create wireframes.

Wireframing

Sketching Process

Crazy 8 Sketching session to work on potential ways to layout the home page.
I picked two of the more promising sketches for the homepage and developed them further.
Version 1 has popular games and events on the homepage followed by a vertical scrolling feed.
Version 2, has the events and feed on the home page with a bottom button wheel instead of a bottom navigation bar.

Wireframes

Usability Testing

Results

5 board game players tested the low fidelity prototype. These are the results:

Conclusions

Privacy Concerns

I had not thought about privacy issues with the event pages. I will add more privacy controls for the users in a future iteration.

Adding Games Within The User Profile

Adding games to the profile is available from the search, browsing, anbd game information page. I will add a button on the profile to enable this user path.

Ui Development

Color Branding

Typography

Logo Development

Illustration and Animation

High Fidelity Mockups

Overall Experience

Did we meet our goals?

What did I learn?

Other Findings

Next Steps

Final Thoughts