Are you a fan of the popular YouTube channel TheViralFeverVideos? Then we have a good news for you. Now you can watch all their videos and some other cool and humorous shows from the past, all in one place.

FATbit Technologies just completed the work on the tvfplay.com and launched the beta website on 27^th May 2015, which surely would prove to be a milestone for both teams – FATbit and TVF. Within 7 days, more than 48,000 people have registered on the site. And now they can enjoy their favorite TVF shows and the popular Qtiyapa series of short videos uninterrupted, as the site can easily handle thousands of concurrent viewers for each video.

Now, before we introduce the tvfplay.com’s features and functionalities, let’s first go through the interesting story of TVF team.

TVF Story: Bumps and Bumps and Bumps Then a Long Smooth Ride

TVF is the brainchild of Arunabh Kumar, an IIT Kharagpur’s alumnus, who tried but couldn’t sell his ideas for ‘creating and distributing short humorous videos based on the funny side of day-to-day life’ to several production houses including MTV India.

He was constantly told ‘Indian youth doesn’t want to watch this’. So, he was like ‘Okay, screw it! I’ll prove them wrong.’ And that’s exactly what he did with the help of bunch of fellow IITians, as he went on to create his own and India’s largest online entertainment network – The Viral Fever Media Labs.

Today, TVF Media Labs has 5 functioning ventures under it featuring different categories of humorous & drama videos and shows. Their YouTube channel has acquired more than 1 million subscribers in shortest time ever, and thousands of new users are subscribing to it every single day. TVF was also the sole representative from India at the International YouTube Fan Festival, 2013.

Phew! Alright, moving back to the website

TVF Play: As Awesome a Website, As Awesome Is TVF

The idea behind creating the site was to make the popular TVF web series as easily available to youths as typical TV series, which they barely watch. TVF team approached us with the idea of building a website where youths can easily watch their favorite TVF videos or web series episodes in just a couple of clicks.

FATbit team undertook the project readily and developed exactly what they were looking for and delivered it just in time before the release of their upcoming web series Pitchers, which will be aired on the site on June 3, 2015 and on their YouTube channel a week later on June 10. So, if you are a fan, you might want to register on the site instead of waiting for an extra week.

FATbit team took great measures to ensure a good user experience and a seamless content distribution while building the website, which was the prime purpose behind its launch. And of course, FATbit’s experience in the web industry certainly came handy here.

The Entire TVF Network at One Place

All videos are free to watch, and users can access them by registering on the site. The sign up form is concise and without unnecessary fields like alternate email, date of birth, etc. Users can easily sign up and Login with their email address, G+ account, or Facebook account.

Videos are listed in three categories on the site:

TVF Originals: Web series originally created by TVF team one of which (Permanent Roommates) has become the most watched branded web series in the world.

Qtiyapa Shows: Most popular of their work that primarily features parodies of popular Indian TV series. Some of these videos features Bollywood celebrities, not big-time, but yeah, the likes of Shah Rukh Khan, Ranveer Singh, Parineeti Chopra, Anurag Kashyap, Ayushmann Khurana, Ali Zafar and hardly known political figures like present Delhi CM Arvind Kejrival.

Awesome Shows: These are the TV series from past, humorous and dramatic, from India and west, which the team thinks India’s youth of today must watch. (Personal advice ‘do watch them’)

Good User Experience. Delivered.

1) The top navigation bar features all video categories to engage visitors as they land on the site. The navigation bar tabs expand on mouse hover into a dropdown panel of featured image of top shows of that particular category. With one click alone, registered users can begin with watching their favorite TVF videos and web series. They can also checkout more shows of that category by visiting the category page.

Top video players viz. YouTube, Vimeo and JWPlayer are integrated in the site to ensure seamless high quality buffering and watching of the videos.

Click to Enlarge

2) The navigation bar stays at the screen top as users scroll down, so that they can switch between video categories.

3) The banner area features most popular and upcoming TVF shows, so that users can access them right from there.

4) The below-the-fold section features thumbnails for videos organized into categories, which on mouse hover gives users brief info and options to either visit the dedicated webpage of that video series or play the entire series. Users can also share the web series page with their Facebook and Twitter friends.

Click to Enlarge

Also Read: How Much Do You Focus on User Experience Design While Building a Website?

So, once users land on the site, they can watch a complete series in not just-a-couple-of-clicks, but one click only. How often do you get such swift options? Even watching something on TV will require at least 5 to 6 presses on the remote controller.

Turn your website into a delight for your target audience.
Consult experts to Enhance it’s UX

TVF Play Experience: Better Than That of TV

There is a dedicated webpage for each web series and each video. And to enhance the experience of watching, following features are provided on the web series and video pages:

• Browse through other episodes quickly through a vertical slider
• Like or dislike a video
• Share video with friends on social media
• Navigate back quickly to main category
• Comment on a video through Facebook & Yahoo account
• Play all episodes with just one click

Click to Enlarge

Watch Videos Anywhere: Desktop, Smartphones, Tablets

TVF Play is responsive. Of course, it is kind of a no brainer feature for websites in today’s mobile era. But mind you, there are countless websites that are still not going for responsive design. Anyway, back to the point. Since, TVF Play is responsive, users can easily access it through all their mobile and desktop devices. Plus, being responsive will also help the site to appear in mobile results, as Google now only shows mobile friendly sites in mobile results.

Make sure the growing mobile audience can find you.
Go Responsive

User Profile Options

Of course the site is built for users primarily, so we cannot wrap things up without mentioning a few features that registered users are provided with. So here they are:

• Users are provided the usual profile editing and account management options
• Users can share videos with their Facebook and Twitter friends
• User can check their ‘watched history’ and manage it, like on YouTube

Click to Enlarge

Like they say in the food industry that ‘food tastes better when served well’; similarly in the online world your digital product works better when it is showcased properly, can be accessed easily, and is easy to use. So, if you too want your digital product like software, mobile app, content sharing networks, web application, etc. to reach and engage more people, make sure it is presented professionally in the online world.

Need a professional website to boost your reach and sales?
Get in touch

NOTE – The website is in Beta stage, and going through updates. Hence, mentioned design and feature details are likely to change.

FATbit recently completed redesign of Notebudd, a peer-to-peer platform that allows students to share notes, study guides, past midterms/exams or any study materials. Through the platform, users can buy and sell study material just like an e-commerce website.

Notebudd approached FATbit to redesign its website and promote it as one-stop knowledge hub for students. Whilst core objective of Notebudd team was to increase user base through redesign, there was also a need improve user experience to make it a preferred destination for students.

Initial Research

To succeed in its objectives, the website required a seamless user experience for the end user. This was not possible without understanding what the brand stood for, who the target audience is, and what role the website would play for its users. It is vital to understand that the theme of the website should always be in conjunction with the products and services it provides as well as the targeted user base.

Suggested Strategy

Our findings during research phase helped us simplify the goals for Notebudd, and generated a set of recommendations for moving forward. These details would act as specifications, ensuring that all future design decisions were grounded in evidence-based research.

After various brainstorming sessions, our proficient analysts drafted mockups to give client an idea of our design vision. It was clear that homepage lacked substance, and required complete overhaul. Our team of information architects also felt the need of restructuring navigation to make information easily accessible.

We shared our observations with Notebudd team in an interactive session and explained our ideas, prototypes, and also got approval for our proposed approach.

Design Implementation

After detailed analysis and information gathering, we moved on to the process of active re-design.

Homepage (before)

Click to Enlarge

Homepage is clearly website’s backbone, and needs undivided attention. This is why we focused on a feature rich homepage with all the relevant information.

• Color palette of the website consisted of gray and light blue.
• There was not much information available to the user on homepage.
• The homepage banner did not add much value to the website.
• The menu bar also lacked any substance.
• Design of the footer could also use links to relevant pages and visual upgrade.

Homepage (after)

Click to Enlarge

• The overall color palette was changed to mint green and gray.
• Because website is majorly about sharing books and notes, we highlighted the same in the banner.
• Rather than multiple lengthy content pages, all the content from those pages was rearranged and merged into the homepage. This was an innovative approach as it diminished the need for a menu bar as well as separate pages.
• CTAs were added to each section for user engagement.
• Testimonials entice visitors into trusting the service. This is why we incorporated a dedicated testimonial section on the homepage.
• Footer was redesigned to look livelier with more prominently placed logo.

Login (before)

Click to Enlarge

The login page was simple, and was not capturing user’s interest. Although one-click Facebook login was present, its placement in the header was not ideal. Login/signup options did not stand out from the rest of the website.

Login (after)

Click to Enlarge

We wanted to ensure that only relevant information is visible to a user on the screen at any given time. In order to make the login/signup page stand out from the rest of the website, its color palette was changed to a darker theme. One-click login via Facebook was placed below the login box.

Dashboard (before)

Click to Enlarge

After detailed website analysis, we found that registered users spent majority of their time in dashboard. UI of Notebudd’s dashboard however needed rethought. It had a static design with little or no interaction with the user. The tabbed approach made it look more like a settings page.

Dashboard (after)

Click to Enlarge

We pitched the idea to transform the dashboard into a continuous page of live updates and feed. This not only increased the interaction level but also created a peer-to-peer channel. Relevant information essential for the user was placed directly on the dashboard, diminishing the need for opening separate sections. Badges were also added to the interface to keep the user updated with new updates and notifications.

Other features that were added are:

• List of associated programs, courses, clubs, and events.
• Feature to add any course at any time from his follow list to the timeline.
• Detailed user profile including year of graduation and all notes posted by user.
• On the side of the dashboard, a control panel was added for “My Courses, My program, My Events, My Clubs”.
• Users can also add/delete or view the main pages of each group from the control panel.
• If there is any activity, a notification is shown to the user near that course code or program name. The same goes for clubs and events.

Note listing (before)

Click to Enlarge

Note listing is one of the most complex pages from design perspective. FATbit designers incorporated an innovative design approach to handle it. Earlier this page just had minimal interface with basic information. The sole purpose of this page was to present users with a download option with no real information sharing.

Note Listing (after)

Click to Enlarge

• While designing this page, we went all out and adding a host of features.
• Advanced filters were added and placed in the left pane in order to streamline results as per relevancy.
• Users were also given an option to sort the results as per their preference.

We put a lot of emphasis on the user interface of this page in order to make it intuitive. Rather than just adding an option to download a note, we provided with in-depth analytics related to a particular note. This included number of downloads, the number of comments, how many found the note helpful.

Notes details (before)Click to Enlarge

The situation was same with the notes page when it came to user interface. There was very little information present and the page didn’t garner any interest. Screen real estate was also not wisely used.

Notes details (after)

Click to Enlarge

Our designers proposed the idea of giving a preview of the note to the users within the page. This would inform visitors about the note contents.

• The design of comments section was also changed, making it easier for users to segregate each comment.
• Different sections were added to the right pane like downloads, uploader description, statistics, and more notes for the uploader.

Post-release analytics showed that this approach drastically brought down bounce rate of the webpage.

Books details page (before)

Click to Enlarge

Another area where we found major scope of improvement was inner book details page. There were only three sections on this webpage: book details, uploader details, and query form. After working on different design implementation, we came up with a new interface that changes the whole outlook of this page.

Books details Page (after)

Click to Enlarge

• Breadcrumbs were added to the top section.
• Book’s image and details section were aligned in a way to give it a card like interface.
• A description section was added that would make it easy for the user to understand the contents of the book
• Add buddy button was added to make it easy user to connect with each other.
• A new section was added below it that showcased other books by the uploader.

In addition to the above-mentioned changes, our team of designers and developers also integrated some additional features to the website. The main aim of these enhancements was to create an active community and ecosystem of information sharing.

Events

Click to Enlarge

The website was the preferred destination for students to share notes, study guides, and study materials but we added another dimension to it. We added a new section where students can create events which could be beneficial for other users. This not only added another channel where students could interact with each other but also lead to rich information sharing.

While designing this page, special care was given to the interaction aspect.

• The left pane houses all the technical details about the event like time left, description, location of event, and number of members attending.
• An image gallery was added to the top which showcased all the relevant pictures of the event.
• Below the image gallery, a topic timeline was added where a member could add various topics for discussion.
• The search option was provided to make it easy for the user to search a particular topic.

Programs discussion page

Click to Enlarge

FATbit researchers wanted to make Notebudd more than just a website to download books and notes. That’s why we added another section to the website where users could discuss program-related queries. The overall design was similar to the events page, but with additional tabs like houses program topics, program events, and program notes added to it. Users were also given option to add a topic or an event to the program.

Public user profile

Click to Enlarge

Recommended Reading: How Much Do You Focus on User Experience Design While Building a Website?

Earlier Notebudd did not have any option to view a user’s profile. This made it difficult for users to interact with each other. From the start, we wanted to give a social outlook to the website, which is why we added a public user profile section. The design of this page was kept simple in order to accommodate user information.

• Each profile page has separate panels for notes, books, clubs and events added by the user.
• The right pane houses information like number of user’s study buddies as well as events, clubs, programs and courses joined.

The new Notebudd website has been launched with positive reviews. The site experience after the redesign beautifully reflects their brand and enhances the peer-to-peer services provided by the website. It not only provides an exceptional experience for users but has also resulted in rich engagement between students.

Initial post redesign metrics also look very promising when compared to pre-design stage data. With the improved navigation, UX focused design, and better content arrangement, new Notebudd has become a better communication and information sharing tool for the students.