Verizon's Fios Internet TV platform has been my primary focus for the recent 3 years, as a key member on our small internal design team. I was involved in every aspect of the design process: Translate existing Verizon branding into Fios and build a consistent visual system, wireframe the interaction relationships, design both static and motion UI user flows, and create engineering-ready UI guidelines.
Motion is one of my favorite ways to make design decisions. I always try to naturally direct user to the destination with enough hint but not too much attention. Here are some selected motion examples I did during the design process.
Bring existing Verizon branding into Fios UI and build a consistent visual system. Gain experience from Verizon's "Checkmark" design, and bring its diagonal shape composition and motion trend into our UI animation. Fios covers different profiles within a single device. We took 8 colors from the branding, and assigned them to different profiles for differentiation.
Wireframes and pixel-perfect static frames. To present a new feature, I usually take the existing UI design from the team, create the interactions accordingly in wireframe user flows, then make the full pixel-perfect static frames. Here's what I did for for the content merchandising features.
UI Motions. User flow animation is a quick way to help us test on different design solutions before making decisions. It gives us a big picture of a specific feature area before full prototype, and helps us to understand the problems. Lots of unnecessary designs/ steps could be eliminated and new design requirements could be created in this process. Also, having these AfterEffects motions ready gives us the ability to translate the motion curves for engineering team.
Voice Search - finding a specific content
Nonlinear Grid View - jumping out of the timeline and showing multiple content rails. This design gives us a quick way to switch between single content rail and multiple rails. By making this motion, we found out the full screen browsing experience is handy but a bit overwhelming and the focus would easily get lost for users. The single content rail is also not efficient enough for browsing experience. We chose a 2 rails design after this process, and added a underline (in profile color) for focused content. (result below)
Result: 2 content rails with underline in focus
How to visually browse future and history content within Channel List view
How to visually browse future and history content while staying in playback