Medium-Fidelity Prototype

The functionalities that we chose to implement by the date of our user testing were the following:

  • Chat messaging functionality of users across a connected network. This means that we had real-time message sending and receiving, complete with message timestamps, reactions, emoji support, and extensions. Importantly, this also includes the ability for one user to be in multiple groups.
    • Where to find this: In frontend/src, the bulk of our chat container is rendered in App.js using the getStream.io API. For message previews in the sidebar, this is a custom component we implemented in frontend/src/components/CustomMessageList.js.
  • Group scheduling capabilities to set next episodes to be watched, as well as the general TV show currently being watched. This means that users were able to modify the state of the group information to be able to update general group information in real-time for all users. This means changes to group name, episode scheduling and the name of the show they are currently watching would be seen by everyone in the group.
    • Where to find this: frontend/src/components/PartyHeader/PartyHeader.js is where all of the group information is rendered and updated. This is synced through Stream across all users of a group

Other functionality that is a part of our MVP was faked or omitted for now. This was the case for the login functionality, which we decided to circumvent by pre-creating the accounts that would be used but still including the general layout of the login and the create account pages. We made this last-minute decision after a bug in our login system, meaning most of the logic exists in the code (frontend and backend). We still conducted UI testing on the layout of these screens. The primary feature that we omitted was the ability to group creation, via an individual user or a matching process, as well as creating invite links to be able to join an existing group. These are currently a work in progress and are planned to be present in the final website.

Screenshots

Image of Sign In Page     Image of Create Account Page

Image of General Chat Messaging Screen     Image of Setting Show Being Watched

Image of Changing Watch Schedule For Group     Image of Setting the Group Name

Findings from the user testing sessions

Our user testing was separated into three main components: first, we had our users watch a video online, linked [here] (https://www.youtube.com/watch?v=tGHMBfC7z0M). The goal was to provide all of our users with a common thing to discuss, much like they would with an episode of a TV show on the platform regularly. If you watch the video, it’s the type that you’ll want to discuss. Second, we let them use the platform freely, simply informing them that they should discuss that video. During this process, we asked that they narrate their thoughts and actions. Once they felt done exploring the app and discussing the video, we asked them some questions about their overall experience. In total, we did 2 rounds of testing: the first with 3 people and the second with 2 people. The goal of the testing was to see how users might actually use the app and get their feedback on how the current design facilitates that experience.

Users had numerous suggestions for additional features in Look Club. One suggestion was some system of referencing timestamps. This could be helpful for discussion and making comments about specific moments in an episode. There was also interest in a spoiler system or some unique functionality to help keep tabs on if users watched the episode in question before discussion. Some of this was already included in our planned features, but it’s good to get this validated by potential users. There were comments on the presentation of new messaging, suggesting some notification icons on the preview list and/or sounds to signal a new message in a group Another user suggested the ability to invite friends with invite links even before noticing the non-functional button that we intend to do that, also validating the inclusion of that feature.

There was also a lot of feedback on the design of the prototype. Some of the input fields in our login and create account screens could use some resizing, and some of the customizable fields for the channel information was a bit unassuming since they do not look like buttons. Also, some of the wording could be clearer, since our Up Next section was a bit confusing to some users, and the currently watching section led some users to assume that the watching would be synchronous.

We believe that the findings were promising, since much of the intuition of discussing shows with other users was natural as well as the logistical features of operating on a watch schedule. We see potential in alleviating some of the confusion that the users have by some of our future functionality, like actually creating new groups. This is paramount to the functionality of the system and is first in our future priorities. Overall, the current state of the UI needs some minor tweaking, though many of its components appear to be intuitive and straightforward.

The first features we will go onto implement are account creation and logins, which is close to completion. From then on, the most important feature necessary for actual usage of the app is the creation of groups, which includes matching users who want to watch similar things. This is extended by the next priority item, which is inviting users to these groups. Simultaneously, we want to work on features that make this platform more useful for discussions centered around television, which will be accomplished by the spoiler feature. When a watch deadline passes, we can block the chat until the user acknowledges that they’ve caught up.

Finally, we want to acknowledge user interest in the overall purpose of the app. Users seemed interested in using such an app for TV discussions, particularly among friends. In the friends case, the additional functionality unique to TV is what differentiates our platform from existing messaging apps. The second part of our platform is discussing with unknown users. While not all testers see themselves using it this way, some do. Here, our platform is differentiated by its ability to match people based on the shows they want to watch.


<
Previous Post
Advanced Look Club Pitch
>
Next Post
Digital Prototype