David Kim
 
 
imac_hompage.jpg
 
 

Project Summary

 
 

The TVAs (Travel Video Awards) is held annually to celebrate the best filmmakers in the industry. The first annual TVAs was a success and has gained backing by NAB (National Association of Broadcasting). There were about 100 videos submitted in the first year and Citizine is expecting about double the entries for the second year. 

Although about 100 videos were submitted, only the winners and nominees were able to be viewed. Citizine wants the TVAs to grow beyond an award show, to becoming the go to site for anyone looking to learn more about creating these videos to companies looking for their next talent.

 

My Role: Freelance UX Designer
Tools: Figma, Sketch, Invision, Whiteboard, pen and paper
Contraints:

  • Hard launch date (1 month)

  • Site UI could not be redesigned

  • Remote team

    • 1 Designer

    • 1 Developer

 
 
Solid-1-06.png

Meeting Citizine

 
Citizine Office.jpg
 
 
Whiteboard_01.png
 

I wanted to define who would be using this site and what the future of the TVAs looked like.

Through a whiteboarding session I discovered:

  • Who my users were

    • Independent Filmmakers

    • Travel Brands

    • Citizine

  • What Citizine’s goals were

    • Immediate goal: Get more submissions

    • 1 year: Become a resource for filmmakers and connect them with Travel Brands

    • Long term: Become a “household” name for the travel video industry.


 
 
 

Objectives

Goals:

  • TVAs becomes the go-to source for all things related to travel videos.

  • Connect filmmakers with companies.

The Ask:

I was asked to design a new homepage, a Spotlights (featured articles) page; redesign the existing Awards page, and to create a database of all the films that have been submitted to the TVAs

  • Home page

  • Spotlights

  • Awards

  • TVAdb

 
Solid-1-01.png

Existing Site

 
 
The existing sitemap looks simple but it can’t handle the amount of information on the website

The existing sitemap looks simple but it can’t handle the amount of information on the website

The initial purpose of the site was to be a platform for creators to sign up on. After the first awards the show the site grew to allow users to see the work of the winners and nominees.

The “homepage” served as the sign up page but there was no indication that users could sign up without having to scroll down the whole page.

The current site had pulldown links to help facilitate navigation but the links lived on the primary navigation with no visual distinguishers.

 
 
 
The TVA about page is the current landing page

The TVA about page is the current landing page

Auto-play video with sound

The TVA Landing page would always play a looping video at full volume. This beautiful video quickly became repetitive and even prompted warnings from the Citizine team to mute before entering the site.

 
 
 
There is no differentiation between a link and a pulldown link on the navigation bar

There is no differentiation between a link and a pulldown link on the navigation bar

Unexpected interactions

Visually, the navigation bar communicates that there are 7 content pages. However, clicking on Winners and About will take you their own pages, while the other links function as pulldowns to their respective anchors down the scroll.

 
 
 
Three different pages on the TVA website all with different ways to navigate through each page

Three different pages on the TVA website all with different ways to navigate through each page

Each new page shouldn’t mean a new way to navigate

There is a lot of great content on the existing site but users are forced to learn how to navigate each page on the site. The color scheme may look familiar but the layout is completely dependent on the page the user is on.

Should the entire sign up flow be on the homepage? Is this what users should see when they first enter a site?

Does the use feel confident enough to navigate through your site?

 
 
Embedded video player (Top), Modal video player (Bottom)

Embedded video player (Top), Modal video player (Bottom)

Unclear expectations with 2 different types video players

Users don’t know whether to expect a modal or to be taken to a new page to watch a video. How do we manage expectations if both are used?

 
 

My solution

  • Reorganize site information architecture

  • Create a homepage to promote featured content and events

  • Design a Spotlights page to feature articles and interviews with filmmakers

  • Create a database where users can sort through videos

  • Eliminate redundant elements to manage user expectations

 
Solid-1-01.png

Personas

My research led me to identifying 3 personas — each with their own set of objectives. I wanted to make sure that my designs would benefit the user while meeting Citizine’s goals.

 
 

Primary Persona

Independent Filmmaker.png
 
 
 

Secondary Personas

Citizine.png
 
 
 
 
 
 

Goals Aligned

  • Easy submission process

  • Gain reputation (as a resource, creative, company)

  • Connect with other creatives in the travel industry

 
Solid-1-01.png

Information Architecture

 
The existing sitemap looks simple but it can’t handle the amount of information on the website


The existing sitemap looks simple but it can’t handle the amount of information on the website

 

Existing Sitemap

Most of the site lives on the home page down the scroll. Anchor links live on the primary navigation and there is no differentiation between a site link and an anchor link.

Users have to scroll near the bottom of the page to find the submission form.

 
 
The first iteration of the new sitemap

The first iteration of the new sitemap

Redesigning the IA

I designed the new sitemap with the Citizine team. My primary objective was to convince the team that there needed to be a home page.

I proposed that the homepage would allow users to learn about current events and be able to easily navigate through the site.

 
 
 
The new sitemap may have more pages but it also increases usability

The new sitemap may have more pages but it also increases usability

A sitemap that will grow with the TVAs

With the addition of a homepage and CTAs at each section, users will be able to reach their destinations with more confidence.

The TVAdatabase (TVAdb) can be used to easily sort through videos using easy to understand filters and dropdowns.

 
 
 

Designs

 
Solid-1-01.png
 

Technical Difficulties - Linux meets a windows designer.

As I began to share my sketch files with my developer, he shared that he was working off of linux and could not open my design files. Knowing that we were working off of a tight timeline with a tight budget, I proposed that we work with Figma.

This tool allowed him to see any changes I made in realtime and be able to pull the CSS for every asset. This decision streamlined our workflow by essentially eliminating handoffs.

 

Home screen

TVA homepage with featured content and events

TVA homepage with featured content and events

 
 
Responsive mobile view

Responsive mobile view

 

Awards

Awards page with a secondary navigation bar to help with navigation

Awards page with a secondary navigation bar to help with navigation

TVAdb

Whiteboard_tvadb_01.png

User flow

  1. Choose a category

  2. Select the appropriate filters (Video list is updated live)

  3. Select video  

 

Why Filters?

Search bars are great but can create friction with dead ends and are not useful in every context. They can often feel like a guessing game.

Considering that filmmakers and companies are looking for specific types of videos/creatives, I decided to use filters and dropdowns to simplify the search process.

 

Filters can be used help the user find what they want faster

TVAdb categories and filters

TVAdb categories and filters

Instant Results
Search results populate instantaneously to get users where they want to go—right away.

  • In this context, filters and dropdowns eliminate the need for a search bar

  • This isnt a test of knowledge. The database is a resource. Give the user the answers

 
 

TVAdb is Live

Watch the video below to see how it works

 
Solid-1-01.png
 
 

Next Steps

I enjoyed my time working with the Citizine Team and I am hopeful that this years TVAs will be an even greater success that the last.

That being said, there is still some work to be done.

  • Once the awards show is complete the Citizine team should implement a way for filmmakers to be contacted via their Citizine accounts.

  • Build out the Spotlights page and create a content release schedule to ensure that users have an incentive to return often.

  • Distill the amount of copy to a digestible amount.

 
Solid-1-01.png