March Madness LiveI worked with Turner Sports over the course of 3 NCAA seasons while at Possible Mobile. For the 2018 tournament, I led the design of their streaming TV apps. The goals were to make the apps more interactive on live game days and to engage the audience on non-game days. The apps touch millions of users each year and utilize the full power of the Apple TV, Roku, and Fire TV platforms. Design tools include Omnigraffle, Sketch, InVision, After Effects, and Zeplin.
About 9 months before the 2018 tournament, we kicked off the project by leading a discovery meeting with Turner Sports. We identified project goals, milestones, user pain points from previous seasons, and brainstormed ideas for new major features to add this season. After kickoff I dove deep into research to uncover the key differences between the 3 TV platforms (such as different remote controls) and how they impact the navigation and user interactions. I also identified the latest platform features and compiled user feedback from App Stores.
From there I created a series of user flows in Omnigraffle (including the one shown above) to outline the basic interactivity and connections between the major sections of the app.
Next I created wireframes in Sketch to outline the layouts and content of each major page, then presented them to Turner. Using the platform research and wireframes to identify needs, I created a design system including font hierarchy, color swatches, and components using Sketch symbols (for reusable elements such as scorecards, navigation, and video tiles). Then I moved onto the UI stage (see below).
When creating the high fidelity mockups, I started with designs for the latest version of tvOS.
Next I adapted the Apple TV designs to fit Roku's system UI/UX, remote controls, navigation, and platform constraints.
I also modified the designs to fit Fire TV's native navigation architecture, UI/UX, and video controls. This opened the user base to a much broader audience.
From there, I created motion design concepts to highlight the features of GameCenter, the live game companion which includes stats, a lead tracker graph, and highlights.
Lastly, I exported the comps and assets into Zeplin to hand off to our developers. Throughout the dev process I supported them with UI/UX needs.
