Thoughts on the ESPN.com Redesign
A couple of days ago, ESPN.com launched their latest redesign; an effort many months in the making and much anticipated in the industry. I’ve been playing with the new site for a month or so now and have some positive and negative opinions to express, both as a sports fan and as one of the (drunk) driving forces behind some past ESPN.com redesigns.
First the standard caveat: designing a major media site is not as easy as it may appear. It is not like designing a blog and not like designing a standard “web presence” for a company. There are hundreds of internal stakeholders to answer to, millions of daily users to please, and a ton of legacy and third-party code that is often outside your control. Anyone who tries to knock down the virtues of a major media site redesign based on how far it falls short of perfection is making the wrong comparison. The most important benchmark to grade is simply the amount of improvement (or worsening) from the last iteration of the site. Secondarily, comparison against competitors is also very important.
First things first, there’s a lot to like about the redesign:
Cleanliness
In my five years at ESPN, there was always a lot of push and pull between design cleanliness and information density. On the design side, we always fought for an economy of elements on the page. Big striking headlines, well placed lead-ins, content modules here and there, but nothing to overload the screen. On the editorial and business side, there was always a push for more video, more features, and just generally more content all over the place. The ideal philosophy is of course somewhere in the middle, but over the last few years, I feel like ESPN had gone a bit too far in the “Times Square Billboard” direction, with too much visual distraction (especially in the form of autoplay video).
The new redesign gracefully chisels away a lot of the visual clutter and presents a calmer, gentler ESPN for your perusing pleasure. Gone is the autoplay video and other visual cruft that had built up over the years.
Note: When I refer to “visual cruft”, this is a phenomenon that happens to every content site over time. Essentially, you redesign and everything’s perfect, and then “plaque” kind of builds up over time in the form of code and design elements that are inserted to meet editorial or business needs. Each redesign is an opportunity to chisel off the plaque and start anew.
Code Quality
Don’t even bother trying to run the ESPN front page through the stupid W3C validator because that’s a lousy way to judge code quality. The tomato-throwers among us will of course do this immediately and point to the hundreds of validation errors as evidence of incompetence. The more seasoned among us know that 500 ampersand-related errors are meaningless in the grand scheme of things and we wish the validator could be configured to selectively mute certain types of benign errors.
The HTML for the front page is a svelte 22.8k gzipped (73.4k unzipped) and the code is pretty well written. All CSS for layout — natch — and decently structured HTML.
I will not comment on accessibility because I am not an accessibility expert. I’ve long railed against judging a site’s true accessibility by looking for alt text and well structured code, as I simply don’t believe those elements — on their face — make a site accessible or not. A site is accessible if observed user behavior suggests that disabled people can use the site with reasonable ease. If you don’t know how disabled people actually use your site, you have no idea if it’s actually accessible. Period. You may have followed best practices to improve its accessibility, but you just don’t know if it passes the test unless you test.
That said, I have no idea how accessible the new ESPN.com is in the real world. I imagine it’s ok, but certainly not perfect.
New Story Pages
I don’t have a whole lot of objective things to say about the new story pages, but they look cleaner than the previous incarnation. Very readable, very uncluttered, and good video integration where appropriate.
Navigation
ESPN moved to top navigation a few years ago and they’ve never looked back. I’ve long preached the benefits of putting your main navigation across the top of the screen and ESPN has fine-tuned their implementation with this release. Good rollovers, good information architecture, and just all-around snappy. I’d like to see msnbc.com move to top navigation with their next redesign.
Video
As mentioned above, gone is the awful autoplay video. In its place is a video tab which is a lot more polite to users. I don’t think many users will click on the video tab (because in general, no one clicks on tabs), but I do think when ESPN has great video, they’ll probably flip to “video mode” automatically… and I’m totally cool with that, as long as it doesn’t autoplay.
But it’s not all roses with the redesign. I do have some issues with it:
Below the Fold
By far the worst thing about the redesign is the ghettoization of the below-the-fold area on the home page. It’s tragically uninteresting. When I was working on the 2003 redesign, I remember John Skipper (rightfully) making a big deal about how important the below-the-fold area of the front page was and how we needed to make better use of it. The last redesign had a nice Flash feature slideshow thing going on and that is now gone, in favor of the gigantic heads of ESPN columnists. I love ESPN columnists, but their headshots add absolutely nothing to their stories. It’s a huge waste of space and it’s subconsciously a very unattractive area to scroll to.
Because of this, the new ESPN frontpage is now more of a “glance and go” site for me now. I don’t want to scroll because I have no confidence that there is anything worth scrolling to. Compare that to, for instance, the msnbc.com frontpage, where there are a ton of things to keep you interested all the way to the bottom of the page. I actually think msnbc.com is among the best in the industry at this.
One thing ESPN did to encourage people to scroll is put the main headline in the bottom area of the main marquee. Sorry, my screen’s big enough to still see it anyway. Not going to scroll.
Tinting Red is Dangerous
Unless your site caters to females, it’s always risky to tint your reds. Even the slightest tinge of pink on a site like ESPN can ruin the whole look. Generally ESPN has gone with shades of red (red plus black) or maintained very clear boundaries between reds and whites. With this redesign, there is a pretty noticeable gradient from red to light gray, and while it’s clear they limited the pink zone by using a steep gradient, it’s still noticeable.
Minimal Customization
I don’t see a whole lot of customization options besides the “My Headlines” tab. It’s very hard to do customization well, but this strikes me as not much of an effort at all.
Conclusion
All in all, I think it’s a nice redesign. Not one that knocks you on your ass and wows you to your core, but tasteful nonetheless. I found myself visiting competitive sites like Yahoo Sports, CNNSI, Sportsline, and Fox Sports to compare this against their latest versions, and after thinking about it, I still think ESPN’s design compares favorably to all comers.
I don’t think the fade gets too pink (at least on my monitor), but it spends way too much space in the gray zone. There’s nearly as much gray as red. I’d fade it at least twice as fast in half the space. Also, it fades all the way to white, but the bgcolor of the page is actually #f2f2f2, so there’s a weird line on each side where it goes from gray to white and then jumps to gray again at the edge of the background image that incessantly draws my eye.
Nice write-up, thanks for sharing; found it very insightful. I think the redesign is nice; no Mike Davidson design of course.
It seems like they handle some dynamic aggregation poorly; specifically mentioning the large unnecessary gap in the right column under the headlines. Good example of when a well intentioned grid destroys a visual appeal on the design. Also notice little details in how they handle quotes in the “Mayne Street” section as well as the usual and unnecessary space within the poll (when a short poll).
You mentioned that the redesign launched a couple days ago; I assume in 2009? Just find it off that the copyright still reads “2008”. Sorry for being the picky d!ck i the group — just found it to be an “interesting” oversight.
I do like the use of the iPhone-like dot based pagination. I think it works well and appropriate timing post-iPhone.
I noticed some inconsistencies in the interactions as well. The scroll in the main “top stories” area goes back to the beginning when at the end, but get stuck at the end at the scroll in the top “scores” section.
Interesting how links like “NLF” in to top “Scores” section will change the visible information there and not take you to a NFL scores section. But that same style “NFL” link above top stories takes you to a NFL top stories page and does not change the content of top stories on the homepage — threw me a bit; just a jarring experience.
Too bad “SportsNation” didn’t get the same attention to detail; I can assume technical difficulties; on a different back-end possibly?
Sorry for the rant, just blacked-out there for a second. Great write-up, great redesign — agree with your sentiment. There is some good, some bad and of course the reality check of working on a redesign within a major media website.
[…] Mike Davidson – Thoughts on the ESPN.com Redesign “First the standard caveat: designing a major media site is not as easy as it may appear. It is not like designing a blog and not like designing a standard %u201Cweb presence%u201D for a company. There are hundreds of internal stakeholders to answer to, millions of daily users to please, and a ton of legacy and third-party code that is often outside your control. Anyone who tries to knock down the virtues of a major media site redesign based on how far it falls short of perfection is making the wrong comparison. The most important benchmark to grade is simply the amount of improvement (or worsening) from the last iteration of the site. Secondarily, comparison against competitors is also very important.” […]
Mike, since seeing the beta last month, I’ve been very curious to hear your thoughts on the redesign.
I agree with you on most counts, especially the lack of interest “below the fold,” but can’t share your same appreciation for the previous “nice Flash feature slideshow thing.” In fact, I ranted about my dislike for it at http://ryanberg.net/blog/2008/nov/14/dumping-bad-usability-decisions/ back in November.
Much of the content previously linked to in the old flash features are now integrated into the carousel attached to the main story area. Both ways work, visually and structurally, I’m just glad the links to content are no longer buried inside swf files.
I’m sure the “below the fold” issues will be fixed as the site evolves. In the meantime, ESPN.com is still stronger than any of its competition in my eyes.
And for what it’s worth, I agree that msnbc.com has the ideal layout for moving users down the homepage. Its methods have certainly influenced some of my own work.
Ryan: Haha, nice rant on the Flash thing. My problem with the old slideshow wasn’t so much that it was in Flash but that it didn’t PAUSE when you moused over it. Many times I would move my mouse to a story I wanted to read, only to have it slide away before I could click on it. You’re right though… could have been done in javascript pretty easily.
First off, I’m glad as hell that the auto-starting video is gone off the front page. I installed flashblock for the primary purpose of disabling the video.
I’m also glad that the the main section is no longer run by flash. I like browser tabs. I like opening up multiple articles at once in different tabs and then reading them one by one without the hassle of using the back button (especially on paginated articles.) That said, why on earth does that carousel links not go directly to the articles, but instead just brings that article up in the main section? When i visit ESPN and see that TMQ has a new article up, I want to read about it, not see some unnecessary graphic, a lead in and some related links. Why are they making me click twice, when once is easily enough?
As for the columnist heads… I don’t mind this and I actually think it’s a decent idea. Considering that most of the above-the-fold content is actually AP stuff that every other sports site shares, it’s the columnists and personalities that separate the sites. My problem is why is one of the two spots given to Rick Reilly? I know they must have given the man a ton of money to steal him away from SI, but he publishes a new article what, once every other week? The Rick Reilly article is just way too likely to be days old, yet still taking up above-the-fold space. Bill Simmons makes sense, he’s gotta be their most popular Internet writer, he writes about all three major sports, and he’s good for 1-3 podcasts and 1-3 articles each week.
Now comparing ESPN to other major sites, FoxSports and CBS Sportsline look like garbage too me. There’s just so little that’s unique or stands out on those sites. Yahoo Sports in the standard Yahoo style doesn’t actually look half bad, but they just don’t have anyone I care to read. I think that leaves ESPN.com second only to SI. But I think SI has some inherent advantages in that their color scheme is far more pleasing, they have more columnists to feature, and most importantly they are coming from a magazine background where features and full articles are more important than the breaking news story of the day and I think that helps their site seem less hectic and chaotic.
…and for comparison: I will not be visiting ESPN.com ever again (So there!)
I’m curious about the apparent implication in the update note at the end there that the cable channel should subsidize the site or something just because it makes $xxx. Can you comment on that? I know you haven’t worked there in a long time, but I’d assume the site was expected to make its own money, and this was the case with at least one web site for a print mag that I’ve worked on previously.
Less of the ‘visual cruft’ (as you put it) is certainly welcome – it’s usually one of the things that turns me away from a lot of sports web sites (particularly American sites which seem to have gone for auto-play videos in a big way). I’m actually a regular visitor of the ‘Sports Illustrated’ (CNN-Sports) web site and I wish its visual cruft, mostly from third-party ads, could be reduced too!
Overall, I think the new redesign of the ESPN site is a big improvement, I like how it’s more clean and readable than the previous version, so maybe I’ll start visiting more regularly again :)
Yep, the red-gradient background was not a good move…unless that’s going to be a growing theme for ESPN’s branding (maybe?)
Below the fold: yeah, it’s ‘blink and miss it’ content. I agree, more should have been done in that section.
I have always been impressed with HOW much info ESPN.com has been able to show on one page. That is NOT an easy task. I was pthe top navigation makesleased to see the top navigation stay relevant and useful. As far as “below the fold” goes..I sorta agree, I rarely scroll down on one of the main pages anyway – there is so much relevant info there with out the need to scroll.
my 2 cents anyway.
Auto videos still occur on the sport-specific landing pages (see: NFL).
And they’re still annoying.
I think it’s great and they got rid of one of my pet peeves: the flash links on the front page that you cant middle-click.
I love the new design except for one thing I really hate:
I’m always bringing down the All Sports, etc sub menus by mistake while navigating around. Wish there was a slightly longer delay on having those populate.
Great writeup, Mike. I figured you’d be sharing your opinions on this.
For me, the removal of auto-play video is fantastic, and it’s almost hard to believe a monolithic company like ESPN would respond this quickly to something that I’m sure most people hated. But I have to agree that the gradient backgrounds are not doing anything for me at all–they really cheapen the look of the site, and it now seems to lack polish. When I think of forced gradients, I think of Microsoft. And everyone knows by now they are way behind the times when it comes to design and UI.
For any sports site, the most important thing to me is the scoreboard. The new ESPN definitely improved this area with more information accessible from the main scoreboard page. This is really the one thing I’ve always preferred with CBS Sportsline, and why I keep their scoreboards bookmarked (that, and their auto-update feature seems more informative). Now I’m at least willing to give ESPN a chance with these new score pages.
Along the same lines, they seem to have partially responded to a major critique I (and I’m sure many others) emailed them about: linking to every scoreboard from any page on the site. Now you can go from one sport’s scoreboard to another. But you still can’t access any scoreboard from any page. CBS once again gets this right by preserving their top nav no matter what page you’re on. It actually seems less complicated to do it this way, so it’s frustrating that ESPN still doesn’t have it right.
One final suggestion for ESPN: For the love of God, please fix your fantasy sports pages for iPhone by allowing me to make roster moves! What good is it to let me see my roster and check stats if I can do nothing about it? I’ve been totally baffled by this decision ever since I’ve had my iPhone.
Has no one really mentioned it yet?
It’s now blantly obvious that the front page is nearly 80 Advertisement real estate and now, actually very little content.
In prior versions, ESPN did a great job of presenting a lot of interesting information on the front page without feeling overwhelmed.
Now, I feel like the front page is just 2-3 headlines with mountains of Adverts surrounding it.
Thanks for the review Mike. I agree on most points expect the Navigation part (“ESPN has fine-tuned their implementation with this release”). On every other sports website they include direct top-level navigation to all the sports sections. At ESPN now that entire area is crammed into the “All Sports” pulldown. As such there are no direct links to the core pages like Scoreboards, Standings, Stats, etc. Now you must first open the All Sports pulldown, find your sport, wait for that page to load, find the link in the sub-navigation bar, and then click on it. Before all of this was accessible directly on the ESPN homepage, now I have to click around to get to the pages I want.
Other peeves on it are: No use of vlink in the headline area. Giant columnists headshots (does anyone care about Rick Reilly anymore?). No team records on scoreboards. Bad color schemes on scoreboards (gray on grey and light blue). And finally how on interior pages the only link back to the ESPN homepage is the small text link in the breadcrumb.
Overall I’ll give it a 2 of 5 star rating. Regardless thanks for your review. -SBach
Adam: I agree. The problem with the columnist heads though is that they are a lot less visually interesting than some sort of imagery related to what they happen to be writing about. I’m ok with having columnist heads on there but only if they were shrunken about 75%. They just don’t need to be that big. They are taking up space and uglifying the page.
Su: With regard to Siegler’s rant, all I can say is “he’ll be back”. Every time ESPN redesigns, there are always people saying the sorts of things he’s saying. “Too much advertising”, “they changed a good thing”, “I’m switching to CNN or Yahoo”, blah blah blah, but it never happens. After a couple weeks of cooling down, most people are fine with the new state of things and everybody gets on with the business of being a sports fan. I also don’t understand why the guy is complaining about an introductory video is that *obviously* only there temporarily to introduce you to the new site. With regard to the cable channel subsidizing the web property, yes, the cable channel makes a lot more than the web property, but ESPN.com over the last several years has grown to be a very profitable endeavor. This was something the whole company — and in particular the .com folks — are rightfully very proud of. Especially considering that most people think TV revenues worldwide are about to take a nosedive, it doesn’t make any sense to give up the idea of the web site being profitable on its own. It would be a big step backwards.
Shane: Ouch, hadn’t noticed that. Down with autoplay!
Ethan: Yep, good point on the delays. I’ve had that happen to me too.
Brade: Actually, it took them like four years to get rid of autoplay on the frontpage. It’s been there a looooooooooong time. Better late than never though. Also, I agree on the roster moves from the iPhone. Hopefully next year. I did like the iPhone app in general besides that though.
Steve Bach: Yep, I guess I have to kind of agree on the All Sports menu. Would be nice to have all of the sports available without rolling over.
Mike,
I don’t think uglifying is a word. When I write it in your comment box, it’s underlined in red so I really don’t think it’s a word.
— benny
Comments:
1. when errors are easy to correct, like 500 benign ampersand errors, why not simply fix them … unless one is lazy? You have long championed the value of breaking the rules when there is a valid reason and I guess I agree with that, but when there is no reason?
2. Are you sure you mean now? “Because of this, the new ESPN frontpage is now more of a “glance and go” site for me now.”
3. Pink is great: look at the leader or our country … color is no longer a hang up … and ESPN is leading the way on the web by breaking down the color barrier (that is humor folks).
I often surf on slower connections and tried to avoid ESPN because the video make the site klunky for me, so I’m glad to learn of that improvement.
May tomorrow be even sunnier and the sunset be pink.
Don:
1. Exactly. That should tell you something about how “easy” or “not easy” it is. Don’t assume the designers of ESPN.com have control over every bit of code on the site.
2. Yeah, I do. I used to spend quite a bit of time below the fold with the old design.
3. Ha. Good point. But still… it’s pink.
Enjoyed your write-up, Mike. I think all designers ought to blog about big-name redesigns. This is the first I’ve caught.
My best and worst:
Best: Navigation/IA. I’m sure it was the most difficult part of the redesign, but they pulled it off. They really need a delay on the dropdowns though. Super annoying.
Worst: Homepage content. It’s so sparse. I remember on the old site I could spend a minute or two on the homepage and get a really nice overview of what was happening in the sports world. Now I have to work for it. Click this tab. Click that arrow.
I would propose an ESPN Snapshot (TM) block: below the fold, spans the whole page, with a tab for each major sport, dropdown for the rest, containing one major story w/ photo and headline (45% wide), latest headlines (35% wide) and then scores/schedule (20% wide). And it would let me “pin” a sport, or just remember the last one I was on.
Call your old buddies over there. Make it happen :)
I agree that pink is not a solid choice for any male dominated site. Anyone who watches sports center has wondered at one time or another who the f#@k designed the set?! The maddening use of bright colors including pink may cause seizures if you have a large HD set you are sitting too close to. I am curious how espn tv, espn.com, and sportscenter.com (does anyone realize this site exists?) communicate with each other to create consistency in the espn brand identity.
Mike – I added a few thoughts of my own on the redesign over at my web site.
Reading through the user feedback has got to hurt. Then again, don’t be a designer unless you have thick skin.
Lots of good points, so I’ll just bring up my long standing pet peeve. espn.go.com – seriously, huh? Who still needs a “web-portal” based scheme? Annoys me about as much as sports.yahoo.com switching to rivals.yahoo.com – but JUST for the NCAA stuff.
Mike, Nice write-up. You make some interesting points, I would not have noticed the lack of scroll appeal had you not said anything but you hit the nail on the head. It really feels like ESPN wants you to just click right on through the home page to get into the meat of the site with this redesign. A bit of instantly playing video would likely make me sit on the home page longer and surely I would find myself exploring below the fold as I listen and view the video.
As far as red goes, I think there are few ways to use subtle faded reds, also known as pink. What I have found is that the pink feel does go away if you dominate the site with more solid, dark reds than fades. In this case I think they came right to the edge, any less red or any larger on the gradient at the top of the page and it could have looked like a Strawberry Shortcake fan site.
I recently had the chance to work with a blind gentleman who may have been better at using the internet than I. Very interesting.
Also, I miss the parquet floors on the BB pages.
I completely agree with Kevan, I hate the portal look and feel that too many media sites try to cram as much content onto the home page as possible and make it look like a dead-tree publication. I’d be interesting in a site offering two options to users – a portal style design vs. simpler/cleaner one with “big striking headlines, well placed lead-ins” and seeing how many prefer the one with “less stuff.”
[…] most people have chimed in on the redesign — those interested should check out Mike Davidson’s erudite insights — I figure I’ll add my two cents as a user and a former Page 1 […]
[…] Newsvine CEO Mike Davidson knows design, and he particularly understands the design needs of ESPN: he was on the team that built ESPN’s last major website revision. Here’s his thoughts (link): […]
I am really enjoying the redesign. My biggest gripe has nothing to do with design but with functionality. I really think they have missed the mark with the manner the implement RSS. They way you subscribe to an RSS feed is by author. That’s it. If you can either subscribe to every piece of content that author helps create or none of it. I am not sure who that is really geared towards. During the Fantasy Football season I would like to subscribe to Mathew Berry’s weekly TRUAM column or maybe his pickups of the week column. I don’t need to subscribe to every audio, video, and text feature he has to the site. Bill Simmon’s Page 2 column seems like a perfect place to use this, yet no RSS offered.
[…] Davidson has a nice write-up on his impressions of the new design. I agree with just about everything he […]
Mike,
I think too often disabled users have to alter their browsing habits to accommodate a website that doesn’t use the web standards that are supposed to help them.
I agree in ESPN’s case this is not a big deal but I fear too many sites do not have the resources of an ESPN to do proper UI design, usability testing and code with standards that enable disabled persons to have a good browsing experience.