Catch Up To Live

Platforms: TV

Operating systems: tvOS/Android

The primary objective of the Catch Up To Live initiative was to empower TV users to catch up to a live game via highlights. In my capacity, I worked in collaboration with Product, Development, and Editorial teams in order to ensure unifying visions and goals. My responsibilities also encompassed the creation of high fidelity mockups and prototypes for iOS and Android, coupled with the provision of comprehensive specifications to guide the engineering teams during implementation.

Overview


The Challenge


  • There was a growing need to enhance the mobile user experience and provide users with more control over the information they received. Recognizing this, the goal to develop a system that would enable users to customize their push notifications based on specific events of interest. By doing so, it aimed to empower mobile users the ability to stay informed and engaged with the content that mattered most to them.

The Goal


  • The primary objective of the Catch Up To Live project was to empower mobile users to selectively receive push notifications tailored to specific events.

The Solution


  • Allow users to easily navigate and personalize their notification preferences through an update interface. This application provides a range of options to select specific events or topics of interest, ensuring that users received relevant and tailored push notifications.

User Flows


This diagram of information architecture helped distinguish the organization of data flows and controls, logical design, and physical implementation.

The hierarchy planning of the site serves as way of dictating the end user’s success. By determining the user behaviors and achieving the ultimate goal of user retention and user conversion, the team was able to decide the common behaviors of these users.

The process of finding a product, selecting a product, entering it in the cart, and proceeding to shipping/payment is conceptualized through this graph.

User Flows

  • No ESPN+ auth
    ESPN+ stream
    Click on tile → ESPN+ paywall → if auth, toast

  • No TVE auth
    TVE stream
    Click on tile → MVPD picker → if auth, toast

  • No ESPN+ or TVE auth
    Simulcast on both TVE and ESPN+
    Click on tile → stream picker → if pick ESPN+ stream, ESPN+ paywall → if auth, toast for ESPN+ stream
    Click on tile → stream picker → if pick TVE stream, MVPD picker → if auth, toast for TVE stream

  • No ESPN+ auth, TVE auth
    Simulcast on both TVE and ESPN+ OR just TVE stream
    Click on tile → toast for TVE stream

Wireframes


For the Catch Up To Live project, developing design systems for both iOS and Android platforms was essential for creating a cohesive and user-friendly experience across different devices. Design systems provide a set of standardized guidelines, patterns, and components that ensure consistency in visual aesthetics, interaction patterns, and user flows. By following platform-specific design principles and guidelines, designers can tailor the user interface and experience to the unique characteristics of iOS and Android devices, optimizing usability and familiarity for users. This approach streamlines development efforts, promotes efficient code sharing, and facilitates seamless integration with platform-specific features, resulting in a polished and native feel for Watch Alerts on both iOS and Android platforms.

High Fidelity Mockups


These high fidelity mocks allowed stakeholders to visualize the design and user interface in detail, facilitating better feedback and collaboration. High fidelity mockups also aided in identifying potential design flaws and usability issues before the development phase. Additionally, they serve as a reference point for developers, ensuring the accurate implementation of the intended design elements and interactions.

Previous
Previous

ESPN • Product Designer • Watch Alerts

Next
Next

Realogy • UI/UX Designer