As part of the Adobe Creative Jam X Twitch design challenge, Zone was created as a desktop app as a platform to encourage the discovery of new interests with various forms of media while fostering a sense of community.
The first step my teammate and I took with the project was to analyze the creative brief and zone in to parts that we wanted to focus our design solution on. We established a clear question to ground our approach.
As the host of the Creative Jam, Twitch was the first place we turned to in order to get a better understanding of the community aspect alongside the large amount of diverse content and how their features helped users interact with it. Twitch’s home page is a rich area that allows users to discover new streamers and content. There are several categories of topics that can be broken down to smaller groups and tags when searching. However, even though there are several areas of interests on Twitch such as arts or food content, it is predominated by video game live streams. We sought to expand the discovery to include a broader range of topics.
Our team conducted short user interviews to gather insights surrounding participants’ engagement with online communities as well as the methods they used to discover or learn more about their specific interests and hobbies. From there, we gathered key insights:
Individuals join communities to have a sense of belonging, but often don't engage with others due to feeling intimidated of the pre-existing community they are entering and as if they are drawing unwanted attention to themselves.
Due to the overwhelming amount of options, individuals often resort to external recommendations or metrics such as the number of likes or followers to decide what content to engage with while browsing the internet.
Participants switch their attention relatively fast and go from one form of consumption to another in short periods of time. Individuals enjoy having access to information about all their interests in one platform, but may feel unfamiliar when joining a new community because of the lack of prior knowledge or not knowing where to start.
From our insights, we then narrowed down our research to establish more focused user goals that would further drive our design:
The team wanted to create a platform for users to share content from external sites as well as user-generated content for interaction between community members. Member-exclusive events or discussions will encourage users to join. Separating content from the different zones users are in would help filter through large amounts of micro-content. Additionally, when browsing, larger topics are broken down into smaller, niche communities. This will help users to explore interests that are related to topics they are already leaning towards.
Visualizing the app’s features to include the above key points, the team decided to create a home page feed to explore featured zones, a discover page for users to actively search for interests, and community pages for the zones that the user is in. From there, we began to wireframe the application. I worked on the discover page and community pages to include content such as livestreams and discussions.
Due to the short timeframe of the project, we were not able to conduct user testing with a rough prototype but moved immediately to the high-fidelity prototype. I worked on the components of the home page feed and created a sample of a community page the user has joined. Additionaly, I expanded the prototype to include the livestream, event, and discussion pages of the community in order to showcase how the user could interact with other members. The completed pages will be shown in the next section.
Upon logging in, users are presented with the platform's home page which acts as a window into topics that individuals may not have explored on their own. It showcases featured and popular zones which are updated on a daily basis. This allows for exploration and feeds those who are curious into expanding their library of interests.
When joining a Zone two things occur: first, a user receives a welcome message and a set of Zone exclusive emojis to make them feel more a part of the community. Since the project is part of the Adobe Creative Jam hosted by Twitch, we incorporated Twitch culture such as custom emotes and live chats to foster a sense of community. Second, the Zone is automatically added to the sidebar under the general category, which users may choose to categorize the Zones themselves later on.
The community Zone provides a wide range of content types for the user to engage with. Similarly to the Home and Explore pages, the types range from discussions, articles, podcasts, or videos that users can choose to view from each respective tab. The diverse nature of the content allows users to choose to learn in their own preferred method and filter through more easily.
Within each Zone users can browse through uploaded content or engage with the community through several means. For example they can view a current livestream where they are encouraged to their pose questions to streamers. They can browse through and set reminders for events hosted by Zone members.
Members can also participate in discussions with like-minded individuals and use their newly acquired Zone emojis. This encourages interaction between the creators and members as well as fosters a space for user-generated content.
Within each communities' Zone page, members can learn through several forms of media or discover events to participate in. These range from livestreams, videos, podcasts, image galleries, articles and discussions to allow for users to learn in their own preferred method. Once joined, users will receive Zone exclusive stickers which they may use when engaging with content. The "Your Zone" section serves as a feed where users can view content based on how they categorize the communities they have joined. They may also filter by the type of content they would like to consume. Zone uses a simple color scheme that does not distract from the community content, but allows for easily noticeable interaction cues. Iconography is also used to indicate the form of content users will be engaging with at a glance.
