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
Hard launch date (1 month)
Site UI could not be redesigned
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
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.
TVAs becomes the go-to source for all things related to travel videos.
Connect filmmakers with companies.
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
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.
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.
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.
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?
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?
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
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.
Easy submission process
Gain reputation (as a resource, creative, company)
Connect with other creatives in the travel industry
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.
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.
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.
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.
Choose a category
Select the appropriate filters (Video list is updated live)
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
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