Rotten Tomatoes is a website focused on rating movies and TV shows. The website is known for their rating system, called the “Tomatometer” which is based on ratings published by approved critics. While users are primarily drawn to the website for its movie and TV show reviews, users also visit the website to watch movie trailers, purchase movie tickets, and look up showtimes at their local theaters.
Mayer has the evening off tiomorrow so she plans to go to the theater with a couple of her friends. She visits the Rotten Tomatoes website and hovers over “Theater” to click on “Opening this week”. She sees that the top two movies this week both have low ratings. She keeps looking, and sees that the movie, “Mandy”, has a tomatometer rating of 95% and is designatd a “Fresh Pick”. After reading reviews, she is confident she has chosen a movie that is sure to give her firends a lot to discuss over dinner. She then navigates to “Tickets and Showtimes” and purchases tickets for herself and her friends.
It’s Monday night. Ben has had a long day and wants to have dinner, relax and watch a TV show. He finished watching season 2 of Stranger Things a few days ago and needs something new to watch, so he does a quick browse for TV shows. He opens his web browser and visits the Rotten Tomatoes site and hovers over “TV” to get to “Popular Shows”. The show “Bojack Horesemen”, with a rating of 92% catches his attention. He clicks on the show to read a description, watch a trialer, and read critic reviews. He finds the trailer to be pretty funny and the reviews to be convincing, so he decides to watch the show while eating dinner.
Because we were focusing on the information architecture of a pre-existing site, our first step was to do a content inventory of the existing Rotten Tomatoes website, so that we had a starting point for the content of the cards in the card sort. There were some challenges creating a card sort on a content-rich site. Many sec-tions of the website (such as New Releases) changed daily. As such, the content inventory had to be created to represent the categories at a high level, versus a strictly page level view. Even with this broader view, the content inventory had over 350 entries. I’m not going to show the entire content inventory here, but this little abbreviated picture can give you an idea of the process.
Rotten Tomatoes is a content-rich site. Considering the site’s goal to provide reviews for every past and present movie and TV show, the sheer amount of information available on the site can be overwhelming, particularly to new site visitors. Some items appear to be similar such as Top TV Shows versus Certified Fresh Picks, while other items are combined under one category such as DVD & Streaming, which can create confusion and make items difficult to find. By redefining the sites categories and organizing its content, users may navigate the site more easily and it would give the site an overall cleaner structure.
The website currently has Movies & DVDS under one tab in the main navigation, which is too much content in one tab of main navigation. The result is an overwhelming number of items in the flyout navigation, making it hard for users to find what they are looking for. Adding to the confusion, once the user opens the flyout menu, Streaming & DVDs are combined together. Streaming is not viewable without opening the flyout menu, which is a problem considering the market has grown to be substantially bigger than DVDs.
1. Movies & DVDS share one tab on the main navigation menu, creating a very cluttered fly-out menu.
2. DVD & Streaming are combined. Streaming is not viewable without opening the MOVIES & DVDS tab, despite its increasing popularity.
The reason for this cluttered navigation may be the fact that when the website was first created, streaming was non-existent. Not only is streaming prevalent now, but streaming providers are also releasing exclusive content which can’t be found anywhere else. Shows that aren’t produced by the parent company still have to have an agreement with each individual streaming provider, meaning that streaming providers all have different offerings, creating the necessity of having to show each streaming provider separately.
Because there is so much content on Rotten Tomatoes, many pages make use of a secondary navigation for pages deeper in the site’s hierarchy. On pages that have sub-menus, the menu location is inconsistent, with some pages showing it on the left side of the page and others on the right. This can create confusion for users who are expecting to find the links in one place and instead find it in another.
1. Sub-menu for In Theaters page is found on the left side of the page.
2. The About section has the sub-menu on the right side of the page.
Another issue with a content rich site is that some of the pages are extremely long, such as the news page, which has over 18 different news columns presented on one page. Users looking for a specific column must scroll through a lengthy page in search of a specific column, then scroll back to the top to get to the site’s main navigation. Site users are not given any tools to aid navigating this long page.
The next phase was to create a card sort. We used our content inventory to choose cards that we felt would be the most useful in helping us design the navigation. For example, a card with the title of an obscure movie isn’t going to be useful in a card sort, because the participant might not even know whether it’s a movie, a TV show, etc. However, understanding where a user would place a movie detail page in the site hierarchy is useful, so we chose more generic names like New Release Detail page instead of the name of a specific New Release movie that the participant may not be familiar with.
Because of time constraints, we chose to do our card sort online using Optimal Workshop. This allowed us to have access to more participants, and didn’t limit users to a specific geographic location. This al-lowed us to test more 16 users in a relatively short period of time.
Since we wanted to see what our participants called the various categories, we went with an open sort which allowed our users to control the both the groupings and the names of the groupings. We chose a randomized card order, so that each user received the cards in a different order, which eliminated unintentional order effects. We used a total of 58 cards in our sort and a total of 16 participants completed the sort.
Once the card sort was closed, we used a combination of tools including the tools available within Optimal Workshop, as well as Syntagm to analyze the results.
After analyzing the categories, we were able to determine overlap within naming conventions for many of the categories that users created.
An example of category where users created slightly different names but put the similar content inside:
Attempts at standardizing categories took the number of categories from 139 down to 37. The most consistent categories among the participant results were:
Movies – 8 participants
Ticketing – 3 participants
Weekend Earnings – 3 participants
Streaming – 7 participants
News – 3 participants
Netflix – 4 participants
Navigation – 7 participants
There were many instances where categories were named only once. Some category names like “Purgatory” made it clear that a participant didn’t know what to label a category.
We used the dendrogram tool in Syntagym as a primary means to narrow down the items in the navigation. It became clear during our analysis that the cards we used in our sort (which we based on the existing Rotten Tomatoes website) had caused some confusion from those involved in the card sort. The main problem was that we had cards that contained both DVD & Streaming or Movies & DVDS. Users wanted to separate these from each other – which is why we had multiple Streaming, DVD & Movie groups. The combined cards that had both two categories seemed to confuse people, leading to lots of smaller categories like Netflix, Amazon, etc.
As a result of the card sort drawing attention to this problem, we decided to separate DVD’s Streaming and Movies into separate categories and run a treejack to see if users could find the correct category.
Of the three treejack tests we ran, one had a 90% success rate and the other two had 100% success rates, leading us to believe that separating the three categories was helpful to users, and broke down what was a very large category in the Rotten Tomatoes website into three smaller, more manageable categories, which was one of our goals for the redesigned information architecture. More details in available in the appendix.
Task 1: You would like to see what the a list of the top streaming movies . Where would you go to find them?
Task 2: You want to take a new release DVD with you on a long flight. Where would you find a list of the new DVD releases?
Task 3: You are an Amazon Prime member and want to see what movies are available on Amazon Prime to stream on your smart TV. Where would you go to find them?
In task 3 there were incorrect turns, but everyone found the correct page in the end.
After the treejack was completed, we went back to the dendrogram to work on refining the final category names for our navigation. Since we were working on a site that currently exists, we had to keep in mind the site’s current navigation as well as the card sort results in our final decisions. We attempted to create a navigation that both cut down on the very large and overwhelming navigation menus on Rotten Tomatoes website, while not being so radically different that current users are frustrated by all the changes.
The sitemap was created based on both the card sort, and the current navigation. We ended up with 12 main categories in addition to the home page.
As a result of the card sort and treejack we finalized our decision to divide Movies, DVDS and Streaming into separate categories. The reasoning for this was two-fold. Rotten Tomatoes is essentially a movie review site and movies was a very common category that everyone chose as a label during the sort (although due to some confusing cards with two names, there was a lot of different cards placed in that category).
Participants also choose labels and groupings for Streaming and DVDS, and attempted to organize the cards into these groupings, indicating to us that they saw these as separate entities. Separating the categories also helps reduce the size of the navigation in the flyout menus, which are very large.
We also renamed one page called Categories because it’s name did not reflect its purpose. We renamed it Critic Groups & Associations to reflect the actual content on the page.
After making our decisions with the card sort, and tree jack, we were ready to create a sitemap to show relationships and a hierarchy of the pages of the Rotten Tomatoes website. Since specific pages for many things on the site change daily, or focus was on finding where the groupings fit in relation to each other, not on the individual movie name. By focusing on the content categories, the sitemap will remain usable over time instead of needing to be recreated daily as the site changes.
In our wireframes, we tried to keep the same look of the navigation that the users are familiar with while addressing some of the problems with the navigation. The large amount of navigation options on the current Rotten Tomatoes main menu flyouts can be overwhelming, especially to new users.
Rotten Tomatoes uses a unique visual navigation style, which allows them to highlight certain movies that they want to draw attention to (and get advertising revenue from). As it’s a powerful advertising tool, it is unlikely that stakeholders would be willing to remove the movie thumbnails from the navigation in order to help combat the information overload that exists.
The current Movies & DVD Tab on the Rotten Tomatoes website has a very large amount of options, as well as movies that they are pushing to create ad revenue. The number of movies vary, as well as a combination of categories. Sometimes they have New Releases as well as Certified Fresh Picks highlighted.
By separating Movies, DVD’s and Streaming, we were able to substantially cut down on the amount of links in the flyout while still preserving the ad revenue.
The new DVDS tab in the main navigation.
The new Streaming tab in the main navigation.
One main navigation item, called News had the biggest subcategory list with 18 column names. We decided to present users with the top five most popular news columns on the site, with a link to view all columns. We also cut down the images in the sub navigation from 6 to 3. This was necessary as the news column was so large, the flyout covered a lot of the page. In addition, most of the column names such as 24 Frames don’t give the user an indication what the column is about, and would require further exploration by users to determine what the actual column is about anyway. We added a secondary navigation to this news page because there are so many columns. In this way, the user who knows which column they want to read can access it without having to scroll and read a very long page. We also added a Back to Top link after each Column in order to let the user quickly gain access to the columns menu and choose another column to read, again without having to scroll through a very long page. Finally, we added pagination to this page, which ultimately split the News main page into four smaller pages.
The current News tab on Rotten Tomatoes has a long list of links and images.
The new, abridged version of the News tab.
1. The current News page is extremely long, and likely to overwhelm users.
2. The new secondary menu offers the user access to every column without having to scroll and search for it.
3. A back to top link after each news column offers quick access back to the top and to the menu.
4. Pagination shortens the pages significantly, cutting it down from all 18 news columns on one long page, to five columns per page. Click on the sub menu will take the user to the that column, regardless of which page it is located on.
5. Complete view of the updated News page for comparison to the existing one on the left.
We noticed that when the Rotten Tomatoes website uses a secondary navigation, it’s location changes sides, making it inconsistent. This can be confusing to users, so we moved the secondary navigation to the right side of the page, keeping it consistent in our wireframes.
1. Example of a menu on the left side of the page.
2. The menu is found on the right side of the critics page.
The What is the Tomatometer? Link that exists on the top navigation bar on the website actually leads to the About page on the Rotten Tomatoes website. We don’t have web analytics, but have to assume that the reason it has such a prevalent location is because of how important the Tomatometer is to distinguishing Rotten Tomatoes from other movie review sites. However, there is more information than just the answer to the Tomatometer question on the About page, so we added another link in the footer to the About page, so that users who don’t know that the What is the Tomatometer? Link leads to the About page can still find and navigate to the page.
3.The About page is linkedto from the “What’s theTomatometer?®” link on thetop menu bar.
4.The About page also has aseparate link on the bottommenu bar.
While Rotten Tomatoes doesn’t currently offer an app, they do have a responsive website.
Rotten Tomatoes is extremely content rich, which provides some unique challenges on presenting a lot of information on the smaller screens of mobile phones. Finding a way to break down what are extremely large categories into smaller more manageable ones was definitely a top priority.
The card sort and treejack we performed help clarified the way that users wanted to organize content, and that information was applied to the new information architecture of the mobile screens as well.
After comparing the existing website to their current mobile version, inconsistencies in the navigations were quickly found. Since there are no flyouts in the mobile navigation, some things like STREAMING and TICKETS & SHOWTIMES do not have direct links on the mobile website. At the same time, DVDS is a separate button, yet it’s combined on the main website.
1. Current website navigation has MOVIES & DVDS as one tab and then in the flyout DVD & STREAMING are combined.
2. Current mobile site has Box Office which contains movies. There is no direct navigation to Tickets & Showtimes.
3. DVDS are separate from Movies in the mobile site, but not the full website.
1. In the current mobile site, TOP STREAMING doesn’t have a navigation link on the mobile app, the only way to access streaming reviews is to scroll down the home page and click on the Top Streaming. This makes streaming very difficult to find. Instead it should have a prominent place in the navigation, reflecting the strong growth that the streaming market has seen.
2. Our new navigation is consistent with the recommendations for main site, creating a more consistent experience for users. We’ve allowed for easy access to each main category on the Website.
Tickets and Showtimes is a prominent button on the full site, but on the mobile site. There is no obvious link to buy tickets. The only way to buy tickets is to click on the movie detail page from either a list of movies on the homepage, or from the BOX OFFICE page on the mobile site, then the user must click on the link to go to the detail page of the movie they would like to purchase tickets for, where there are links provided to the ticket purchasing screens.
The lack of consistency between the main site and mobile navigation is further compounded by the label change of MOVIES being called BOX OFFICE on the mobile site.
Considering the growth of online movie ticket sales, it makes sense to provide a prominent link to purchase tickets, versus making users hunt for it. With the prescence of competitors in the online ticket purchasing marketplace, easy access is more important than ever.
1. Users must click on the movie detail page in order to purchase tickets on the mobile site, which some users may never find. The new recommended navigation has a convenient button in the footer navigation, making purchasing of tickets quick and easy.
2. The recommended navigation for the new mobile site will contain a Tickets button, making purchasing tickets easy.
Streaming gets it’s own page
The streaming page didn’t have a main navigation link, and it also didn’t have a main page for streaming. The only access was off of the home page after scrolling very far down the page. Adding a separate page for the streaming options and including links at the top to allow users to quickly sort between the different streaming services was a way to allow users quick access while narrowing down the results to just the streaming service that they subscribe to.
1. Because there are so many different streaming options, it’s important to provide users a way to quickly view just the streaming services they subscribe to. These buttons at the top of the screen allow users to see just one streaming service at a time, and quickly toggle between services.
After creating the main screens, I created a user flow for a common task on the website, which is looking at the details of a movie. I chose Bohemian Rhapsody, simply because I wanted to show users scanning screens for a specific result, but the flow would be similar for any movie that is in theaters right now. The flow shows the different ways that users can access the movie detail pages, including clicking on the list on the home page, accessing it from the movies button, or performing a search.