Disney Streaming
Disney Streaming
Creative Engineer – Disney+ PrototypeMy manager pulled me into the Disney+ prototype early on, before it was called Disney+. In those days it was called Project Dominguez, named after the Dominguez Tree, the oldest living thing in Disneyland. We were soon joined by a motion designer and future creative director. Our mission was to built out the Disney+ UI in an interactive form, so the design team could experience their work "in motion", so executives had something to play with and show off, and eventually so that user testing could be accomplished.
We had static page designs to start from, so we quickly built out the basic structure of the UI: Horizontally scrolling rows of tiles, five static brand tiles, and a looping auto-scrolling carousel at the top. Brian, our motion designer, and I worked together to develop the transitions and animations that would bring the interface to life. The prototype became a blueprint for all client teams to follow when implementing animation and transitions.
Two interesting engineering challenges stand out to me from this time. First is the infinitely scrolling carousel at the top of the screen. Building a control that scrolls left and right is easy, however looping it proved very challenging. Many different methods existed for manipulating the visual tree or the underlying data structures to move elements around within the list, but each of them caused different and unpredictable glitches, especially when scrolling quickly. This prototype was being used be executives to demonstrate to investors which meant any build we sent out had to be bullet-proof. Eventually I figured out a model that combined under the hood data structure manipulation with advanced XAML visual tree manipulation which resulted in a near-seamless experience.
The other challenge involved the behavior of content tiles at the edge of the screen. Disney+ content rows show five tiles at any one time, with the sixth tile half-visible at the edge of the screen. Once scrolled, a half-tile is visible at both ends of the screen. The designs called for these edge tiles to be semi-faded. We tried various overlays but there was always a visible line where the tile could be seen going under the overlay.
I developed a solution using a decoupled event/receiver system that could be implemented by the list view and by the tile controls. This system allowed each tile control to know it's relative position within the list and when it's position was about to change. The tile could then manage its own visual state and run animations locally when appropriate. Because the event/receiver system did not depend on tight coupling of lists and their element views the solution scaled to any list view or tile set anywhere in the app.
The culmination of the prototype project was the demonstration given by Disney CEO Bog Iger announcing Disney+ to the world at Disney Investor Day, April 11, 2019. Everything shown that day ran on our prototype.
MLB Advanced Media
Creative Engineer – NHL.TVNHL.TV was my first real assignment when I arrived at MLB Advanced Media, what would eventually become Disney Streaming. This was on Xbox One which used the UWP framework. I was already familiar with UWP, XAML, and C# from my time at Microsoft so I was feeling confident.
My first task on NHL.TV was updating their scoreboard UI, which included a significant animation component. I had never done XAML animation before. By the time I finished rebuilding the scoreboard I had learned a little about hockey and a lot about XAML animation.
My next task for NHL.TV was a home page redesign and rebuild. This was the most advanced design I had ever implemented. I learned about page loading, XAML performance analisys, lazy loading, and XAML optimization.