top of page

TheVibe Website

Conceptualisation, Planning, UI / UX, Copy writing

A complex website & brand, simplified.

While I was working with TheVibe as Creative Head, renewing their website design and online presence was one of my main projects. TheVibe is a video-first content studio that functions as a creative production house but also has a community led, storytelling presence that they call the 'Editorial.' The brief was to create a strong and visible distinction between the two brand personas on their website, while giving each their own space for content and visibility. I sat down with the founder and mapped out exactly what the website needed to resonate and drew out a step by step UI/UX plan while collaborating with an external developer.

The switch 

I introduced a switch on the top left corner of the website, this allows the entire website to toggle between 'Studios' and 'Editorial' mode, as the user turns the switch on and off. No matter on what page the user is, if the switch is turned down, the website switches to 'Studios' mode and if the switch is turned up, the website changes to 'Editorial' mode. The landing page of the website gives the user an option to enter the 'Studios' mode of the website, the 'Editorial' mode of the website or simply watch the showreel.

TheVibe Studios

The 'Studios' mode captures all of TheVibe's latest series and documentaries in one place alongside their ad films, brand content and corporate films. It also lists all their clients, meaning, if anyone wanted to hire TheVibe Studios, or learn about their shows and docus, this mode was for them.

Hold to Travel

This experimental feature became a very exciting part of the project. Each series also has an internal page, that tells you about the show, shows you a trailer, photo essays, excerpts from the show, a playlist of the OST, a list of the crew etc. But the most interesting part was the cover, that let's you travel within the series through experiences and places if you long press on 'Hold to travel,' which is the cursor itself when hovered on the cover image.

Smaller Details

While we solved for the major brief with the switch, I also wanted to have fun with this project by bringing animation and movement in through the finer details on pages that would have regular engagement like the Contact page, Team page and Brand Ethos page.

Credits

Design & Creative Lead

Aayushi Kay

Founder / Client

Asad Abid

Developer

Hiren Kangad 

Copy

Kartik Rao

bottom of page