The Barbarian Group’s user experience team is going behind-the-scenes to show and discuss some of our kickass work. We’ll chat about our latest projects and explain how we tackled them. Recently, we chatted about Tweet Wrap for Samsung and the Kashi.com homepage. Now, we’re looking at the work that went in to sprucing up the wildly successful GE Show.

We sat down with interaction designer Jodi Leo to talk the project. Jodi came in after the show’s fourth episode to evaluate the site’s usability and make a few recommendations for improvement. Here’s an example of the ‘All Episodes’ page after Jodi made some usability improvements:

(And here’s what it was like before.) Pretty lovely, right? Read on to learn more!

The GE Show is about proving the company’s innovation and leadership, while showcasing their technologies in a way that appeals to a broad audience.

That means we can’t get into too much scientific detail because it might not be as universally appealing. We get a range of viewers and most casual readers are really moved and entertained by the content. Sometimes science nerds get up in arms because, for example, if you look at some of the comments people have left about the Power of the Sun video on referring sites like Yahoo, it’s not a completely accurate depiction of fusion vs. combustion. Experts are cynical, but for general audiences, it’s been very successful.

I do track comments and feedback of the work we produce to make sure there’s consensus about the content’s usefulness or salience. It’s that buit-in reflection that we do in UX. When it comes to GE Show, we rarely see comments from troll types. Anytime people have a well-reasoned conversation online, I’m impressed. Some of the feedback we’ve received in response to the Power of the Sun video taught me even more about solar science via feedback and links. Even though it was critical, it was inspired and influenced the conversation.

Because there’s so much deep science and expertise across their divisions, it would be to humanize the information and make it easier to find and consume.

When I looked at all the episodes (1-4 at the time of design), it felt like there was way too much content to digest in one sitting, let alone 3-5 sittings, so I did some investigating.

The episodes have great staying power, with the average viewer staying on for 7-10 minutes, which blows away internet averages of about 1-2 minutes on content-rich pages. Plus, it isn’t a stretch to imagine a user coming back to view an episode two or three times. Still, I wanted to make sure viewers would have the incentive of knowing they could get through all the tasks at hand so they don’t get frustrated and walk away.

I timed each episode and found about 20-30 minutes of content on each average and came back to the team to review the editorial strategy. Trimming the episodes back took a little convincing because one of the creative missions is to make the shows episodic and robust, but we agreed to launch Episode 5: Solar with 2-3 main content features and a plan to release any additional features later to get more return visitors and build sustained curiosity.

The work we produce is very modular, so is the shell design.

So the fancy way of putting it is that I did a heuristic evaluation to check out the site’s overall usability.

Off the bat, it was obvious that the All Episodes page was not scalable to support upcoming episodes. It used stock images, rather than compelling images from features, and did not include a table of contents. I also thought it was a good idea to make better uses of the space above the fold and apply info design conventions so viewers could pick and choose the content that’s most interesting to them. This led to creating a Most Popular page.

I also noticed there was no structural navigation and did some backwards engineering on the information architecture. It seemed like a good time to add persistent, associative navigation so all of the episodes were linked, promoted and caught users in explore-mode.

For the kickoff, I did a 3-page at-a-glance analysis of the ways that people get to the shows using our Analytics Team’s deep review of the 2010 performance. The report shows that sites like StumbleUpon and other paid and viral media sites referred most users, followed by various GE sites. Fewer than expected people were coming directly from the GE.com homepage or ge.com/geshow (the All Episodes page).

These analytics translated directly into goals for the updates – for example, make the content more portable for easy embedding on referring sites, and apply best practices from magazine publishing to the All Episodes page to see if we could give it more stand-alone value.

I tested the pages against usability best practices and heuristics I’ve developed over the years from being in lab tests, reading books, and writing moderator’s guides.

It required a little bit of measuring (e.g. to identify the false page ends which deter scrolling), and I used a stop watch for this assignment, which I don’t usually do. Also, a mortar and pestle (j/k!).

I drew up a quick reality map too – this person will be on the site for 5-7 minutes, navigating in an exploratory fashion (as opposed to known-item search), has 5-minutes to kill before their next meeting and wants to learn something new and share-worthy, is wandering a little and would be interested by supplementary content, etc.

My wireframes were pretty detailed because I wanted to make sure we’d solved for the information design updates I had in mind to improve findability and visibility.

Finally, I asked the UX team to help me look across the web to make sure the content retrofitting we were doing would work for the referring sites so they would avoid sites using less attractive screen grabs (which is what StumbleUpon did for the Paths of Flight video) to share our content. Though you can edit embed dimensions, we found some standard ranges and spec’ed accordingly.

Trimming the content ran counter to the cinematic mission of the Show. I have a lot of empathy for that vision and was sensitive to the amazing potential of the team to think up and execute on great feature content. It almost hurts not to act on all those good ideas. We should start queuing them up in an editorial calendar.

The producer really empowered us to succeed, so process challenges were avoided. For example, we gained a lot of efficiency spontaneously after the kick-off meeting. When we were wrapping up, I IMed producer extraordinaire, Erica Kung, to ask her if I could keep everybody in the room and for an extra half hour so we could start problem solving and sketching.

We all wanted to solve the user-experience problems without losing sight of the creative mission and quickly iterated through. Having everybody there in person made the process 100-times more efficient. The sketches I produced were quite rough in that working session, but were enough for me to produce a more fully realized set of sketches within an hour for round 2 of iteration.

The GE Show will always benefit from the aesthetic-usability effect where aesthetically pleasing designs are perceived as easy to use. Still, I give credit to the core project team who knew there was room for improvement and that it was time to scale. There are so many creative heavy-hitters working on GE Show, I’m really glad they stopped to consider how the pages were hanging together with the right balance of intrigue and ease-of-use.

It exceeds my expectations. It’s excellent, I love how it looks – really clean, approachable, exposes the delight and is full of incentives to click away and enjoy.

From account manager Zoe Chen: “They thought that the all episodes page was cleaner, easier to navigate, and liked that it was more dynamic and engaging. They didn’t have specific comments on the new video format since it was more of an internal pain point – but it’s great that we can aggregate view counts and seamlessly embed the player across platforms.”

One of the best things about this project is that I sat and watched every single episode in its entirety. This was not a chore, they are fascinating, so thoughtfully done and creative.
I think two of the things that really stand out to me are a little buried. I remember really being impressed by the Living the Life Electric video and seeing some of the emerging technologies put to use. My favorite thing right now is the making of Carousolar video. I tweeted it!