UI and Product Design

Hideout.tv

Dates:
2017-2019

Main Collaborators:
Fehzan Ali (CEO)
Mike Dunn (CTO)
Tony Cohn (Marketing)

Platforms
Web
Android / FireTv
iOS

My Role:
User Research
User Flows
Wireframes
Prototyping / Testing
Micro Animations
High Fidelity Design
Hand-Off to dev and final QA

Hideout.TV was both a video platform and first of it’s kind monetization solution within the rewarded ad space. Like many existing video platforms, the main revenue driver was video ads. The biggest differentiator however, was that viewers were a major part of the ecosystem as they would earn points for watching; which they could redeem with one of Hideout.TV’s reward partners.

The idea began as a way to introduce video ads to the Adscend Media ecosystem. We first built an MVP on the web, which was a simple video player with a limited amount of licensed content. Because we already had a substantial motivated user base in our Offer Wall product, we leveraged the MVP into our offer wall in order to test it with actual users. The MVP was a massive success as it saw quick user adoption, while at the same time showing us the challenges of working with video ads. We then decided to take the project further into a full fledged platform with user generated content as apposed to simply licensing videos and a host of other features for users as well.

MVP Feature List
11 Channel Categories of Curated Videos
Account Not Needed
Auto-Cash Out To Reward Platform After 3rd Ad
Videos continually auto-play
Web Only

Final Version Feature List
15+ General Channels of Curated Videos
Video Creator Accounts: Create Channels, Upload Videos, Earn Ad Revenue
Search and filtering options for videos
Subscribe to channels
Video interaction: Like Videos, View Rewards As You Watch, Share, and Reactions
Link reward account(s) to Hideout account
Store Earned Points into User Account, Redeem at any time
Notifications for Channel Subscriptions, Points Earned, Points Redeemed
Videos continually auto-play
Web, Android App, and FireTV App launched. iOS App was built, but did not see the light of day.

Challenges

Fraud

Fraud was always the first and foremost concern for us at Adscend Media. Online advertising campaigns can run very expesive budgets, so advertisers want to ensure their leads and impressions are genuine. On the end user side, we always needed to safeguard against those who would look to game the system. Measures such as limited sessions, user interaction / inactivity checker, mute checker, and a ton of other back end considerations had to be put in place. Legit users might still run into these implementations from time to time, so our goal was to always ensure the experience was not accusatory in any way. We created a whole support center with articles on how users could maximize their earnings legitimately, and also where they could contact us for help.

Linking Reward Accounts

Since we didn’t handle the rewards, we needed to find a seamless as possible way to link a user’s Hideout.TV account with their Rewards Account.Easy in theory, but our affiliates were not large companies and did not have an API we could integrate with. This meant that we had to take a slightly different approach where-in the UX may not have been optimal. Ultimately with the help of the engineering team, we were able to use a script that would detect users’ accounts automatically. The script was placed on the initial landing page after logging into the third party reward providers account, and all the user had to do was then return to their Hideout account and refresh the page.

Redeeming Points

Because each reward provider could set their own payout terms for users, the points needed for rewards could vary wildly. Though the actual dollar amount was typically always the same, it meant that for one reward provider 100 Hideout points might equal $1.00, and for another 10,000 Hideout points could equal $1. This meant that upon redeeming your points on Hideout, a conversion needed to take place. Though this did require quite the explanation on the screen, we made sure the conversion amount was front and center and impossible to miss. Ultimately there is no way around these conversions, but we simply wanted to avoid user’s being unaware of what was happening with their points.

Team Size and Resources

Our team was small and resource limited. I was the only designer in the entire company and worked directly with the CTO. By this point, we did not have any in house engineers anymore, and that team was entirely out sourced. The ad industry being extremely volatile also meant we sometimes did not have the luxury of spending as much time as needed testing. As such, a lot of the UX work was done retro-actively after launching and getting live reactions. While this is not the ideal process, and I have always been a proponent of thorough testing before launching, it was one of the realities of what we had to work with. Luckily we already had a motivated user base.

User Flows / Wireframes

Since we were such a small team, creating the initial wireframes and user flows revolved around dissecting some of the biggest video platforms already established. Our goal was to make content easy to browse and find, and include all of our own features. Main navigation included featured user channels, latest uploads to the platform, and most viewed videos. Once on a video page, we included some social interaction features(like video, share video, and reactions) and also a dedicated area for users to view their accumulated earnings and redeem if desired.

Visual Design Guidelines

A visual guide was created for the engineering team so they had easy access to specs including the grid system, headers, navigation, buttons, icons, input fields, and different video sizes. The visual design system was housed on our Zeplin project for easy access to actual specs.

Landing Screens

At initial launch, our team curated specific “channels” of various videos that users could watch. But as the platform grew, we began to onboard video creators to the platform and the focus became featuring the Creator channels front and center. The goal was to not lock videos behind an account; this way users could still view any video at any time. However, the biggest incentive for creating an account was to reap the rewards(literally) for watching.

Creator Channels

Video Player Screen

The video pages themselves boasted some similar features to other platforms. Including a subscribe button and a “Like” button. Because Hideout.TV was rewards focused though, another big option included an easy to access drawer that displayed the amount of currency the user had earned up to that point. The redeem button was also highlighted so the user could go straight to cashing out at any time.

At the time, it was decided against including the ability to leave comments, but we also integrated a “Reactions” option as a way for users to leave video creators some form of feedback.

Account Screens

The My Account section of course boasted first and foremost a Sign In / Sign Up page. Once signed in, users could access their Subscriptions and account settings. Other options included a dedicated section to report any bugs, and an external link to our Support Center as well. Most importantly, this is where users could go to redeem their points.

In Closing

This was really just a piece of everything that went into this project. Mostly I just wanted to showcase the mobile app more than anything. Other pieces to this project included the entire web app / platform including a Creator Portal where approved users could create their channels, upload their videos, and view their stats. As well as few other user features. What this project looks like now, unfortunately I cannot say.