Web Design Critique #88: SeaWorld
Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today we have an awesome client that I’m sure we all love: SeaWorld! How cool is that? Let’s jump in and see what we think of their site.
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Shopify, Tumblr & More
Logos, Print & Mockups
Icons, Vectors & More
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.
SeaWorld needs no introduction. It’s one of the coolest theme park chains in existence. Dolphins, killer whales, mantas, and more intermingled with thrill rides and other great attractions. It’s simply a magical place.
Obviously, the Sea World folks know all there is to know about giving people an unbeatable theme park experience, but how’s their web UX? Let’s take a look.
Here is a screenshot of the SeaWorld Parks homepage:
The Launch Page
The page shown above is simply a gateway that takes you to one of three SeaWorld locations: San Diego, San Antonio or Orlando. We’ll dig deeper into a specific park’s site a little later but let’s start with a discussion on this page.
What Are the Goals?
Given that this page is so simple, it’s pretty easy to analyze its effectiveness. A quick look tells us that there are three primary things that the designers are seeking to achieve with this page. The first and most important goal is to get you to one of the dedicated SeaWorld park sites. Without this aim, this page wouldn’t even exist so I would call that the primary purpose.
Hand in hand with that purpose is brand communication. Yes, you’ve come to the right place. We’re SeaWorld and here’s a small taste of what you can expect to see at our parks. The last bit of purpose lies in the tiny secondary navigation at the top of the page. Just in case you came to the wrong place, here are a few links to get you where you need to be.
Where’s the Focus?
With the goals above in mind, let’s evaluate the success of this design. If the entire purpose of the page’s existence is to serve as a gateway to the other three parks, then it stands to reason that a good portion of the page should be dedicated to this task. However, what we see instead is that a fairly minuscule portion of the page is dedicated to any sort of interaction at all.
Let’s wireframe this out so we can evaluate the spacial relationships of the items:
As you can see, all of the interactivity is thrown into a tiny area at the top of the page. It all takes a back seat to the large Atlantis ride shot, which we’ll discuss later. It’s great to show off a ride and get people excited, but as I mentioned above, I believe this is actually the secondary goal of the page. In its current form, it’s actually more of a distraction.
When I land on this page, that graphic pulls me in right away, but doesn’t take me anywhere. It’s not a link, it doesn’t point to anything, it’s just an image. From there, my eyes don’t instinctively have a next destination. They’re forced to float around the page to find out what the heck is going on.
I propose that you rethink the entire flow of communication on this page. If this really is only a transitional page, then you need to get users where they want to go as quickly as possible. Odds are, you’ve only got a minute of their time to begin with and you’ve just wasted of it forcing them to figure out this page. Imagine that we shifted the page to something more like this:
This puts the primary goal of the page up front and in your face. here, the three theme park choices take center stage. As soon as the page loads, you understand what’s happening and click on the park that you’re interested in visiting.
This layout’s goal is to reduce the amount of time spent on the gateway page so that user’s can be more productive. The three large boxes serve double duty. They get users where they want to go and give you some nice space for brand imagery. Rather than showcasing one attraction on this page, you could highlight three unique features, one from each site.
The aesthetic feel of the page is an ocean landscape with some aquatic life and your stereotypical American nuclear family having fun on a ride. Conceptually, this hits all of the important points. It’s wet, wild, fun and targets what is likely SeaWorld’s primary customer base (well-dressed, upper middle class families with disposable income).
Sometimes something can be conceptually dead on, but end up not so great in execution, and I think that’s what’s happening here. The graphics on the page all have a sort of cobbled together Photoshop hatchet job sort of look.
The splash for instance, is obviously pulled from a small scale shot. It’s likely that the splash is from a stock photo of something like a piece of fruit being dropped into some water. This has the odd effect of making the people seem almost miniature. Throw the background into the mix and suddenly everything actually looks too big. The scale of everything here is just a little wonky.
Odds are, most people won’t notice all of these things. That being said, I do think that the quality of the visual experience here is pretty low. Knowing how design teams work, these are no doubt simply the brand resources that the web design team had to work with. I personally think that one large, high quality, real photo of people having fun on the ride would have a greater, more believable impact.
Park Home Page
We spent a long time critiquing a very small portion of the site but given that it’s the first thing people see, it’s worth taking the time to get it right. Now let’s move forward and look at one of the dedicated park sites.
Here we have a page with much more going on. The center portion isn’t a static image anymore, it’s a slideshow that cycles through various exciting attractions with lots of smiling, happy families and swimming creatures. To be honest, many of the aesthetic problems that we saw before are carried over here.
I’m not very impressed with the look and feel of the site as a whole. The “SeaWorld brand” is coming off as a little cluttered and busy. The images are a patchwork of various ideas all slapped together and awkwardly integrated onto the ocean background. They’re also all presented at a really low resolution with tons of ugly JPG artifacting.
If the background is the thing tripping up the design team, lose it. You can use a full width photo in the header without it taking up the entire site background. I think the site below, does this quite well:
This site is gorgeous and there’s a lot that we can learn from it. Notice how the imagery is comprised of super high quality photographs, not quick and dirty Photoshop compilations. There’s a lot going on but it’s all nicely organized and simplified so you don’t have too much screaming for your attention at once.
Now, are the visuals all wrong for SeaWorld? Of course. They still need to pursue the exciting family shots full of action, but it should be done in a manner that’s more like the site above. Give me fun, but don’t sacrifice the quality of the visual experience to get there.
I can’t imagine that SeaWorld of all places doesn’t have a stock pile of stunning imagery of both beast and man, just waiting to be integrated into a beautiful site.
What Are the Goals?
The goals for this page are vastly more complicated than the page that we saw before. To begin, let’s consider why I, as a user, would visit the SeaWorld site. Here’s a list of things that I came up with, in no particular order:
- Education: What is SeaWorld like? What will we do?
- Purchase tickets
- Plan my trip (hotels, flights, etc.)
- Park hours
- Driving directions
- Sales and Special Events
Performance Against Goals
For the most part, the site performs fairly well against my brief list of possible goals. I love that one of the first things that I see on the site is this little widget:
This is awesome. Right away I can see the park hours and weather conditions. These are two big reasons for site visits and without a single click I’ve already found my answer.
Exploring further, there’s a nice little ticket purchasing area, driving directions are a click away under the “Park info” link, there are several trip planning links and tons of education about what the park is like and what’s happening.
Overall, I think that if I have a specific goal in mind when I come to the site, I should be able to accomplish it fairly easily. Conversely, if I’m just looking to explore, there’s plenty of content to get me excited about the park.
Despite the fact that it’s not too difficult for me to find what I’m looking for, I still think there’s plenty of room for improvement. The main thing that gets me shaking my head currently is the navigation menu… or rather menus.
There are at least four different horizontal lines of links in this small space. In addition, there are huge dropdown menus on hover. We’ve got sub-menus for our submenus. Designers always differ on whether or not it’s good to have tons of navigation that makes every page one click away from the home page. There are obviously both pros and cons to mega navigation tactics, but one thing is for sure: they’re easy to screw up.
Regardless of how far you want to take it, I think some simplification here is vital. There’s just too much navigation and it makes it all very difficult to sift through. This problem is extremely common on large sites with lots of content and there’s not always an easy answer. Below you can see that Disney struggles with the same navigation overload.
It’s easy to stand back and judge large organizations for their design issues. The argument always goes the same: they have so much money and so many resources, why can’t they pull off the best website in the world?
The reality of the situation is that this is a pretty naive position taken only by those who have never worked as a part of a large organization. You might see the freelancer working on his own personal site as the underdog, but in reality, he has the advantage from a design perspective. He can do anything he wants. Use experimental web technologies, oversee the entire design and make sure there’s a consistent, top-notch experience; it all comes right out of his head and there’s no one to challenge it.
Contrast this to the way corporate web design projects typically go. There are lots of hands and heads that have to collaborate on a single project. Strict and often competing brand guidelines, browser compatibility requirements, sub-par design resources (garbage in, garbage out), long meetings, and office politics are what defines the daily grind for these folks. They work hard and mean well, but in the end, there are a lot of major obstacles standing between them and a stellar design.
Recommendations for the Future
There is plenty of incremental improvement here that can be done, but let’s think about the major redesign that will inevitably happen one day. Even if it’s years in the future, it’s worth discussing.
My recommendation is to tear it all down and start from scratch. Two big shifts need to happen. First, the SeaWorld brand team needs to decide how they want to look on the web. The current aesthetic just isn’t cutting it and they need a new direction that displays a better balance between imagery that’s exciting and high quality.
While that’s happening, the web guys need to build some wireframes and focus on usability apart from aesthetics. The name of the game is simplification. Cut the clutter and figure out what’s most important. As we saw on the gateway page, the important pieces need to be made more prominent and easier to use. Study the simple flow of the Kiawah Island site above and take notes. Find other sites that will work as great sources of inspiration and figure out what they’re doing right.
While you’re at it, make mobile a priority. I didn’t have the time or space here to cover the mobile site, but it’s bad. The next site should be responsive and not penalize mobile users with a subpar experience.
The redesign project will be a huge, difficult and frustrating challenge that far too easily jumps off the track and turns into a disaster. Such is the plight of the web designer. We all love it because despite all of the challenges, amazing results can in fact be reached. I’m confident that the SeaWorld team has the talent to achieve a stunning and highly usable design if they really dedicate themselves to those two goals.
Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.