Crunchyroll Homepage

Role

Lead Product Designer

Duration

2 Years

Deliverables

Wireframes, workshop findings, user studies, interactive prototypes, high fidelity mocks, design system

Problem Summary

The old homepage design prioritized community and news updates, but offered very little in terms of content discoverability. We wanted to create a new homepage that satisfied multiple business units needs as well as enhanced the user experience of newer users.

Results

Minutes watched increased across all users and more shows were added to user’s watchlists. There were also significantly more visits to the Crunchyroll News site and a moderate increase in visits to the Crunchyroll Store site.

Goals

In order to understand the best homepage experience for users, as well as to satisfy the needs of different business units, we conducted a series of workshops led by Product as well as numerous user tests around the home page. From those findings, we created the following goals that were centered around business as well as usability needs.

From business units:

  • The marketing team required us to keep the homepage carousel as prominent on the home feed as possible to promote new series and their own initiatives.

  • In order to expand Crunchyroll Store’s stake on the home page, we needed to include content carousels that highlight store-related deals and featured items.

  • Crunchyroll’s editorial team wanted more customized carousels that are curated by their staff to push new and older series for users to watch.

From user research:

  • Users were primarily focused on jumping straight into shows they’re currently watching, so we needed to make sure they’re able to immediately jump into their currently watching shows.

  • Users primarily found new shows from recommendations online or from friends, so we wanted to expand the content we’d be able to present to them.

Driving Visual Design Direction

With the assistance of another Principal Product Designer, we were tasked to conceptualize the visual design of the homepage. One of the key requirements was to insert more branding and colors into the homefeed, since leadership had feedback that they wanted to avoid the homepage being too dark.

In order to make the homepage more easy to skim, we included colored dividers to visually break up each carousel row. We alternated the colors of the dividers in order to showcase more of the liveliness of the brand, and we used the top hero carousel as an opportunity to show the graphic elements of the brand such as circles and swooshes.

Final Iteration and Deliverables

After roughly a total of 8 months of iterations, meetings across different BU’s, and user testing we were finally able to incorporate the homepage into the MVP launch of the Crunchyroll redesign.

I was the lead product designer for this initiative since it was a high profile project, and handled it from beginning to launch. During my work on the high fidelity mocks, I also began the design system components for the homepage that included all of the edge and error states available.

Towards the end of my work with the home page, I would eventually pass off missing pieces of the design system to the web team that I led, but the majority of the components were initially started by me.

Conclusion

While this was a part of the overall Crunchyroll Redesign initiative, the homepage was unique in that it was a high traffic part of the product with a lot of stakeholders vying for real estate to serve their business needs. Being able to work cross functionally across multiple orgs that I may have previously only worked a few times with separately was a great learning experience of balancing business and UX needs.

After a few years of the beta design being live, we found that users watched more shows across all membership tiers and more shows were regularly added to user’s watchlists. There were also significantly more visits to the Crunchyroll News site and a moderate increase in visits to the Crunchyroll Store site, reinforcing the initiative to promote anime as a lifestyle.

Overall the homepage was considered a success for the beta launch and achieved many of the initial goals set out for it.