Fullscreen has huge plans for the future of online video. They carefully match high-profile online video creators  with some of the world’s biggest brands to create some absolutely epic content. Fullscreeners include some of the most successful online video personalities, like Andrea Russet, Devin Super Tramp, the Fine Bros., and Jack and Jack. These video creators have powerful online followings and were a huge source of inspiration for the site we designed for Fullscreen in Spring 2014.

Fullscreen needed a site that would inspire millennial creators to join their network and also speak to brand managers in need of a platform to activate younger audiences. Our objective was to increase engagement on their site and generate better leads for their talent and sales teams.

The Strategy Behind the Design

Fullscreen’s network, which today boasts over 500 million massively engaged subscribers includes some of the top millennial talent from around the globe. That network commands an audience of over 4,622,000,000 views this month (that’s billions, folks) that is becoming unreachable through traditional media channels.

From our very first meeting it became clear that the best way to tell Fullscreen’s story was to provide specific examples of the impact they have made in online video. We decided to let the data — channel subscriber growth, video plays, click through rates — tell the more important story, rather than marketing-jargon narratives about the capabilities of Fullscreen’s multi-channel network. Our design strategy includes clear calls to action, bold use of statistics, and authentic glimpses into their creators and ad portfolio.

Speaking of statistics… check out how we improved user engagement on Fullscreen.com. Clearly, design makes a difference!

FS_Data_Infographic

Understanding Personas Creates a Clear Information Architecture

We created proto-personas with a few members of their team and agreed that most site visitors would be either a creator interested in joining the Fullscreen network, a brand seeking a marketing solution, or a smaller segment of members of the media and Fullscreen employees.

Fullscreen.com does not have a very complex IA. In fact, we didn’t change much in terms of structure. The names of some of the sections were lengthened in order to appeal to a broader audience. Those longer names and the flat architecture presented us with our first design challenge: how to accommodate the main navigation.

old_new_IA

We used a hamburger menu to keep the main UI clean of links. The team agreed that it was best to rely on clear task-oriented calls to action to guide most visitors through the site. Persistent links in the header include the most common user tasks: Join, Sign In, and Change Language.

Design Can Set Great Copywriting on Fire

Fullscreen was an awesome partner all-around, especially when it came to crafting website content. They weren’t interested in a game of Chicken & Egg. Their marketing team dove in straight away provided copy samples that eventually became a living, breathing copy deck. Together we tweaked headlines and calls to action as we transformed their Google Doc into interactive design magic.

ARTISTS & CREATORS: IGNITE YOUR CREATIVE CAREER

Here’s the gist: Online video is exploding. Fullscreen helps YouTube creators turn their passion into income by providing a tool set and community support while letting creators own their own content and keep creative control.

 

BRANDS AND AGENCIES: PLUG IN TO THE CONNECTED GENERATION

Here’s the gist: We’ve got the audience you want and the creative chops to help make your brand cool again. Don’t worry we understand brand safety and ROI too.

Progressive Disclosure Improves Engagement

Some people want to skim and some people want to dig deep. Engage. It is essential that a design support both types of engagement. For Fullscreen, we used tabs and modals to hide information that only the most engaged users would be interested in, such as product details, screenshots, and case study results.

Design as a Competitive Advantage View Reading List

By pushing these details another layer deeper into the UI we kept the top-line messaging crystal clear and made the granular details easily accessible for those who are really interested. We also hypothesized that those interested may want to binge, so our modals have a paginator that allow users to breeze through case studies.

FSGIF1

A custom google analytics implementation has helped us to understand which content site visitors are most interested in. As it turns out, those paginators have been used over 172,000 times. And 90% of the time people click right, not left. This data will certainly be used in further iterations on the site’s design.

Clear Calls to Action Drive Real Results

The highest impact pages rely on a marquee panel at the top that pairs images of their creator talent with a compelling hook & promise. This clear call to action has resulted in 226,818 clicks from the marquee pane.

A call to action at the top of a page may provide users a clear next-step. But like that girl you asked out in 10th grade, not everyone gives up their digits so quickly. So, we designed a sticky navigation that orients users so they don’t get lost as they scroll through these storytelling pages. Of course, that primary CTA is also sticky which is how we captured almost 20% of all leads 🙂

Check out or client portfolio!

Combined, these CTAs were clicked 290,070 times in the first six month of the new site.

FS_Data_Infographic2

But, what about us?

“About Us” pages can be really long-winded and dry. After considering our personas, we determined that the visitors that would navigate to “About Us” would also be interested in Leadership, while prospective employees would navigate to “Careers” and also be interested in “About Us”.

FSGIF2

What we ended up with was a sort of super-page that showcases Fullscreen’s mission statement, leadership bios, a peek into their company culture and includes job openings. We used modals again on the leadership bio. Oh, and I should mention that all modals are deep-linked with URL anchor tags so that Fullscreen’s sales team can link directly to these interactive case studies when nurturing qualified leads.

Blogging is Thought Leadership

Fullscreen is leading the charge when it comes to online video. And they’re using their blog as a way to educate brands and creators about trends and best practices. For creators they also provide content video production best practices and other relevant advice. This design is really clean and we played close attention to readability since this is longform content.

FS_Blog_GIF

Each blog post features a link to an author bio, a colorful and on-brand feature image, clear controls for social sharing, plus a “read this next” call to action at the bottom that uses a DT-coded WordPress plugin.

Great Design is Never Done

Fast growing companies like Fullscreen can leverage design to differentiate themselves from their competition. New products and services can strengthen a brand — or kill it. By applying design thinking to business challenges, Fullscreen will continue to be innovative leaders in the new media industry.

How has design helped you?

Comments