UX/UI DESIGN FILM & GRAPHICS PHILOSOPHY
ABOUT RESUME CONTACT

:P

UX/UI DESIGN FILM & GRAPHICS PHILOSOPHY
ABOUT RESUME CONTACT

:P

Website designed and developed by Amy Shah and Amin Halimah

Icon from Feather icons

Mobile News App Redesign

Cox Media Group (CMG) owns a vast suite of websites and apps that provide breaking news and live coverage for each of their news stations' areas. Specifically, as a UX designer, I helped design experiences for 15 TV stations and 50 radio stations around the US. The products we design are branded for each station (colors, logos), while being consistent with the broader CMG brand's design system.

CMG's products for each station include websites, mobile apps, newsletters, and CTV apps. During my time, I primarily focused on mobile apps, websites, and newsletters. My goal for our products was to improve upon them by enhancing their UI, experience/function, and the way they tell our stories. Storytelling through products, etc. is incredibly underestimated and under-used. Beyond the interface itself, storytelling can create a wonderful experience for users.

This case study will focus on the redesign of mobile apps for CMG's TV stations. It will also only show designs for one of the stations, WSB (Atlanta) - though designs are the same for all stations, except for color. Not all designs were launched on the app before I left CMG, some are concepts that were waiting to be placed on our roadmap, which, due to lack of development resources, was limited.

PROJECT SCOPE

My Role

Wireframing & Prototyping
Market Research
Ideation
User Research



Tools & Skills

Figma - Wireframing & Prototyping
Lyssna - Usability Testing
SiteImprove, Lighthouse - Accessibility
Jira - Organization
Tableau - Data Research

THE ASK

The product team always looks for improvements to the various apps, websites, and newsletters that we own.

When I first joined, I was told to express any concerns I see with our products, and was tasked with the challenge of analyzing our mobile apps, utilizing research to understand usability best practices with news apps & mobile-first design, and ideating features that improve user experience and increase user loyalty to the apps.

OUR PROCESS

ANALYZE
USERS & GOALS

To understand our users' goals, we must know who is using our site, and why. Most users for each respective stations' website are from the metro area of the city that station serves, so most users are interested in seeing the news in their local area.

Along with location, CMG's audience profile is as follows:


  • 51% male vs 49% female audience
  • Most users skew older, between 35 and 64
User goals:
  • Read, watch, and learn about current events on a local and national scale
  • Easily access various news stories, clips, and live streams
  • Stay up to date and fully informed on current events

ANALYZE
MOBILE APPS INITIAL STATE

Mobile apps are similarly designed across our TV news stations, with differences being content and branding (logos/color).

State of the apps when I was tasked with the redesign challenge (limited images available) are below.


My concerns:
  • Large imagery and banners pushing content down
  • Intrusive ads
  • UI enhancements needed
  • Video style needs improvement (CMG aims to be video-first)
  • Lists of articles go on indefinitely on home page

ANALYZE
BRAND & STYLE GUIDE

Part of my role as a product designer was to maintain and innovate upon our design system, called Axiom. It includes libraries of station-specific branding (1) as well as broader CMG style, including colors, typography, iconography, etc (2). I kept this design system in mind as I started working on the redesign.

MARKET RESEARCH

I analyzed various media-based apps to learn more about the current market, what audiences are used to using, and what other brands consider effective ways of consuming media.

I looked into news brands like Washington Post, as well as media apps like Youtube. I also did an in-depth analysis on the NBA app, which was newly updated at the time.
The UI of the NBA app felt very modern and appealing. It was simple, but full of content displayed in different ways (lists, vertical videos, stories, large feature images) to entice users to engage further. It didn't feel repetitive, it felt interesting. This app is video-first and mobile-first, with its use of stories and vertical videos. The "More" buttons keep the main pages clean and add additional content only when you want to see it. The home page list in the first screenshot is a card-like style, with different sections of content broken up and a gray background in between. It feels simpler and more easily digestible.

Keeping this in mind, I started designing the home page using inspiration from the layouts used in the NBA app. I also worked on improving the video page and menu. I created initial designs of various features and spent more time and resources on features that my team thought would be best to implement sooner, depending on time constraints, outside work, and developmental restraints.

IDEATION & INTIAL DESIGN CONCEPTS
FEATURED BREAKING NEWS

With one of my concerns being large imagery and banners pushing content below the fold, I designed the Featured Breaking News to combine the red breaking news alert banners and the featured story at the top of the home page (see initial state here).

IDEATION & INTIAL DESIGN CONCEPTS
ARTICLE LISTS

Seeing how lists were designed in the NBA app, I was inspired to bring card-style categories into our apps. Currently, the home page's lists of articles are never-ending and never-breaking. Adding cards can help break up the visuals and make the categories stand out more.

IDEATION & INTIAL DESIGN CONCEPTS
VIDEO CONTENT

With CMG's aim to be video-first, I brainstormed ways to improve our video-viewing experience. From market research, I saw how widely used vertical video was, and wanted to implement that into my designs.

I also wanted to sort and clean up the video page, and help bring more traffic to it.

IDEATION & INTIAL DESIGN CONCEPTS
VIDEO CONTENT

I had also mocked up menus for our websites, and wanted to implement something similar to the apps. Two menu styles that could help users better find the video content they're looking for.

The first style is a horizontally scrolling tab bar with the menu items leading to each respective section. The second style uses few menu buttons and a drawer that opens up to reveal more sections, which can be more efficient if we have too many sections to scroll through. I was not able to test this feature before I left.

IDEATION & INTIAL DESIGN CONCEPTS
NAVIGATION

I played around with different styles and icons for the bottom navigation menu, and also designed a "More" menu that could make navigation more efficient for users, and easier for each station to implement additional pages. The More menu was part of a request on our 2023 roadmap.

USABILITY TESTING
TESTS & RESULTS

I conducted various tests on the different features above to understand what users find intuitive and inviting. The features I tested on and continued designing were determined by what was able to be built out with our resources and roadmaps.
The Featured Breaking News was the first redesigned feature on our team's roadmap for 2022. We wanted to make sure the news carousel was easy to use and scroll through.
  • Out of 15 participants, 11 preferred radio buttons over numbers to help signify their spot in the carousel (73%)
In 2023, we began implementing the More Menu feature as part of our roadmap; our stations wanted to promote more app pages to our users. We wanted to make sure the menu icon and phrasing was intuitive for users.
  • Most participants believed that the "More" tab bar would open a menu with additional page options

DESIGN DOCUMENTATION

I documented the Featured Breaking News, More Menu, and the Article Lists for the development team.
The Featured Breaking News documentation was outlined as shown below, with detailed commentary on placement, iconography, and layout.
For the More Menu documentation, iconography was already in use for each menu item, so main points to note involved typography, padding/margins, and color for dark & light mode.
I also documented the article lists and featured story card-style designs. These were not tested as the layout was logically very similar.

FINAL THOUGHTS

This was a large project that was kept in the back of our minds during the time I was at CMG. It encompassed each part of the news apps, and there were many other features besides these I had started working on, but didn't get too far into since they were lower in priority.

What I would continue to improve upon:
  • Adding categories/filters for story types so users can more easily sort through stories
  • Adding commenting to videos & articles (I did design a successful article commenting feature for CMG's websites here)
  • Push for better ad experiences. We started implementing sponsorships for some of our features, which are not as invasive
What I learned from this experience:
  • Continuously working within stakeholder goals
  • Working within development resources & constraints
  • Working with various content, video, and legal teams
  • Working with vast design libraries and a robust design system for multiple brands