Fios OTT/ IPTV platform was my primary focus during the Verizon time. It gives users an efficient experience to browse/ watch/ purchase video content from different sources (Live, VOD, internal access to content partners like Hulu or Youtube...), across multiple devices. As a senior designer in our internal product team, my main responsibilities include: leverage the Verizon branding to build visual elements for UI, information architecture, motion / interaction prototypes for product leaderships and engineers.
Outcome:
- My lightweight user flows, videos and prototypes became important design processes, because they are fast and accurate for product iterations. They saved engineering resources and pushed decision making.
- Successful trial versions were served to several thousand Verizon households across 2017-18. In December 2018, Verizon introduced Fios TV One to its 4.6 million users.
Leverage Verizon Branding for Visual Verizon's existing brand system gives us a starting point for UI visual design and motion. Since the primary focus would be on the colorful content all over the place (which is pretty overwhelming already), the 8 branding colors could be great to work with the black & white UI as individual profile colors. The profile color is consistent across the platform and serves different text and icons. It guides people's attention without being too aggressive.The "Checkmark"'s diagonal shape composition and motion trend was also a good inspiration for the UI.
Content Placeholder -Movie
Content Placeholder - Movie
Content Placeholder - TV
TV Placeholder - Locked
Button Ani
Button Ani
Icon Transition
Icon Transition
Voice Search
Button Ani - Pop-up Modal
Top Level Menu
Confirm - Pop-up Modal
Content Merchandising & Integration Features - OTT TV platform gives users an efficient experience to browse/ watch/ purchase video content from different sources (Live, VOD, internal access to content partners like Hulu or Youtube...). I was in charge of developing some of these features from concept to wireframes and prototypes. These user journey examples were highly in demand and got customized then pitched to potential video content providers like TV channels, Hulu and NBA...
On Sale / Rental content
Subscription content
Merchandising flow - Visual
Alphabetical Channel List
Channel Subscription
Channel Guide
Programe Info
UI Motions Archives - I use animated user journeys to help on decision making. It’s a good method exposing design problems because of its efficiency. Some approved pixel-perfect animations could also be easily transferred into code for engineering by tools like Lottie. Here's an example of Voice Recognition - finding a specific content.
Example of decision making - Testing a design that gives user a quick way to switch between timeline based single content rail and nonlinear grid view. By making this motion, we found out the full screen browsing experience is strong on pushing content, but a bit overwhelming. Also the focus would easily get lost. The single content rail is not efficient enough for browsing experience because of its space limitation. We chose a 2 rails design after this process, and added a underline (in profile color) for focused content.
Result: Two content rails with underline in focus
Feature Exploration Goal: An efficient way to browse future and history content in the Channel List view, without taking too much space or going to next page.
Solution: Adding a switch for the focused channel that opens and closes a linear content rail.
Feature Exploration Goal: An efficient way to browse future and history content without interrupting the current playback.
Solution: Adding a glimpse of content rail under the playback UI, using the downward button to wake up the content.