Disney World

Picture Perfect

Generally, subjects in images should be treated like text: they should be easy to identify, they should not be obscured, cropped, or stretched, and, if at all possible, they should avoid having too little of a resolution.

Many of the images on this front page do not work well as background images in the divs. Faces are obscured by text. Heads, chins, and family members are cut out of the frame. Some of the images have to stretch or squish to fit their container. Several images have resolutions that are a little too low; it is a good practice to keep image files small, but it shouldn't be at the expense of the experience.

I searched for appropriate images to replace some of these examples, looking for images with higher resolutions (at least, as best as I could find) that can center well and can correlate with the text content.

Instead of cropping people from the frame, I chose to retain a similar aspect ratio from web to mobile view, so no one gets left out.

I also replaced the shopping photo with something that better reflects "Thousands of Authentic Walt Disney World Products", while keeping with the family photo theme. The single small mouse may have been fun and quirky, but it doesn't do enough justice to accurately represent its statement.

Margins, Hierarchy, and Visual Flow

The margins in the first two main sections are not the same in the last two sections. The last two sections offer some breathing room, while the first two feel a bit scrunched. This makes the no-margin sections appear a bit visually chaotic with all the different images, and the visual weight of the large information-heavy container prevents a smooth flow through the site.

Adding more white space around the divs and sections give the items some breathing room. Also, the amount of articles in the section can vary because they no longer need to fit in a strictly-styled container.

The first section also has an issue with flow. This heavy section of information moves the eye cyclically, and the biggest culprit is the blue arrow on the bottom right block, as it leads the eye back up through the castle. Also, since the composition of this section is non-traditional, the eye is more inclined to follow the gaze of the people in the first picture, which further complicates the scanning process. Breaking this section up and adding more white space lets the user easily scan through the content and progress down the page.

Making Content Easier to Read

I moved the text content off of the images so that nothing is obscured. White text over colorful images is a bit tricky, even if there are black text-shadows, just because an image may have a variety of contrasts which would make it difficult to read.

I also reduced the amount of words in the headers and gave all the divs paragraphs to provide a more organized, hierarchical structure.

This layout also helps for writing content, as now there is more space to work with without worrying about the text's interaction with the image.

Defining Call-to-Actions

Along with changing the images and moving the text, these divs could make use of call-to-actions, buttons, microcopy, and other elements to help inform the user what to click. For the original site, I didn't know what was clickable, why buttons/links looked different, or what links took me to a different site.

I made consistently styled buttons throughout the page so the user knows where to click. If there isn't a button, the link color is the same as the button color.

The Premier Visa ad's button looks like it switches through an image carousel. Replacing the arrow with a button and a call-to-action helps guide the user.

The shopping link actually goes to a different site. Explicitly saying "Visit shopdisney.com" helps let the user know the link's direction.

No Fixed Chats!

Ok... maybe I'm channeling my inner Edna Mode here, but generally, users find fixed sidebar chats to be annoying. They cover up the content, they're distracting, and, since spam ads often live on sidebars, they look like they lead to viruses.

This button doesn't look trustworthy. "Chat Now" doesn't offer much clarification as to the chat's purpose. Also, this specific button is not styled the same throughout the site.

The planDisney panelist section is also tricky. From 768px and up, the content struggles to align, and the link even gets partially cropped out of the container. I rearranged the content, making the image bigger and separated from the text. Sometimes images and text get finnicky with positioning, so separating them into columns should make alignment through all breakpoints easier.

Where's Disney?

When I first visited the homepage, I didn't think I was on a Disney site. Disney has set such high branding standards for itself that anything less than the patented magical motifs and Mickey Ears comes across as non-Disney. Some of the other pages encapsulate the magic well, but this front page feels a bit... Wordpressy. So, I broke out the magic wand and got started on branding.

Mouse-ification

To give the hero header some pizzazz, I added a Mickey Mouse background to the words and rearranged the elements so the people weren't hidden behind the content. I also framed this header with a couple of gradient lines, and the lower line includes the Mickey emblem.

More Mice

I also added a couple of light blue mice behind the main content. This helps provide just a touch of interest without inundating the user with too much visual information.

A little mouse poking through the footer completes the page with some playful branding.

And, along with these mice, I redesigned a couple of icons. The Sign Up user icon is wearing a Mickey hat, and the Disney blog circle has ears.

More Magic

The small Avenir headers were a bit lackluster. Waltograph is a font based on Walt Disney's signature handwriting, and this helps tie in the Disney branding. Making large, bold headers helps break the content and provides better hierarchy. I also added some sparkles to give some more magic.

And, inspired by Disney's Genie App page, I gave the header images for "Can't Miss Experiences" and "Make Your Way to the Magic" a full-width organic flow shape, rather than repeating simple rectangles. This helps portray the larger-than-life experiences to be made at Disney. Since the rest of the site utilizes whitespace or subtle light decoration, these large images don't feel in competition with the other images.

Disney World

Disney World's site is a little bit of everything. Some pages are modern, some are outdated, some are fine, and some are in need of some redesigning. There are many small differences throughout the site, such as button design or page names, that could confuse the user. Changing these small inconsistencies, incorporating a playful, but not overwhelming, branding presence, and designing for accessibility and practicality could greatly improve the Disney World site.