What Can We Learn from ESPN's Redesign?

It was late, I couldn’t sleep, so I figured I’d check scores over on ESPN.com. It’s different, they done redesigned the thing. No, it’s not an “April Fool’s Joke.” Nope! Instead it’s a mobile-first responsive website. If you scan the comments on ESPN’s announcement regarding this redesign you’ll see that people are assholes. I’d probably crawl under a rock if I saw an endless stream of negative comments…

Needless to say there’s a lot of folks who don’t like this change. However, I do. Perhaps that makes me unfit to have an opinion on UX or the ability to provide insights into design. That said, I don’t care. I like what ESPN did. Before I get into the “why” let’s get into some things we can take away as far as motivations go for doing this in the first place.

ESPN clearly got the memo and deployed their site ahead of the looming April 21st so-called Mobilegeddon event that has everyone in a panic. Also, ESPN looked at their own data and they saw, clearly, that their mobile traffic was out-pacing desktop traffic to the tune of 61%, by their own figures. Now, they did have a mobile-only version of the site, too, which worked well-enough. However, I can only imagine what a pain in the ass that must have been to maintain and to update. Having two places to keep up-to-date just sucks.

In short, they redesigned their site to be a mobile first experience that looks great on all devices, mobile, tablet and desktop alike.

What’s there to like anyway?

I think one of the challenges with a site that has tons of information is how to visually prioritize it all. I think they’ve done a nice job, overall.

I like the new treatment for scores that sit at the very top. I’m not too keen on the ‘Top Events’ label, though. Slightly misleading for me, I think I would prefer it to say “all scores” or something similar, since when you click on the Top Events button a user can further drill down into other scores for different sports.

I think in this top section of the site, above the fold, it’s pretty apparent where they want you to click, isn’t it? Ads never get old! But they kinda do. One thing I’m digging though is the regional personalization in the “Favorites” section on the left, allowing users to set which regional teams, based on where they are, they’ll get prioritized updates from. Top headlines receive enough breathing room, too.

One thing that sticks out to me, that’s glaring even, is that the site, itself, is so much “brighter.” There’s a better use of white-space, but there seems to be an absence of color, but that’s me being nit-picky. In the case of the new re-design, I think color is wisely used to draw-attention to key areas of the site in mobile, such as mobile navigation. That said, wisely-used color might help the overall layout look more “familiar” to those who have used the site for a while. Just my two pennies.

On mobile, I love how the content is tabbed in three sections: favorites, news and stories happening “Now.” That’s a smart use of space. Many times, it’s easy just to drop content below other content in responsive design. Is stacking content infinitely a good solution? Generally not, in my opinion. Great content is easy to consume and really should be, regardless of device. We should have to scroll infinitely to get to a new section of content. There ought to be easy controls and methods for handling how users can get to the content they want. I think in that regard, ESPN does a fine job! This article on ‘Content Choreography’ is one I keep referring to; I think the article serves as a good reminder that a great mobile-friendly design ends and begins with content.

The treatment of content on mobile is fairly clever, I feel. Again, nit-picking, but what’s the real different from “News” and “Now?” Now = Live? Not exactly. Looking at the content seems to be a mix of regular content and social content. I’d say that this area is best used for breaking news and user-generated and related content.

While I might be in the minority here, I think the folks at ESPN.com should be happy with what they’ve done. They’ve made a simpler experience and made sense out of a legacy/complex layout.