An Online Interactive Pick-Up Gaming Platform
There is a subset of frequent online gamers who value play that is both
balanced and socially meaningful. However, these same gamers are often limited
to automated, in-game matchmaking solutions that lack the functionality to support persistent, socially-linked teams and the scheduling of voluntarily accepted matches with other teams.
The Tag Network is a concept for a user-curated information application. The purpose of the platform is to encourage competition by providing users with the ability to freely associate with user-defined teams, enabling them to organize and track their own competitive 'pick-up games'. By using the application, players would define an identity not only for themselves, but for their teams as organized entities.
Click here to explore the prototype in your browser.
Initial architecture sketches
Refined pencil sketches
For this project, I developed a structure and aesthetic for a data-driven website.
In order to create Tag, I followed a comprehensive approach to information design involving competitor research, user task flows, hand-drawn wireframes, iterative digital wireframes, visual research, aesthetic development, digital page mockups, and a web-ready interactive prototype.
Mapping user task flows
Digital wireframing and iteration
Aesthetic development (tone, palette, type, etc)
Final mockups for UI components
The prototype was built to give viewers an understanding of how Tag might exist as a living ecosystem of players and teams. I used Sass to translate my visual designs into an extensible, component-based style system. Powered by AngularJS, the application uses several external JSON files to populate player, team, and match data. I also used Python to collect random match data into a feed.
Screenshots of the finished web prototype
For a much deeper look into Tag's development, take a look at my process book! You're also invited to check out the Pinterest board where I collected visual inspiration for the site.