BikeTag Vue App Pre-Release Feedback

[KenEucker]

Leave your feedback here!

I may be posting feedback gathered from other sources here on behalf of others, anonymously.

[KenEucker]

@ykyu says

Index page:

• No padding at top of page; Seattle Biketag image hits the top margin
• Very unclear what bike icon on upper right of photo is for
• URL suggests this is where the queue goes, but there's no explanation of the queue in the How-to and I know know about it because of prior Reddit discussions
• I kinda think the existing "Archive" term was clearest even though I do love Bikedex/Tagdex of course
• Feel like there's too much space between the bottom of the current tag and the about/players/top10.

How-To screen:

• Arrow scroll is not above the fold
• I feel like 2 should go first and that 1 should use the defined "mystery location" in place of "unique things"
• I think 4 should be reworded as "To complete a BikeTag round you must submit a BikeTag of the current mystery location and a new mystery location" to use consistent terminology.

Archive page:

• Very unclear what are clickable things from this page. The options seem to be getting the image (click image), going to a user page (click name), and going to the individual tag page (click text under image). I know these are meant to mimic Polaroids which is very cute, but underlined text/other link indicators would be helpful, especially since there's no hover on mobile.
• Also the yellow bit with the tag number at the top of each tag should maybe also be a link to the tag page
• Hints not available from archive User page
• Magenta bubble with total tags does not fit more than 2 digits
• Username has potential to be unreadable at the top of the page, depending on the image it's on top of. Should probably just be a regular header
• Might be nice to note that the top image is the user's first tag

Player index

• No idea how these are sorted (seems to be most recent newly created user). Probably limited on options here though since there's no db?
• Some note at the top about case sensitivity/logging user tags would be helpful. Maybe something like "Players must use the same name (case sensitive) in order for their tags to be collected on their individual page" or something.
• Circles should be centered, imo. The breakpoint for multi-circle rows seems to be pretty high so it's one circle per row for long while, and those circles being left-justified is weird.

Top 10

• Breakpoint (for multi-circle rows) seems to work better here VS player index
• 3 digit tag counts look better here, but could still use a bit more padding
• Only 9 users are displayed in the top 10? Other comments
• I really like the dates for "posted on." Super helpful reference.
• idk how much work you've done on queue/latertag stuff but I generally like the simplicity of the site/game, which makes it easy to introduce it to new people, and feel these features would add a lot of unintuitive complexity

[KenEucker]

To respond to the feedback above. I have omitted items that have already been resolved.

Index page:

• Very unclear what bike icon on upper right of photo is for This is the icon for the queue, which needs introduced in some way I think.

• URL suggests this is where the queue goes, but there's no explanation of the queue in the How-to and I know know about it because of prior Reddit discussions Yes, I think adding explanations for the queue in the How-To are prudent. My original intention for the How-To was for it to nearly mimic the UI for the queue such that it would feel like you are going through the steps when viewing the How-To. This was hard to translate.

• I kinda think the existing "Archive" term was clearest even though I do love Bikedex/Tagdex of course This has been changed to "BikeTags"

How-To screen:

• I feel like 2 should go first and that 1 should use the defined "mystery location" in place of "unique things"
• I think 4 should be reworded as "To complete a BikeTag round you must submit a BikeTag of the current mystery location and a new mystery location" to use consistent terminology.

I think the How-To needs to be improved and our upcoming UX initiatives will be focusing on this.

Archive (BikeTag) page:

• Very unclear what are clickable things from this page. The options seem to be getting the image (click image), going to a user page (click name), and going to the individual tag page (click text under image). I know these are meant to mimic Polaroids which is very cute, but underlined text/other link indicators would be helpful, especially since there's no hover on mobile. This has been addressed by moving items around and changing what is clickable. Hopefully making the experience more intuitive.

User page All items resolved, except

• Might be nice to note that the top image is the user's first tag This is a great suggestion, but I think the idea is that we are intentionally putting very little into these kinds of considerations until later when they can be changed. For now, things like this will be released without much intention.

Player index

• No idea how these are sorted (seems to be most recent newly created user). Probably limited on options here though since there's no db? These are sorted in the order of most recently played tags. We can sort by all sorts of different metrics. If you have suggestions I am open to adding other ways.

• Some note at the top about case sensitivity/logging user tags would be helpful. Maybe something like "Players must use the same name (case sensitive) in order for their tags to be collected on their individual page" or something. Thanks, added!

Top 10 All items resolved

Other comments

• idk how much work you've done on queue/latertag stuff but I generally like the simplicity of the site/game, which makes it easy to introduce it to new people, and feel these features would add a lot of unintuitive complexity We are working on this!

[KenEucker]

After a collaboration with the Prime Digital Academy, we have an amazing set of feedback and designs that I will detail in individual comments below;

[KenEucker]

From Colleen Burke:

Summary After completing an individual cognitive walkthrough, and conducting 2 participant observational interviews as a team, I’m prioritizing 3 key Biketag goals based on user needs:

1. Allow user to Register, Log-In, and Create Profile.
2. Simplify How-To-Play instructions and overall flow-of-play to make the game easier to understand for beginners.
3. Geomap the mystery spot to reduce admin responsibilities and make mystery spots easier to find after the location is found & revealed.

Next Steps

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 - give user the ability to create their own game with select friends (Minneapolis FB Bike Tag groups enjoy being able to play multiple mystery spots at once)

Images from design:

[KenEucker]

From Kendall Van Horne:

Summary Key findings:

1. The screen flow from entering the found location to submitting the new mystery image is not in line with the bike community’s mental models.
2. The navigation would benefit from improved consistency, verbiage and hierarchy.
3. Profiles would be a good addition for more competitive players.

User stories:

1. As a casual biker, I want to breeze through the BikeTag submission process when I complete my ride so that I do not have to use my phone a lot while I am biking.
2. As a new user, I want to try out BikeTag and quickly find key information and buttons so that I am not slowed down by trying to learn how to use and navigate the app.
3. As a competitive player, I want to compete against other BikeTag player profiles and track my own score so that I am motivated to keep coming back to the game.

Next Steps While this prototype covers the majority of the changes I recommend at this stage, there are a few additional notes based on user feedback that I would recommend exploring as well:

• Adding the ability to map the location of tags on a digital map. Users could revisit the map in the archive to explore past locations if they’re looking for a fun place to bike to. They could also use the map for dirctions to get to the place.
• Adding the ability to share tags to all major social sites, in addition to Reddit, such as Twitter, Facebook, and Instagram.

Images from redesign

[KenEucker]

From Lisa Zampogna

Summary BikeTag’s concept is simple but the website usability could improved by adding:

1. Wayfinding instructions
2. Optional social interactions by logging in.

Next Steps Moving forward I would:

• Build out a slide out nav menu
• Create an admin panel to allow for modification of local rules, edits of post and newsletter settings. Integrate option to login through 3rd part accounts, as well as allowing email only logins with options to post social media handles.

Images from redesign

[KenEucker]

From Natalie Lindquist:

Summary Research Findings BikeTag players engage with the game very similarly, but engage for slightly different reasons (competitive nature versus just for fun)

Research findings show that BikeTag.io has everything that is ‘needed’ to successfully play the game, but as noted by one of the users, “the flow could stop someone from starting and completing the game.”

This flow can be easily smoothed out by using a consistent visual language across the platform.

User Stories[3 types] USER 1: As an experienced Biketag player I want to be able to quickly & easily move through the flow of uploading my images to play the game so it doesn’t feel like a task and I can continue to enjoy playing for fun in my down time.

USER 2: As an intermediate Biketag player I want the ability to view my tags, as well as others, so I can visibility see how they compare to others to fulfill my competitive nature while also socializing.

USER 3: As a casual Biketag player I want to be able to clearly understand how the game is played, so I don’t get discouraged and leave the site altogether. I want to play!

Next Steps

1. Create a user login page
 a. All users could still play, but would have the option to create a login and have a profile OR just play without a login.
 b. Create a HOME/profile page for the login users. This would include their stats, past uploads (of both their solved mystery finds and their personal mystery locations uploaded).
 c. For users who use login, I would implement the ability for them to create groups with their friends if they want to play in multiple groups (with the hope that this wouldn’t deter them from joining in the community game, but give them more opporunity to use the platform).

2. Create the ability to map/route where the user has biked. 

3. FAQ page
 a. This would include FAQs not covered in the 30 second How To video.

4. Support/Contact page

5. Privacy Policy page (including User Agreement form)
 a. The User Agreement form would be an item kept in each users profile. If the user doesn’t have a profile, I imagine they would be prompted to “accept” the UA each time they play.

Images from redesign

[KenEucker]

From Rose Weselmann

Summary KEY FINDINGS/ RECOMMENDATIONS:

Users found there were too many steps to participating in BikeTag through the current website. Regardless of the variying level of competitive attitudes among users, they all shared a common desire to efficently and quickly submit tags to be a part of the game.

USER STORIES

Addressing hierarchy, consistency and visibility, simplifying the submission tool was the main focus. A quick login option with agreement to TOS, saving the username and minimizing the submission steps down to 3 rather than 6 helps attend to these challenges.

As a competitive BikeTag player, I want to quickly post a Tag so I can compete in a current game of BikeTag

As a casual BikeTag player, I want a hint for the mystery location so I can approach the exisiting round of bike tag.

As a new BikeTag player, I want to learn how to play the game of BikeTag to play against the biking community

Next Steps

• Build out a profile page that allows to edit name, bike, and city of play.

• Build out a leadership board that presents the top 10 players in participating city

• Build out queue page to see who’s competing in real time with other BikeTaggers.

• Build out pages in the hamburger navigation including a mobile view of the biketag.org website.

Images from redesign

[KenEucker]

From Danielle Byers Summary

Through a cognitive walkthrough and user research, I found that the website has a great minimalist design and intentional simplicity, but lacks clear labeling and call to action buttons that complicate ease of use and understanding. Recognition over recall is a major theme as the user needs to memorize where pages are and what buttons do, instead of clearly being able to recognize their functions.The main feature of the website is submitting a found tag and adding a new one, however this feature is clunky for experienced users and hard to navigate for new users. In the website's current state users do not need to login in to submit a post and profiles lack personal information or ways to connect or message each other.

Key Takeaways

Positives

• Biketag users prefer the minimalism and ease of use the website offers

• User liked the size and location of the current bike tag and that it opens immediately to that page

• 1 out of 2 users preferred not having to log in (but did wish the form would remember their username to speed up submission and keep it accurate)

Pain points

• Both new and frequent users struggled to understand the navigation due to lack of visibility of important information, clickable features, and buttons,

• The navigation of submitting a found tag and uploading a new tag was bulky and new user struggled to get through it

• The lack of rules on the website causes a pain point for both the biketag community and new users who want to play

• 1 out of 2 users wish there was more of a social aspect or ability to login and connect to other users

User Stories

• As a biketag player I want a simple platform to view and submit a tag, so I can find and claim the tag as fast as possible.

• As a new user/ Biketag player I want to understand how to play and the rules, so I can easily join the game.

• As a BikeTag player I want to clearly understand the actions on the pages that I quickly navigate while on the go.

• As a biketag player I want to be able to login and message other users so that I can feel like part of a social community.

Next Steps Recommendations

1:Relabel pages, buttons, and clickable features that allow for stronger recognition, with clear calls to action and better matches between the system and the user’s mental model. Improve readability of important key words and color contrast on buttons.

Goal: allow users of all experience levels to better navigate and use the website more efficiently. Improve understanding for new users joining the came.

2: Simplify the navigation of the tag submission flow by condensing the number of pages and improving visibility and hierarchy of important functions on the page.

Goal: Speed up the interaction of submitting a tag and new tag while to better fit the needs of users actively on a bike route. Improve visibility of system status of the pages for both new and frequent users to understand and use the pages.

3: Login and Profile personalization

Create an option to login in and create a profile. This option would not be required and the method of adding a tag without logging in would still be present. On the profile page: Add optional social media connection link and way to direct message

Goal: give users who want to connect to other users and are looking to use BikeTag as a social connection an ability to do so, without forcing all users to login and make a profile. The login feature would also speed up posting a tag as the name of the user would already be recorded.

4:Reformat the How to Page adding in community rules

Goal: remove pain points for the entire community and for new users joining biketag by clearly stating the rules.

Images from redesign

[KenEucker]

From Jamie Tan

Summary Major Findings The naming conventions differed from the user’s current mental model. Users enjoyed a having a “Leaderboard” to track their progress against others. The font was difficult to read at times, such as profile names. Before playing, the user searched for and wanted to read the “Terms of Service” agreement, they preferred that it was separate from the “submit” button. Users were confused during the “play” portion, the content on the page did not provide clarity for what next steps are available or if their action was complete, one user specifically asked for a progress indicator.
The text in certain sections, such as the “about” page was too much to read.

User stories As an avid biker and casual player of BikeTag, I want to be able to quickly go through and upload my images so that I can participate, but spend minimal time doing it. The flow of the uploading images should be obvious and easy, with minimal text to read through. As an avid biker and first time player of BikeTag, I want to learn how to play BikeTag so that I can add another fun aspect to my biking routine and be involved in the community this way. The game should be easy to pick up with clear instructions, and with as minimal text as possible. As an avid biker and a competitive player of BikeTag, I would like to be able to track my score and see how I compare to my competition so that I can play better. It should be clearly indicated where the leaderboard is on the navigation, and profile names should be legible.

Next Steps

1. Build out the rest of the pages, such as Archive, About.
2. Test out this prototype with new and current BikeTag players.
3. Add what users think is missing. Make changes based on findings from testing.
4. Repeat step 3 and 4 until prototype is satisfactory.

Images from redesign

[KenEucker]

From Kelsey Vierow

Summary Theme 1: User Flow Frequent users of the app had a good mental model of the interface, however it wasn’t as intuitive for new users. In this version screens were simplified and the main user flow is front and center

Theme 2: social engagement Players enjoy the social aspect of biketag, but don’t want this to be a requirement to play. now users have the option to register in order to claim their username and update their profiles

Theme 3: labeling and consistency Users enjoyed the tactile and gritty feel of the app, but overall clarity and consistency can be improved. This version simplifies user journeys and standardizes visual content across pages

User Stories “As an avid cyclist and game player, I want an app that I can open and be able to take and post pictures without clicking around so that I can get back on my bike and keep playing”

“As a new cyclist, I want a way to connect with other players so I can get to know more people in the biking community”

“As a bike commuter, I want to find new landmarks that aren’t on my normal route so that I can learn my city better by bike”

Next Steps

Players of Biketag reported different rules across platforms, so further user research could be conducted to clarify this Can users upload banked photos for their new location, or does it need to be photographed after uploading their first image? What is the time frame for uploading your new location? Clarify the rules of sniping - when can other users snipe the round and upload their image?

Add graphics and animations to emphasize the gameplay and make users feel like they are playing a real game of tag

Consider geolocation services to automatically tag landmarks and make all tag locations searchable by map

Images from redesign

[KenEucker]

All pre-release feedback has been incorporated into the app as it could be fit.

Many thanks to everyone involved!!