Summary of my job at NBCNews.com
In this blog post I will document my work experience working at NBCUniversal on NBCNews.com website for 3 years: 2014-2017. There are a few things that I want to talk about:
- Projects I worked on
- The experience I gained
- Innovation that I brought to the company
Summary of experience:
I was lucky to work with a few dozen very smart people at NBC Universal Seattle in an incredible office on 26th floor of Columbia Center (that office has now moved). I got that job as one of the first hires through Hired.com‘s Seattle branch. My official title when I was hired was “UX Engineer” and it was a role that combined engineering with some aspects of user experience design.
My work:
During the three years I worked there, I was given a chance to develop my skills in many areas: frontend engineering, backend engineering, system architecture, user experience, project management, product development and many more. I got to work with many people that are smarter than me and whom I admire.
The work that I did primarily ended up on NBCNews.com website and sometimes on Today.com website. By the time I left, there was virtually no web page on the NBCNews site whose code I didn’t know about or haven’t worked on.
I have classified my work into four areas that I summarized in my Portfolio:
- Video Fronts
- Live Blogging Platform
- UI/UI/Frontend projects
- Web Performance
In order to give a better idea of the work I did, I will expand on those four sections in here. I’ll start with the Video fronts explanation and work:
Video fronts
Video fronts are the pages on the site that have a large video player accompanied by a playlist of some sort. When I started working at NBCNews, those pages needed a major overhaul.
I was tasked with implementing interactive user experience for the three major NBC News shows: Nightly News, Meet the Press and Dateline. In the first two months of working with a designer and creative director I developed and delivered the first iteration of a framework that powered video watching experience on some parts of NBCNews.com. I then continued developing this Backbone.js-based framework and made it easily adaptable for any playlist-based experiences throughout the site. When I had a complete system, I mentored other developers that were working on a similar product for Today.com and they implemented a similar framework for that site as well. Eventually over 40% of all video streams on the site were powered by the framework I developed. The work that I performed on this project was:
- Use HTML/JS/SASS to implement design requirements
- Integrate analytics and advertisement systems into the product
- Check user research results and modify the product based on those results
- Provide suggestions to creative director to improve the product
- Extensive Browser testing / performance testing and optimizations
Technologies used:
- Backbone.js
- Handlebars Templates
- Node.js
- CSS / SASS
- Google Analytics
Below you can see a video and screenshots of the finished product:
Live blogging Platform
In the middle of 2015 I was very interested in real time communications (WebSockets, WebRTC and similar). Having built my own live blogging platform prototype, I proposed that NBC News builds a live blogging platform. I was really passionate about this idea and I went beyond my job responsibilities to make it happen. After getting certain approvals and doing prep work, I was leading initial communications between multiple teams to build this product. As a part of preparation work, the designers and developers that would be working on this product engaged with the editorial teams to better understand how they would use it.
We launched the live blogging platform in early 2016 and it was a huge success right off the bat and remained a big driver of user engagement and as a result, revenue. The system that I built along with a senior developer and a senior designer on my team is still powering live blogs on NBC News as of Jan 2019 (you can see it here).
The work that I have done to make this product:
- Study the way journalists add and edit content
- Develop a full stack framework for widgets (“cards”) in the liveblog
- Study and implement live blogging in AMP and FB Instant article formats
- Implement analytics and ad delivery
- Performance testing and optimizations
- Work with Analytics, Ads, CMS Teams
Technologies used:
- Node.js
- Backbone.js
- Vanilla JS
- CSS / SASS
- Handlebars
- jQuery
Here are some screenshots of the platform:
UX / UI / Frontend projects
I worked on dozens of UX/UI/Frontend development projects for NBCNews.com and Today.com. From creating election-related widgets that were used by a few dozen of news outlets (with over 10 million cumulative daily pageviews), to creating new editorial and publishing tools and processes, I created unique interfaces (for example my open source Blur plugin) and brought value to the organization.
I worked on many projects involving Google AMP and Facebook Instant Article formats as well, converting existing pages to lighting-fast experiences.
Technologies and methodologies used:
- Javascript, HTML, CSS, SVG, jQuery, Backbone.js, HTML5 Video
- Real time communications: WebSockets, Firebase.io
- Google AMP, Facebook Instant Articles
- User flow mapping, user interviews and surveys
- Prototyping tools (Codepen.io, Framer, Sketch)
- A/B Testing
Web Performance
During the three years that I worked at NBC News, the senior developer that I worked with taught me a lot about web page optimization. For every project that I delivered within NBCNews, we ran extensive performance tests to ensure that the web pages are fast on desktop and mobile, are junk-free and enjoyable by the end users. As an example of my deep involvement in performance optimization, I was able to trim down the number of HTTP requests for some of the highest-traffic pages by 100-150 requests (out of 250-300 total). This is the kind of work I’ve done for web performance:
- Page size and speed analysis
- Code optimization on backend and frontend
- Removal of legacy 3rd party integrations
- Lean widget and UI component development
Technologies used:
- Google Analytics
- WebpageTest.org
- BrowserStack and Selenium, ModernIE
- JS, image and video optimization
- Chrome Developer Tools
Innovation:
Besides coming up with creative ways to solve engineering and design problems at NBCNews, I pushed for new ideas and shared them with the management and people around me. NBCUniversal ran hackathons regularly to promote innovation inside the organization. I participated in two and rallied a team towards winning one of them. The winning idea was the one I had on a bus ride the morning of the hackathon. Here’s a picture of our winning team that rallied around the idea and delivered an amazing demo and pitch for it:
Winning a hackathon
The office and daily life:
Working at the office that we shared between different teams at NBCUniversal Seattle was something that I’ll never forget. It was a pleasure to walk into the office that has a 360 degree view of the Puget Sound and thanks to my coworkers that sat next to me for all those years, it was never boring. At the end of the post you can see a video that I took with a tiny drone flying over the office. Enjoy!
