Local News Integration

The main focus of the local integration project on the user-facing side was to create a place in the app where users could find their local news source. Originally, the navigation structure of the app was News, Shows, Live, and "More," which housed a duplicate set of news categories, along with various app settings and legal requirements. I used this opportunity to not only showcase CBS local news streams and articles, but also to begin implementing QoL updates for our users, including restructuring the app navigation (News, Shows, Live, and Local), creating a title bar to house settings, ensuring there were no category/article duplications, and laying the groundwork to easily update the app with new and needed features. This first phase was a huge technical effort, despite the smaller visual impact.

→

Once the local markets and feeds had successfully been merged into the national CBS News app, we focused on user feedback. For the most part, users were excited to get more hyper-local stories that national news didn't touch on: area-specific weather reports, traffic collisions, high school sports teams, and town events. However, there were two major insights that I felt were immediately actionable. First, users still had to tap twice for their local news. Second, if a user was traveling, their local market would automatically switch to the DMA they were traveling to. It became vital to ensure that users had more control over their news experience.

The sub-navigation of the CBS News app is powered by custom CBS feeds that essentially tell the app what categories of news stories to render on each screen. The app also has the ability to assign and render a user's DMA without needing a precise location, which then loads the user's closest geographic local news source. For example, a user within California would automatically have their DMA set to Los Angeles. Because of this functionality, several use cases were created.

The previous video player component used across the CBS News website and mobile apps had been designed and built using a much older framework, which impacted the user experience in several ways. I led an initiative to redesign the video component and update the backend in order to take advantage of common native features that the older framework prevented.

• Inability to autoplay
• Automated clips created from the live news stream had extremely low engagement and no QC
• Headline text was often delayed, so users tapping into the video would see news unrelated to the headline that inspired them to tap
• Awkward automated crop of the livestream

• Introduced autoplay and updated live badges
• Updated native features, like PiP 
• Updated video row component to introduce other live feeds from local news markets (order determined dynamically by DMA or default local market)
• Updated typography for lengthier headlines
• Retains 16:9 aspect ratio

Another integral part of the local integration experience was ensuring that local news editors would be able to control the breaking news notifications if the reporting for the breaking news originated with them. This meant that 14 additional teams were now able to create alerts, which meant more granular alert types needed to be created. We moved our notification center to Airship, so users could take advantage of custom news alerts (with categories like politics, science, world, etc), as well as opt-in to news alerts for their local market.

As the older apps were sunsetting, we implemented messaging pointing users to the CBS News national app. Since these users were obviously used to their current experience, I wanted to ensure their transition would include the ability to immediately set their local market and be able to view the content they were used to seeing. I created a new FTUE for users opening the app for the first time, which allowed them to personalize their experience through finding/setting their local news market, as well as managing the kinds of notifications they'd like to receive.

Of course, no project is completed without trial and error. I chose to go through this project in the most linear fashion possible in order to outline how I approached such a long project and broke it into actionable phases. But every designer has their own extremely chaotic and unhinged page in Figma or Sketch that isn't meant to see the light of day, and sometimes it's fun to pull back the curtain.