Detail Page Redesign – Product Designer

DELIVERABLES Competitive Analysis Heuristic Evaluations Secondary Research Wireframes Comps Spec Redlines Executive Presentations

Context

The Home Page and Campaign Templates on the site were recently redesigned and provided Guests a better digital experience.

Detail pages are the largest entry point to the DLR website, with about 24% of Disneyland.com visits beginning on a Detail page, but the dated design created a disjointed digital ecosystem as Guests navigated from Home and Overview pages to Detail Pages.

47% of Guests cite the primary reason they visit the parks website is to learn about the parks.

But there is a percentage that receives a poor experience. Also, Numerous third party sites compete with the websites.

The platform lags behind other vacation planning areas of the site at 47% vs 78%

OVERVIEW SECTION

1. The media gallery opened a small light-box modal over the page; not really selling Guests on the immersive storytelling curated in the experiences throughout the park.

2. The At-A-Glance Information (AAG/ Information in the blue box at the top) had no technical constraint around the amount of content in that section. Some instances had the information expanding beyond the blue container.

3. The Summary line was sandwiched between the media gallery and the story cards below.

PRIMARY STORY CARD

1. There is one per detail page an is the main story point of the experience. The design of the story cards had this content suppressed behind a Read More (which also didn’t help with SEO).

SECONDARY STORY

1. Detail pages can have anywhere between 0-5, so we needed this section to scale.

2. Secondary Stories expand on the primary narrative, but are hidden behind read mores as well.

3. Sometimes these story cards were shuffled amongst promotional cards and separated from the primary story.

RELATED CONTENT

1. Related content tells complementary stories to the primary narrative.

2. Related content always links off to other pages.

3. This content includes marketing content and Guest Also Viewed cards at the bottom of the page, which hierarchy wise was not associated together.

MAP

1. The map module was a tiny square that lived in the right rail below upsell, marketing content.

2. Clicking on it took you away from the page to a map view.

PRIMARY CTA & UPSELLS

1. The primary CTA for the experience was pushed off to the side of the page and blended in with marketing upsells.

2. The two were usually styled the same, despite one bringing tangible Guest benefit.

OVERALL ISSUES

1. There was no true content hierarchy.

2. Related content was prioritized over secondary content to please the business, reducing the priority to educate the Guest.

3. The map and CTAs were not discoverable.

4. The media gallery wasn’t engaging and richer media (video & cinemagraphs) were underutilized.

Working with the Content Strategy team, we decided that the page benefits from not having a full width image header. Most of the pages on the site have that, and the Detail Pages needed to remain differentiated from pages higher up in the funnel (Overview pages and the Homepage).

We decided to give the pages a visual update by removing the blue background and white container and using content widths at significant breakpoints.

It was also important from a content hierarchy perspective to arrange the primary content first, group the secondary content and place it beneath the primary content and to have the tertiary content & related content at the bottom.

A lot of the initial passes at wireframes and comps for this project had robust information and content.

We wanted the immersiveness that Guests feel in the parks to translate into the digital experiences.

We structured the primary story (with images throughout) and included a themed story layer for Top Tier attractions.

Using predictive modeling and historical data, we included a wait-time module and grouped it with a FastPass CTA and the map.

For social validation, we included a User Generated Content module, to pull photos from Instagram (Disneyland and WaltDisney World are consistently the top tagged places on Instagram).

We included the Secondary Story and a Fun Fact or Quote from the Lead Imagineer of the attraction as a digital easter egg for Guests.

All of the tertiary content is at the bottom – related links, merchandise and Guests Also Viewed.

Initial comps were highly thematic and leaned heavily into the storytelling of the attraction.

The At-A-Glance section contained facet information but ran into accessibility issues due to the frosted background overlay on the header media. We also elevated the primary CTA (to book a FastPass) into the At-A-Glance section.

The thematic story layer enriched and diversified the Detail Pages from each other. This layer also proved to be a high tech effort and bloated the price scope of the project. We had to scale back from including it in future iterations.

The wait-times module was a blue-sky inclusion. Competitors consistently include crowd calendars and wait time estimations, and we wanted to be the authentic source for that data. We had to remove it due to increase in scope.

The UGC social media module didn’t pass approval with legal due to privacy issues. The manual process of requesting permission would increase scope, leading to this module being cut too.

With this feedback, the team went back to streamline the design in a way that would still make it feel immersive and modern.

To make it more discoverable, we brought the map up. We kept the story cards exposed to help with SEO, and grouped related information and promos together. Everything relating to the experience of the page would be still be up top. Any supplementary content would be near the bottom. And removing the theme layer, social media, and wait times helped to keep the project in scope and pass legal approval.

Guests Also Viewed was kept at the bottom to prevent dead-ends on the page experience, and to encourage continued browsing.

MEDIA GALLERY

Videos and cinemagraphs play in-line on both web and mobile web. Arrows allow discovery of media without having to enter into the gallery, giving the Guest more flexibility than before.

AT-A-GLANCE

The primary CTA and summary has been elevated to the At-a-Glance Section. The CTA changes based off of entity type. The gradient behind the content uses AI to pull a primary color from the defaulted photo, helping each page to feel “themed” to the experience. We capped the facets in the AAG to 5 categories so content would no longer break the design. The facets link off to pre-filtered list and detail pages, helping to prevent dead-ends.

PRIMARY STORY CARDS

All story cards are grouped together and copy is exposed (helping with SEO). The primary story card is the first narrative on the page.

SECONDARY STORY CARDS

Supporting story cards are always below the primary story, but styled the same to help the page feel more cohesive and less busy. The map opens up inline growing from the right side of the page to the left with a pinch to zoom for mobile.

RELATED ACTIVITIES

The related activities are now grouped together and styled in a way that let’s the Guest know that clicking on the cards will take them away from the current page. The styling also differentiates this content from the story cards.

PROMO TILES

The marketing promos are styled in way that prevents it from blending in with the rest of the page content. In the old design, business re-prioritized this content over the storytelling content. As a trade off, these promos stand out, but are lower on the page.

GUESTS ALSO VIEWED

This content drives the Guests to other experiences that may complement or supplement the experience that they are viewing.