Crunchyroll: Product design case
Adding a feature to the popular streaming platform
Problem
In a world overwhelmed by streaming platforms, Crunchyroll stood as a beacon for anime lovers. However, it lacked a vital feature: the ability to host group watch sessions right within its platform.
My role
Timeline
Tools
Client
UX/UI design, research, information architecture, wireframing, prototyping, usability testing
4 weeks
Figma, FigJam, Mural, Notion
Student project
Background
When the pandemic happened in 2020, virtual group watch sessions had a surge because time spent with loved ones became scarce. Adults spent nearly 6.5 hours per day watching TV or videos online, and over 12 million customers signed up for streaming services (Based on this article). Extensions existed, but they came with their own set of problems, from lack of equal control to all users to the absence of video, call, or chat functions.
I personally love the group watching experience, it gave me the ability to connect with friends from the comfort of my home. After experiencing too many frustrating moments with those extensions, I decided to embarked on a journey of generative research on group watching extensions to see if others were experiencing the same issue.
Solution
I unveiled common issues across different platforms based on reviews. With this knowledge, I decided to add the group watch feature to Crunchyroll.
Research
To get a better grasp of what those specific issues are and how to fix it, I conducted a thorough competitive research and user-centric survey. I discovered that Netflix Party, the most popular group watching extension, cannot be used on Crunchyroll and has no forms of communication.
- A chat box feature is present, but there are no other forms of communication
- Inability to minimize the chat box/inability to view in full screen
- Inaccessible in certain countries/regions
- Frequent advertisements that cannot be disabled or bypassed
- Inconsistent synchronization with streaming platforms
- Limited controls to the other participants
What are the users saying?
Some frustrations the users have stated includes using Facetime as a form of communication and experiencing lag because they’re using a third party extension. I discovered that adding a group watch functionality to Crunchyroll could quell some frustrations the users have.
I published a Google form with 20 responses and five user interviews to have a better understanding of the users. This provided valuable insights into the features and improvements they desired such as settings, video call, voice call, chatbox, and minimize/maximize screens. Even though the feature set was ready to go, there were still some issues to consider: How might we provide an enjoyable experience? How might we provide a smooth experience for the users to virtually group watch AND have discussions?
What does Sherrie think?
Sherrie was a persona developed during the research phase to better understand the needs and challenges of real users. This helped inform the development of changes that could enhance the virtual group watching experience for all users.
Understanding the user
I created some HMW and POV statements to put the user at the center of the design process and ensure that I have a deep understanding of their needs, motivations, and challenges.
Point of view
- I’d like to explore ways to provide seamless virtual group watch sessions as a way for people to spend quality time with their loved ones because most of them may not have the opportunity or resources to meet in person or live in close proximity, and this can be a convenient and enjoyable way to connect.
- I’d like to explore ways to help people who want to find a community to watch their favorite shows with.
How might we?
- How might we include a more social aspect to streaming platforms?
- How might we create an in-app feature that is easier to use than external apps/extensions?
- How might we provide a smooth experience for the users to virtually group watch?
- How might we create an enjoyable experience for people that want to spend quality time with their loved ones?
- How might we make this feature more inclusive and accessible?
Feature set
I decided to add in the option to maximize the screen and minimize the chat/call. Multiple participants have stated that they need a form of communication, I added in video, chat, and textbox options. The users also mentioned that they preferred having some time between episodes. So I added in a break time feature, where the users are able to discuss/use the bathroom/take care of a pet.
I wanted to provide a seamless integration and user flow, so I created wireframes based on the current Crunchyroll website navigation. The main wireframe pages I’ve included are: setting up the session, confirmation page, video page, video page with video/call/chat, maximized screen, minimized chat/video.
Task Flow and User Flow
After conducting research and analyzing the desired features, I was able to identify and streamline the task flow and user flow for the website. Overall, my goal was to create a user experience that is simple and efficient for new and existing users.
Wireframing
Wireframing helped to clarify the design concept by breaking down complex designs into simple and easily understandable components. This made it easier to communicate design ideas and gather feedback.
Design decisions
The left side seemed to be the dominant choice for videos and screen viewing in popular platforms like Google Meet and YouTube. Given that this layout is familiar to most users, I opted to position the call window with the other participants on the right side of the screen. In the original Crunchyroll video page, the "next episode" block resides in the lower right corner, so situating the call window on the opposite side would disrupt the page's overall aesthetics.
I positioned the "Start Crunchyparty" button below the existing "Start watching" button because the current call-to-action (CTA) is already effective in grabbing the viewer's attention with its distinctive orange color. I applied the law of proximity to keep them together since the original CTA is located there, eliminating the need to place it in a different spot that might compete with the "start watching" button.
I've incorporated a questionnaire for hosts to complete during the setup of their Crunchyparty event. This serves both business and user needs by ensuring that users review the terms and conditions to understand the feature's limitations. Additionally, it empowers hosts to configure their initial preferences, including choosing between a dubbed or subbed version of the anime and setting the date and time for the event.
Iterations after usability testing
With the data from the user tests, I fine-tuned my design choices to enhance the user experience.
Before & afters:
Other changes include:
- Grouped similar features together by relocating certain buttons.
- Added icons to certain areas to increase visibility and clarity.
- Simplified and clarified the wording in various areas to make the program more accessible and easy to use.
Finally, the feature was ready for review. After reviewing the iterations, the participants stated that with this new feature, friends can bond and share moments while immersing themselves in their beloved shows. If this feature were to be shipped, Crunchyroll could leave its users with a deeper sense of connection.
Next steps
If I had the chance to work for Crunchyroll and ship this product, I would like to conduct another survey and usability test to get more feedback from a larger participant pool to measure the task success rate and gauge user satisfaction. I would also like to hear what project managers and other senior designers would think, and learn what the limitations are from the developers.
What I would change
I would improve the layout of the questionnaire for the CrunchyParty host during the setup process. Currently, the questionnaire consumes a considerable amount of real estate on the page despite it being very concise. Optimizing the layout would reduce any unnecessary white space.
Let's connect!
Email: Jacquelinehe97@gmail.com