The Technical Lead’s Take on the New VEVO Beta Website
March 9, 2012VEVO recently went through a redesign and rework of its entire front-end to come up with a brand new beta version of it’s website. I started as a software engineer at VEVO back in August, and I became the technical lead in charge of the new beta project in January after it started in late November and led a team of a few developers to its completion. I thought it would be a good opportunity to write about some of the things I’ve learned and taken away as well as highlight some of the cooler features we’ve been able to work in and add. I’ll break it down into: design/usability changes, technical improvements and process experiences.
Design and Usability Changes and Updates
- Larger Video Player – This is the first thing that anyone will notice when coming to a video. The player dominates the screen regardless of screen size and acknowledges that the user is there to watch a video.
- Advanced Social Integration – By making use of Facebook, we’re able to tell your friends when you’ve watched a video, share a video with them easily by dragging it to them and seeing your friends playlists. In addition, we create playlists for you based on the music you’ve liked on Facebook and your iTunes library.
- Simpler Homepage – The homepage, instead of having a carousel of images and links at the top with a variety of content below, we have one large carousel that really shows the visitor what the highlighted pieces of content are and what’s new at VEVO.
- Dynamic Resizing – The entire site fits the browser on every page, using more real estate on the screen and ensuring that the content (video) is truly highlighted.
- Persistent Navigation and Header – The navigation on the left, the header on the top and the footer are persistent and fixed throughout the site so a user can see their friends and playlists much more easily and search for a video quickly without needing to scroll.
- Continuous Play – When a user watches a video, we always have a new video to show them after that one finishes. This is a seamless experience for the user and also allows for them to enjoy the music videos without needing to really work to find videos that they’ll like.
- Removing Search Results Page – This sounds like it would be a bad idea, however, it improves the likelihood of a good experience. When a user searches for “Lady Gaga” but mistypes “Ladt Gaga” they, based on their experience on Google and elsewhere, expect to be corrected or brought to the right place anyway. VEVO, however, doesn’t have the resources or manpower to spend time on creating such advanced search algorithms, so we instead used only lookahead search, then a user quickly sees that they mistyped and corrects themselves, getting the results they want right in front of them.
Technical Improvements
- Using HTML5 Pushstate – By using the HTML5 pushstate on the playlist and video pages, we’re able to quickly show new content on the video page and decrease load time and increase overall performance, experience and decrease the number of HTTP requests.
- Local Caching – By caching artist, video and friend information on a user’s local machine, that means fewer data requests to our servers and much faster speeds on each additional page, meaning that the user gets a faster and faster experience as they go from video to video.
- Improved Recommendation System – By leveraging Echonest and their recommendation system, we’re able to give a user many, many more videos that are far more applicable to exactly what they are looking for, making the continuous play mentioned above all that more memorable and compelling.
- Cached Pages – By making all user-based calls come after the page loads via JavaScript, that means we can use extensive caching on most pages and modify the pages once the page has started loading on the user’s end.
- JavaScript and CSS Bundling – While previous versions of VEVO had this in a sense, there was often repeated JavaScript or CSS or multiple calls to different bundles on different pages. In addition, the system we used was hard to manage or tweak and couldn’t be debugged or adjusted on the fly. The new system combines all JavaScript and CSS files into two large bundles that are the same on every page, making it fast and simple, with an option to turn it off if debugging is needed and a switch to regenerate the CSS or JavaScript bundles on the fly.
- Facebook Integration – We were able to heavily leverage Facebook to get information about users of the site, including friends and music likes to greatly personalize the website.
- iTunes Scanning – We used a Java Applet to allow users to scan their iTunes library and create a playlist based on the artists they have in their library. This was one feature that really got some oohs and aahs and showed people some of the more unknown videos we have in our catalog.
Process Experiences and Lessons Learned
- Scope Creep – The bane of all projects, large and small is scope creep. While we did limit it in some ways during the project, pushing things back saying we could add or improve them post-beta, that wasn’t always the case. Especially when we were near the end of the project, the final 10% of work seemed to drag on and on with small, and large, additional changes.
- Time Management – While you always try to plan to have time to tweak features and eliminate bugs, the reality is that you can never plan enough time for that. Again, that last 10% usually takes the most work and there’s nothing like having more time to handle that and not needing to scramble.
- Chaos Versus Agile – While VEVO touts using an agile process, the beta version was given such a short deadline and so many things to accomplish and change that that process started to break down. Tasks were lost along the way or never assigned to developers or designers, so it wasn’t clear who was assigned what as well as what the status was on a given feature, design or bugfix.
- Running on Empty – Given that it was a big project with a small team, people were running at their top performance for quite some time. While this can be good for short times, doing it for two or three months discourages people and hurts motivation as well as quality of work due to overwork and general tiredness. In addition, the ideal of doing things fast tends to hurt the ideal of doing things right, so the final stages, often the most crucial, are filled with the most mistakes. Combine this with scope creep and you are left with a frustrated team in general.
- Beta Means Beta – While I appreciate perfect, often “done” is better. And there should be a criteria for “done.” This eliminates scope creep, gets things rolled out on time and encourages agile development. We aren’t releasing a magazine, newspaper or book – we can always add more features, fix more bugs or improve performance later and start getting user feedback and information sooner.
It was a fun and exciting, while stressful, project to be a part of and I’m looking forward to its reception in the coming days, weeks and months. I’m sure it will be mixed and that there will be both positive and negative reviews, but I’m proud of what the team has accomplished in the time we were given and I’m proud that we were able to change how video sites work and able to make an impact as the second largest video site in the United States.
