zone.gg is my submission for the Adobe + Twitch College Creative Jam contest — A nine day long project to address a challenge prompt and create a prototype using Adobe XD. It received honorable mention out of 409 entrants!
Twitch communities are made up of diehard fans who learn about their passions from many different forms. Live streaming is one way to tap into knowledge, but how can this sharing become truly omnidirectional? How can communities help each other connect the dots between multiple sources?
Design a third-party desktop app or website that serves as a single-stop resource for any media related to a topic.
zone.gg is an online hub for gaming communities. On zone.gg, users can join communities they're interested in and interact with like-minded fans. Within these communities, users can create and post content to share with other members in the community, as well as interact with each other's content.
To honor Twitch's legacy, I decided I wanted my website to specifically focus on gaming communities. I created a survey about gaming communities and posted it online. It received 45 responses.
Goals:
• Understand the most popular current platforms to interact within communities
• Understand what users like about the current platforms they use
• Understand users' frustrations with the current platforms they use
• Understand if users prefer interacting within wide open communities or smaller communities
Based off of the results of the survey, I created an affinity map. I mapped out users' motivations and frustrations with the platforms they currently used, and divided these into subgroups. This was helpful to spot the common themes among responses, and would help to inform my persona.
Based on the survey results, I created a persona to hone in on the specific motivations and frustrations of our potential user. Community Carl would be our target user, and we would focus on addressing his needs.
I also conducted a competitive analysis of the three most popular platforms based off of my survey results to identify and compare the features each platform had, and help me identify what features would be beneficial to my platform.
Being that I only had nine days to create something, I used the MoSCoW method to scope out my project and help me define what features I would include to create the minimum viable product that would address the user's needs.
With my features settled on, I sketched out some quick low fidelity wireframes to plot out the general navigation and UI features of the website. This gave me better insight into the types of UI components I wanted to include; such as cards, carousels, and a side bar.
High fidelity wireframes created to fully flesh out my concept, created in Adobe XD.
For the logo, I wanted the "e" to resemble the side view of a joyful, laughing face. Because zone.gg would be for gamers, I also drew inspiration from Pac-Man for the "e". Overall, I wanted the logo to be bright while still being simplistic.
I then created the style guide and UI kit that would be applied to my wireframes. I wanted our design to stand out from the competitors, so I opted for a neon green and dark aesthetic. One small detail I'm proud of is the placeholder profile photo. When users don't apply a profile picture, their placeholder photo will be the "e" from our logo, which is designed to look like the side view of an emoticon face. (Like a happy Pac-Man!)
The final piece for submission was a prototype created in Adobe XD. The prototype can be viewed below or by clicking here!
This project challenged me to be able to identify and create a minimum viable product. Given the quick nature of the project, I had to decide what steps were necessary, as well as what features would be feasible to implement. If given more time, I would have liked to ideate further, conduct usability testing, and continue to iterate. Overall, however, this project taught me a lot about scoping and working within tight deadlines, which is an incredibly valuable skill!