UNBLOCK-US

Set Your Content Free

Next ProjectPrevious Project

Unblock-Us believes that the internet should be free of arbitrary restrictions and geographic borders that restrict access to the content people want to watch. They solve this problem with a set of easy-to-use tools that remove these virtual borders and eliminate local blackouts so you can access the content you want, where you want, when you want.

Design with Transparency

Questions of uncertainty begin to surface when mentioning companies like Unblock-Us. People immediately build a sense of mistrust in a company that eliminates border restrictions when accessing content. It was our duty to make Unblock-Us as transparent as possible to persuade prospective users. 

Unblock-Us was merely a tool to connect you to the content you couldn’t access before. They wanted to be more than this; a destination where users go to discover new content. The landing page needed to demystify Unblock-Us and clearly articulate the service it offers.

The first options certainly introduced the ability to discover new content, however lacked in brand exclusivity. You could probably throw any logo in the top left corner and no one would raise an eyebrow.

A Colorful Breakthrough

I looked to the logo and pulled the colorful prism apart to develop a confetti-like element across the landing experience. These individual triangles were designed in code, and moved dynamically down the page with a parallax scroll. 

The addition of the side pagination's icons and subtle animation brought the page to life. The flow of information down the page built a sense of trust, authenticity, and fun too.

Join The Conversation

We wanted to integrate a platform to communicate due to the high volume of conversation happening on their forum. Users tend to contribute to the FAQs and often have technical inquiries. A space was needed for users to rally around and get involved in trending issues and hot topics. 

Channel Surfing

The offering of channels from UBU is quite extensive. There needed to be an easy mechanism for the user to quickly retrieve the information they were looking for. This browsing tool needed to inform the user immediately if they had what was needed for compatibility. The drop-down complemented the search tool and worked well for the users that wanted to dig deeper. If a channel wasn’t being offered, we allowed the user to suggest it to be added to Unblock-Us.

Keeping Tidy

We were moving at such a fast pace, we lost a little bit of control over the look and feel. Buttons of all shapes and sizes started to emerge. The type was beginning to look sloppy. Links were different on every page. We needed to take a step back and clean up. Special thanks to Nelson Leung for putting this together.

A Warm Welcome

Setting up Unblock-Us is effortless and we needed to communicate that effectively to attract potential users. Through a short tutorial video, we did just that. Enjoy!

WHAT I LEARNED

Embrace New Tools

Originally, our team of motion designers were going to spearhead the “How To” video. Unfortunately, the office was so busy at the time, we couldn’t allocate enough time for them to complete it. We had to move forward without them. Not having very much experience animating outside of mobile user flows and product tutorials, I had to pivot my focus from product design to animation. It was painfully slow at first. Easing an object in the curves panel of After Effects may have taken three hours one day, if I remember correctly. But I got better at it. It became second nature to me after spending days in AE. I can now say it’s part of my everyday toolkit.

Credits: Geoff Teehan, Nelson Leung, Steph Emila, Justin Aguilar, Jayne Bingler and Matt Hodgins.