Conan 25

For the 25th anniversary of Conan O’Brian’s lasting late-night comedy show, Conan wanted to build a site for his fans filled with all of the great clips from over the years. I was partnered with another Designer and an Engineer to kick off the client engagement/strategy phase, Conduct User Research,  and then deliver a working site to Conan’s in-house development team. I build interactive prototypes to test navigation and the logic for the video player recommendation feed. I also created the responsive grid layouts and designed the entire site page flows and wireframes. Finally, I contributed to the style guide and final look & feel of the site. The biggest perk was conducting a stakeholder interview with Conan in person during our 3-day kickoff sessions on the universal lot!

 

Kicking off discovery with Team Coco!

We planned 3 strategy days with the Conan Team. In preparation, our team mapped out some rough design milestones, collected heaps of competitive/analogous experience examples, and prepared an assumption/Lean canvas activity and story mapping activity.

In-between our meetings with stakeholders, we were running our first user interviews and collecting feedback on very rough concepts to validate our hypothesis around how users will choose to navigate the site and search for clips.

The highlight of the kickoff & discovery sprint was meeting Conan O’Brian IN-PERSON!

Yes. He is VERY tall and VERY nice!

 

Exploration: How to present 25 years of clips

We prepared some rough/sketchy concepts to get an idea of how we might be able to present the searchable clips to Conan Fans. We rapidly iterated and didn’t spend a lot of time. These were used as a launching point into our second round of prototype testing & to assist our engineers in peeling off stories they could begin to build before any designs were ready.

In addition, we weren’t certain the level of effort that Conan was willing to invest in a blown out the 25th-anniversary homepage experience, given that the site was going to transition to a more generic site after a 25th-anniversary special event. We wanted to build a homepage that could easily transition content and logos when the event was finished.


In Lean UX fashion, we quickly mocked up and then presented a few high-level directions for the homepage “Big Splash” header, from low to high effort, so we could gain early feedback as well as create an opportunity for brainstorming ideas with their team.

 

Unblocking engineers - Preparing “Ready to go” stories

We were certain that the site needed responsive breakpoints, and a flexible Grid layout. That was a no-brainer.

To unblock our engineers, I began to prepare a set of design specs and stories so that they could begin by at least setting up our responsive grid layout.

 

Iterating with Prototypes

Immediately after completing our kickoff sessions, we returned home and got to work on a prototype of the clip browsing & video player experience.

We already had a rough idea of how the “next up” video sequencing would occur, and we were able to validate the categories and orders that made sense to our users in those sessions.

My wireframe prototypes were quickly built in Sketch and then ported to Proto.io so that I could include working video clips and more complicated logic.

 

Delivering design

As we validated our site flows with users, I chipped away and finalized the layouts in Figma. Our Figma file became an easy touchpoint for our team to gauge the progress of the site build.

We were delivered a set of conceptual logos from Conan’s team early on, as visual cues. It was crucial to nail this because Conan himself is very particular and would be reviewing all visual styles presented.

We were able to deliver proposals for 3 possible design directions (Appollo, Modern, and Late Night) based on the previous logos and branding Conan had approved in the past.

Conan ended up picking Modern, which was a happy marriage of the old and new show logos.

 

Results

The final site has since been rebranded as “Conan Classic” - which was always the intention after the 25th-anniversary event. Conan fans are able to browse endlessly on the site, discovering old fan favorites, remotes, favorite comedians, or just watch everything Andy ever did. I loved this project and Team Coco had a blast too!

Workshop Facilitation

Strategy

Journey mapping

Story Mapping

Prototyping

User research

Responsive Design