Early Workshops and Research

In order to understand what was the best homepage experience for the users, as well as what would satisfy the needs of different business units, we conducted a series of workshops driven by Product.

We did a series of sessions within the Product Design team where all members took one user persona and created what they thought was the ideal homepage for that persona. With these ideas, we were able to identify features that provided high value with medium to low effort of implementation.

Another series of workshops were held for business units, with a slightly different focus. With different teams across such units as Marketing, Editorial, Advertising, and more, we asked each team a series of questions and scenarios in which they were able to identify opportunities to have their stake in the homepage recognized.

We combined all of these results findings from different workshops, research data previously done on the legacy homepage, and research data on the previous MVP homepage to compile a list of priorities and needs in the design.

Initial Designs

While the workshops were happening, wireframes were being worked on in parallel to have a jumping off point. Since this initiative was going to move fast, we relied on wireframes to help make changes quickly based on shifting requirements from Product and stakeholders. Once we understood the key needs of other stakeholders, we began ideating over the high fidelity designs. The initial pass used darker versions of our bright brand colors with the idea that we wanted to keep the colors and brand elements more understated, highlighting content instead.

We then worked with User Research to learn more about how users responded to the different style of homepage than previously seen in the MVP designs of the homepage. Overall people liked being able to see more content at once, and responses were overall more favorable over the initial legacy homepage.

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.

In tandem with business needs, we also used the opportunity of promoted shop items and promoted shows as ways of showcasing more brand and colors.

Balancing Business Needs

The legacy website had a few core priorities: display new episodes for ongoing series, display ads as a “takeover” design, and news articles. We found that other business units wanted more stake on the homepage, while others wanted minimal changes to their presence. The key to understanding how to prioritize these needs was to understand the core of what is considered a success metric for their business needs.

A few key examples of how this manifested itself is incorporating traditional banner ads into the homefeed in multiple key rows, including a news module that showed latest and top news articles, showing Crunchyroll Store items and featured sale items in the homefeed for the first time, and creating customized feeds as curated by the Editorial team.

Final Iteration

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. It was able to be fun, lively, and colorful visually while still creating a new browsing and content consumption experience for users.

Key Takeaways

While this was a part of the overall Crunchyroll Redesign initiative, the homepage was unique in that it was a high value and high traffic part of the product with a lot of stakeholders vying for prime 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. Some future considerations that would be great for later improvements include:

• Curator feeds, where influencers outside of Crunchyroll are given chances to pick their favorite series and share it on the home feed.

• More promotional top carousels, with transparent images and more dynamic visual treatments

• More visibility to Crunchyroll Events, with interactive components like time and dates, RSVP buttons, and “Remind Me”.

• Better visual differentiation between different types of content carousels.