How-to section with story design

[evan-white]

In updating the how-to section of the game we are going with a story card format.

[evan-white]

Here is a draft of what story cards could look like.

[KenEucker]

When we first discussed this, I had envisioned something less verbose with more images/icons. I like the mural == good, dumpster fire == bad idea.

What I was originally thinking, and we don't necessarily have to go this route, was something that is story/card based that is identical to what users would see when submitting a new tag with the exception that the how-to story and Instagram story would not show the form fields that would be present on the Tag IT form. #69 is the ticket for the development of the form and I was looking to integrate the story as the base for the form and then simply add the image uploads and textboxes.

@evan-white, does what I'm envisioning make sense?

[ellenwest]

In our meeting today, @evan-white brought up the great point that it might help reduce user frustration to state something to the effect of:

Rounds can be played quickly. Do it for the ride and don’t be sad if someone else beats you to it. You’re still a winner.

[evan-white]

Looking to collaborate with Jackie on this design and circle back in one week.

[evan-white]

After much deliberation, presenting the first version of the "How-To Guide"!

---

Card 1 - How BikeTag Works (Summary Card)

Biketag is a photo tag game where you find a mystery location in the real world by bicycle.

To play the game you need to understand these three things: Images of bikes and unique things together are what we call “BikeTags”. The object of the game is to find and create what we call “Mystery Locations”. The game never ends and every round is a new chance to play the game. ((Use the thing-we-need-to-choose (Like arrows, or swipe) to navigate this how-to guide.))

Card 2 - Gameplay (Finding the current Mystery Location)

The place where the most recent BikeTag was made is called the “Mystery Location”. In this example, an orange-colored bike is shown:

Card 3 - Gameplay (Creating a matching BikeTag)

Once you arrive at the Mystery Location you must create a matching BikeTag image of your own. In this example, you are the blue colored bike:

Card 4 - Gameplay (Creating a new BikeTag)

Next, it’s time to ride to a new Mystery Location and make a new BikeTag. Keep in mind, good Mystery Locations help progress the game.

Card 4 - The Mystery Location Explained (good/bad)

Great Mystery Locations have unique, interesting, and identifiable things. Think about where you want to go and choose wisely to keep the game running smoothly. Great examples include created objects like murals and buildings, and permanent objects like landmarks and natural features.

---

Card 5 - The Mystery Location Continued

Not-so-great Mystery Locations are featureless, obscure, and are inaccessible. They shouldn’t be hard to find. Don’t create a BikeTag that is unsafe for others. Not-so-great examples include temporary and moving objects like food trucks and graffiti, plain objects like concrete walls, and private property that would require trespassing. Remember, pick locations that help advance the game.

---

Card - 6 Submission Form

For the game to advance you will need to play your matching and new BikeTags! From the main page tap on “Play The Next Round”. Fill out the form: Upload your matching and new BikeTag images. Create a hint to help other players find your Mystery Location. Choose a name to credit yourself or your group. (This can be a nickname, team name, @Instagram or u/Reddit, anything!) Tap on “Play Biketag” to complete a round of the game.

Card 7 - Thanks for playing BikeTag!

Thanks for playing BikeTag!!!

(slideshow style animated gif collage of Biketags)

More questions? Email us at: hello@biketag.org Do it for the ride! Support us by buying some BikeTag Merchandise Bike. Discover. Share.

[evan-white]

[ellenwest]

Jackie will try matching the body font to what we have on the web; font name is Lato.

[KenEucker]

Leaving this here to come back to it later:

https://github.com/ramon82/zuck.js

[KenEucker]

This has been implemented in the new BikeTag App.