Bike Tag

Bike Tag is a mystery photo tag game played on bicycles.

Role: UX/UI Designer, UX Researcher

Methods: Design Revision, Cognitive Walkthrough, Task Analysis, Usability Research, Low-Fidelity Wireframes, Information Architecture, Prototyping, Interactive Prototype Tour

Tools: Figma, Figjam

Client: BikeTag is a mystery photo tag game played on bicycles. Kind of like a scavenger hunt, players go to their game at bikeag.io to view the current Mystery Location and set out to find it. Once they find and take a picture of their bike at the current Mystery Location, players continue on to a new Mystery Location of their choosing. Players upload both the found photo and new mystery photo to complete a round of BikeTag and the game continues!

The Problem

BikeTag is played in select cities wordwide. It’s primarily played on the BikeTag web app, but sometimes played on other social platforms like Reddit and Facebook. Each platform and location offers slightly different rules and ways to communicate throughout playing the game.

What improvements can we make to BikeTag’s usability that will give current users a better game experience and will increase BikeTag’s appeal to engage more cyclists across the world?

The Research

Research began by completing an individual cognitive walkthrough of key tasks on BikeTag’s current web app. I examined whether the app fit the user’s mental model, visibility of actions, the connection between the control and resulting actions, and whether there was sufficient feedback given when completing an action. The Key tasks examined are:

  • View the current Mystery Location to Find

  • View any queued BikeTag Posts for the current round

  • View past BikeTag posts

  • View BikeTag Player profiles and past BikeTags

  • View leaderboard for the game of BikeTag

  • (Play step 1) join the current BikeTag round by adding a Found Location image, along with the associated data (name, found location)

  • (Play step 2) complete BikeTag Post by adding a Mystery Location image, along with the associated data (name, hint)

  • (Play step 3) submit the BikeTag Post, along with what websites to post to, in order to “win” the current round of BikeTag

Cognitive walkthrough results showed the user flow and game rules to be confusing to a newcomer. User’s expectations of the control and resulting actions were often not met, and there was insufficient feedback given the user when completing an action.

The next step in research was to conduct two user interviews focused on task analysis. Two experienced BikeTag players were selected for this study. One user played via Seattle’s official BikeTag web app, and the other played and administered on Minneapolis’ primary BikeTag Facebook group. Each participant was interviewed remotely using Zoom. Interviews lasted from 40-60 minutes in length. While specific subject matter varied, discussion topics focused around participants’ personal experience with BikeTag, and each was asked to share their screen and show us how they played the game.

Our team’s interview research goals:

  • Gauge First impressions of the web app

  • Find which tasks are most important to the user

  • Identify usability pain points

  • Identify what excites the user to use the app

Our individual interview notes and general findings were then shared with each other and compiled into a Figjam board for individual synthesis.

Main takeaways from the user interviews:

Users want a way to log in and keep better track of their BikeTags.

Users really enjoy the social aspect of the game, but both participants mentioned they know people who appreciated the anonymity of BikeTag and didn’t want to log in or create a profile.

Both users expressed the app was easy to navigate, but both users seemed confused and got lost or stuck multiple times throughout their BikeTag screen share tour. This demonstrated it’s usability could be improved, even for seasoned BikeTag players.

The biketag administrator expressed he would love to reduce his admin work like confirming correct locations and was excited talking about using geolocation in the future.

The Prototype

Low Fidelity Wireframes

With the user research findings in mind, BikeTag’s redesign began with sketching low-fidelity wireframes based on key pages within the app.

New user orientation, user profile page, and bike history layout (bike history was later changed to flow-of-game after reevaluating user priorities):

Information Architecture

To better visualize user flow and identify pain points, I created an information architecture diagram of the current web app. Screens were grouped, eliminated, and simplified. Priority was placed on found user pain points and improvements like: adding a login/registration page with option to skip and “play now”, and grouping all “play mystery spot” actions into one screen and user flow.

Prototyping

The research, wireframe mock ups, and and information architecture diagram were all used as a guide in creating a medium-fidelity click-through prototype in Figma.

This BikeTag design update focused on three key user experiences based on user needs:

  1. Allow user to Register, Log-In and Create Profile, or not register and “Play Now”.

  2. Improve on-boarding by simplifying how-to-play instructions and overall flow-of-play to make the game easier to understand for beginners and improve current players experience.

  3. Geolocate the mystery spot to reduce admin responsibilities and make mystery spots easier to find after its location is found & revealed.

The Next Steps

The prototype created was not a fully built out. Here are additional next steps to complete the prototype and considerations for the future:


1. Settings Page - for customizing profile features (profile photo, update email/contact, privacy settings, etc).

2. About Page - write extended rules add general Biketag info (city locations, history etc).

3. Group Games - Minneapolis Facebook BikeTag groups enjoy being able to play multiple mystery spots at once. Allowing users to create group games with select other players in their area would encourage more people to participate.