Hackathon
kizuna
Team
Timeline
Role
Tools
2 Devs & 2 Designers
Jan 2023
User Research, UX/UI Design
Figma
The approach that we decided to use to target the problem statement is focused on identifying areas of improvement on Twitch and YouTube. As the lead researcher for kizuna, I decided to focus the research on frequent users of both Twitch and Youtube to identify common user pain points. Due to the nature of the hackathon and the limited time, the UI design was heavily influenced by Twitch, however we altered certain existing design aspects as well as implemented a few new features.
At nwHacks, our challenge from Livepeer was to utilize Livepeer Studio's API for video Livestream or On-Demand to create new gaming experiences.
To begin with, I conducted a survey titled "Web Streaming Services Survey" to gain a better understanding of a user's overall experience with livestreaming web applications such as Twitch and YouTube. The survey featured 6 questions, 3 to gain demographic information and 3 to gain user insight into the the two platforms.
The survey overall helped with understanding the overall user experience of both a streamer and a viewer on Twitch and YouTube, including their typical pain-points. The key takeaways I found from the survey are as follows:
1. Both platforms lack support for small channels/streamers, making it difficult for them to gain exposure and grow their communities
2. Overall UI of both platforms either only highlights livestreams or VODs, rarely both
I followed up the survey with a series of user interviews within my community, asking individuals who have used Twitch as both a streamer and a viewer about their experience with the platform. The key takeaways from the interviews include:
1. Social interaction between a streamer and their viewers is prioritized, not many options for streamers to connect with each other
2. Would like improvements as to how VODs are saved and highlighted on channels
I proceeded into sketching out some low-fidelity wireframes. We decided to sketch different versions of the Home page in order to provide options for the developers and cater to what they were most comfortable with implementing. Due to the time constraint, we went straight from these sketches into a hi-fi mockup. To adapt to that, I decided to include extra detail into the lo-fi wireframes as well as take heavy design inspiration from Twitch which helped to streamline the overall process.
I decided to create a moodboard in order to help us visualize the look and feel of kizuna, which successfully drove the overall creation of the design system. At first we had considered creating the platform with a lighter background. We eventually opted to design in dark mode, as we considered the negative impacts of certain users watching streams on a bright screen for long periods of time which would result in further eye-strain.
The Hi-Fi mockup was completed in Figma, acting as a baseline for the final frontend development. The final design is heavily inspired by Twitch but features key changes and new design features.
Changes to the side navigation bar and chat were made in order to facilitate a healthier user experience - users are able to clearly see when streamers are live or offline, and the chat is static and highlights the suggested usage of more emoticons.
New design features include a "Friends" page, introducing a social aspect that allows for users of the platform, both streamers and viewers, to interact with each other and build a more meaningful connection. Additionally, right on the "Home" page, users are right away able to see a section for small creators/streamers, effectively giving them more exposure to grow their community.
The biggest challenge for us was thinking of the best way to tackle the prompt given to us by LivePeer. Twitch and YouTube are the two biggest names in the livestreaming and VOD industry today, and for good reason because they do it extremely well. We struggled to think of new and meaningful features we could implement that would add to the user's overall experience without taking away from the existing positives. As I reflect on the overall process, beginning with a strong foundation of user research and knowing what users were hoping to see implemented helped drive the new design features.
A key lesson I learned was to plan in advance and allot enough time for each design frame. We found that towards the end of the hackathon we ran out of time to clean up the overall UI, as well as conduct a proper usability study of our prototype.
Entering into this hackathon I was much more comfortable with designing for mobile applications. Throughout the process of designing kizuna, I was able to learn more about designing for web applications as well as the feasibility of certain design choices when talking with my developers. Overall, I've definitely become more comfortable with recognizing when certain design tools/design choices are to be used.
I am extremely happy with how our design turned out in the small time frame, however in the future I would love to polish up a few frames and explore the idea of a different overall design since it was heavily influenced by Twitch's UI. Furthermore, I would love to implement a filtration system that allows for users to filter through categories of streamers and games.
Because we were able to create a fully functional prototype on Figma, I would love to perform a usability study with the same users that we surveyed/interviewed. I believe that it would allow for us to see whether we were able to successfully implement all their opinions/suggestions.
