Zone

Zone is a community-centered application which encourages users to explore and immerse themselves in their interests through various channels of media.

This project placed 1st place in the Adobe X Twitch Creative Jam which consisted of over 600 student participants.

Click Here to view our prototype!

OVERVIEW

Timeline

1 Week

Team

Worked with 1 other designer.

Tools

Adobe XD

Contributions

My contribution in this project included conducting primary research, user interviews, wireframing, creating high-fidelity mockups, building final prototype and presenting the design to a live panel of judges.

context

Creative Brief

Adobe and Twitch tasked the competitors to "Design a third-party desktop app or website that serves as a single-stop resource for any media related to a topic and encourages users to find new interests, events, and communities."
‍
To read the full brief click here.

The team's main takeaways from the creative brief.

Framing

My teammate and I took the time to establish the foundation for our design to be built upon. As a result, we formulated a clear question to frame our approach to this challenge.

How might we streamline diverse mediums of content towards individuals looking to engage with or expand their interests?

RESEARCH

Primary Research

My team and I conducted user interviews to gain insight into our participant's behaviours and habits when engaging in their interests online. We were interested in discovering how individuals respond within online communities and how they prefer to explore different interests and topics. From this, we crafted 3 key insights.

01. Intimidating Communities

Individuals join communities to have a sense of belonging but often don't engage with the pre-existing members due to intimidation and feeling like they are drawing unwanted attention to themselves.

02. Reliance on Popularity

Due to the overwhelming sea of options, individuals often resort to metrics, including views or likes, to decide what content to engage with while browsing the internet. This reduces the discoverability of certain topics and content.

03. Accessible Information

Young adults switch their attention relatively fast and go from one form of consumption to another in short periods of time. They enjoy having access to information about all their different interests in one platform, but may feel unsure as to what to look at first when exploring a new interest.

Precedent Study

With Twitch collaborating with Adobe on this challenge, we wanted to also explore what makes Twitch successful as a platform that hosts a diverse range of content for its creators and users. Despite being predominantly a video game streaming platform, we were inspired by how Twitch allows for discoverability of interests and creators outside of this domain.

Highlighted points from our precedent study on Twitch.

Process

Ideation

With our inspiration and research, the team moved forward with designing a desktop application where are able to find new information regarding a topic through their preferred method. Additionally, we explored how we may allow for users to have a unique browsing experience depending on the interests they are engaging in.

We sketched potential compositions that could align with this direction and further visualized them through creating grey box wireframes.

A selection of the grey-box wireframes from the ideation phase of our design.

Mocking Up & Prototyping

From our low-fidelity wireframes, we created high-fideltity mock-ups of the platform. I worked on parts of the homepage, log-in screen, as well as the “Your Zone” sections which is explained in more detail below.

Crafting the protoype was cruicial in ensuring the judges would be able to see each screen we had crafted. As a result, I planned out the userflow that would weave through each of the screens we had designed by implimenting only one inteaction per screen. This was done for clearity puposes, if the product was fully developed the interactions would be more dynamic.

Solution

Overview

"Zone" serves as a community-centered platform where users can search and join Zones in-line with their interests. 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.

Click here to view our prototype!

Design Breakdown

Zone Discovery

Upon entering the platform, users are presented with Zone's home page. It serves 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.

The home page of the landing page which showcases new zones to users to increase the discoverability of new interests, both popular and niche.

Joining a Zone

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.
‍
Second, the zone is automatically added to the sidebar under the category general. As shown, there are several categories such as art, gaming, technology and music which have been established by the user themselves to organize their zones based an overarching theme. This plays a larger role in the Your Zone section.

A preview of a Zone's welcoming emojis given to new members of a Zone that can be used when communicating to individuals. It can be used as a way of associating yourself with a specific Zone.

Diverse Content Resource

Members can browse through uploaded content or engage with the community through several mediums. This allows for users to learn information and consume the content they prefer and switch between mediums as they please.

A full preview of a community page which showcases the several forms of content the Zone houses.

Community Interactions

Similar to a diverse nature of content within each Zone, members have the opportunity to interact and engage with the community through several means including posing questions to livesteamers, browse through and set reminders for events hosted by Zone members, or participate in discussions with like-minded individuals and use their newly acquired Zone emojis.

A discussion thread showcasing how a user is able to utilize their arsenal of Zone specific stickers they have collected.

An example of how members are able to save a reminder for events hosted by the Zone.

Crafting "Your Zone"

The "Your Zone" section serves as a centralized feed where users can view all uploaded content from zones they are a part of. Each content card is marked with an icon indicating what medium it is, whether it be a livestream, podcast, video, image, article or discussion.

Content is also separated based on the categories established and organized by the user on the left panel. This allows for individuals who have several different interests, to be able to focus on and browse content regarding one interest such as Art, without having another one such as Gaming overlap.

The Your Zone section which presents content based on the medium preferred while browsing in addition to organizing the content based on personally created categories.

Final Thoughts

Reflection

Going into the Adobe Challenge, my teammate and I were excited to take what we had been taught in school and apply it to a project outside of an academic environment. Despite working with a 16-hour timezone difference, my partner and I were able to create a project we were both content with. The judging panel provided us with positive feedback on our project but as the project only spanned over the course of the week, there were certain aspects and features we weren’t able to explore including sharing between friends within the platform.

We didn’t expect to be a finalist, let alone win the entire competition, but regardless of the outcome, I am proud of the work my partner and I accomplished.

More Projects

Ensightful

A task management platform to help students to collaborate on their team projects while providing instructors with insight into their student teams.

Strava Planner

A feature extension which allows athletes in different locations to organize, schedule + workout simultaneously.