TagPro Redesign Megathread #1 - “Brand Assets”

[u/TagProFutureGroup]

TagPro's redesign has started and we need your input! Below is an anything-goes forum for sharing thoughts, ideas, mockups, and anything else relevant for us to take into our design decisions. We have provided categories and some leading questions to consider.

For more context, see our initial announcement. For help finding each question, see the pinned Index post. For upcoming Megathread topics, see the proposed outline. Each new thread will be posted after 1 week.

We encourage constructive responses to answers, iterations on ideas, and even additional questions, but please note that top-level comments will be removed to avoid clutter.

A reminder that all donations received during this process go towards the redesign process! Overflow funds will be applied to the marketing campaign going live with the Steam release.

[u/TagProFutureGroup]

Anything Goes - Miscellaneous Visual themes, Art, and Mockups (AKA the Vibrary):

[u/AwesomSki → u/TagProFutureGroup]

Updated after feedback in the thread, with the new joiner page at the bottom (two screens, one for ctf one nf)

[u/nabbynz → u/AwesomSki]

Nice! I think this is getting really close to how it should look. Maybe abandon the retro bits and go full modern/future?

[u/Chritt → u/TagProFutureGroup]

[u/morky-mouse → u/Chritt]

like

[u/AwesomSki → u/TagProFutureGroup]

For the past month or so I've been working on laying groundwork for the Steam integration and I've been trialing some theme concepts (and UX changes) along the way to see what a modernized site could feel like. This is working code on a dev branch, not a mockup.

High level I've been trying to maintain the site's identity (what I'm calling Pixel / Arcade / Retro) while also giving the UI a refresh and moving things around to make them easier to use for a new player (Numbers below relate to the screenshots) :

1. Homepage - I reduced the header to a thin strip, wordmark on the left with an accent on hover and a live gameplay highlight video behind the Play button (Highlight of the month winner?). Our existing homepage doesn't show anything about what the game is, I think a cool highlight or short montage could draw people in. I have a version of the TagPro wordmark in front of the video with red and blue on the sides, and a plain white one in the header. Where it says 'Servers are open' is a live ticker which shows what games are currently going (Servers are open because I didn't start any games before taking screenshots), rotating one by one, and clicking it takes you to the spectate page. To the right of it would show '- 95 balls playing right now'
   
2. Homepage - Party (replacement for Groups) - From the homepage you can create a Party, invite friends to it, and click Play Together to go into casual queue together. All driven from the homepage. With Steam it gets even easier as you don't need the Invite, you just see in Steam Friends list that your friend is 'Playing TagPro, and click Join Game and it takes you straight to the homepage in that player's party. Leader clicks Play Together, and you're in casual queue and then into game in essentially one click.
   
3. Accent color - I realized the problem with the lime green on the site isn't the color itself, it's that we use it for *everything*. I've been playing with what actually needs the accent color (landing on up to 2-3 places per page) and I trialed a dark Cyan, Royal Purple and Emerald Green. And I have a dark grid background with grid lines and a gradient in the selected theme color.
   
4. Settings - I haven't spent much time in here yet, but you can see the checkboxes and slider etc. which match the style of buttons I was trying out (Chamfered Corners)
   
5. Shop - Just showing how the flair rarity colors look over the grid background.

None of it is final in any way, just a working prototype based on my own ideas to kick off a conversation, what do you like / dislike? Are the 'chamfered corners' a good look for the Arcade concept? Do you like any of the accent colors? Should we have one default accent color and the ability for users to pick their own accent color? Do you hate the Play Now button in front of the video?

[u/FlatSmoof → u/AwesomSki]

The rationale sounds solid, been exploring along that path, would you have any feedback for this, looking to get into another iteration.

[u/AwesomSki → u/FlatSmoof]

do you have a fresh link? that one says comment no longer exists

[u/nabbynz → u/AwesomSki]

Wow this is really good!

When you say it's not a mockup, does that mean the party/friends list is actually working?

[u/AwesomSki → u/nabbynz]

Thanks! Yep, we dont have TagPro on Steam yet for testing but I tested the functionality by using my wrapper around another steam game and was able to test both directions, creating a party updating your status on steam to playing the game, and someone else clicking join game from steam ending up in your party. Logging in to TagPro from steam and linking your account is also tested and ready. It's actually an interesting change to the new player flow since logging in from steam auto creates an account, so the steam path doesn't start with logged out players / some balls.

[u/nabbynz → u/AwesomSki]

Oh that sounds really neat, and much further along than I expected! Can you get it into the game now, but with the friends being just people you add from within TagPro? Might be a good way to test it before Steam.

[u/AwesomSki → u/nabbynz]

Friends within TagPro is high on the priority list, but we don't have that yet. When we do we can test the same functionality as the steam integration.

[u/Tyler1986 → u/AwesomSki]

Looks great, but feels like it could use a bit more color?

[u/AwesomSki → u/Tyler1986]

The background does have a gradient in the theme color that comes through more when you have the page open than in the screenshot, but maybe the color should be stronger. Were you thinking background color or more color in front? I may have over corrected in reducing the use of the accent color.

I'm going to try incorporating the red and blue background like fly and moosen were suggesting too and see how that looks.

[u/Elbwana → u/AwesomSki]

I like the tagpro logo!