UI Lead and UX Strategy for News App Refresh
Background
With the transition to responsive design on the news sites, the mobile apps required attention to refresh and upgrade the aesthetic to better compete with other local news apps. The redesign rate has hastened, but the current structure required a new partner to be able to update the UI and UX more efficiently with upcoming needs.
My Role
This project took many months and various groups internally and externally to complete. My role was as the UI Lead to work closely with the developers of our vendors and our internal UX expert.
Research and Interviews
We organized research teams formed from sales, editorial, general managers, marketers, and VPs to get a wide perspective of what markets need most. Our corporate digital team narrowed down our research into 3 common needs for the app refresh.
- Overall visual update to keep the apps UI from looking dated, and the ability to update it easily each year. A particular focus on the UX of reading a story.
- Prioritize video features and facilitate more video consumption.
- Increase ad inventory and allow for sticky ads and rich media ads.
- Keep the bottom navigation that is familiar to users.
Design Refresh Goals
Based on the input from various position and markets within the properties, we set our data-informed goals.
- New, lighter design that improves the visual design while keeping the app light and agile.
- Increase ad inventory on each page and story and allow for third party ad slots.
- Double featured stories and add related content for dead-end prevention.
User Flow and App Map
Target Users
The news app users are our most loyal base of visitors. They account for over 35% of the total page views even though they only make up less than 25% of our unique visitors. They are faithful to the local brands and trust our markets as their source of news and weather.
Each market has their own target users, but the most standard characteristic is always within the DMA (Designated Market Area) of where the broadcasts can be received over the air. The news and weather has a hyper-local priority.
Wireframes and Concepts
UI initial wireframes were created to steer the overall refresh. The app allows users to easily navigate latest headlines and consume multiple stories quickly.
Home Page Wireframes
The home page and subindices require a new flexibility to match the functionality and customization of the new responsive sites.
Home and Pages Wireframes
[vc_gallery type=”image_grid” images=”14429,14436,14437,14438,14427″ img_size=”200×421″ onclick=”link_image”]Weather Pages
Weather is one of the main sources of traffic and requires special attention to feature prominently and easily display all important information. Users want customization and flexibility to fit their daily needs.
Weather and Radar Pages Wireframes
[vc_gallery type=”image_grid” images=”14435,14455,14454,14432,14431″ img_size=”200×421″ onclick=”link_image”]UI Design Comps
Home Page Comps
The goal was to allow for multiple layouts and features, but our need to prioritize weather on the home page became more important to keep with the initial use of the app. This limited our available space for multiple layouts.
The app sends out alerts for users that have signed up for breaking news, and this required a unique way to highlight the special news coverage for these situations.
Home and Pages UI Comps
[vc_gallery type=”image_grid” images=”14450,14458,14796,14442″ img_size=”medium” onclick=”link_image”]Weather Pages Comps
The weather pages required a variable day forecast depending on the station’s marketing and the ability to feature the daily video forecast prominently.
Category and Pages Navigation
The primary navigation is locked at the bottom of the screen with a customizable top 4 buttons for navigation and one for a full page expansion for app navigation.
The most experimental design of this refresh was our approach towards the navigation of categories and subindices. This metro-inspired design allows for scrolling both horizontal for larger categories and horizontal for more nuanced pages and niche interests.
Weather, Radar, and Weather Alert Page UI Comps
[vc_gallery type=”image_grid” images=”14459,14460,14453,14445″ img_size=”medium” onclick=”link_image”]Bottom Anchored Menu
Metro Full Page Navigation
Story Pages
A large percentage of readers access the story pages from referral sites like social and search bypassing home and landing pages. Story pages are the most important UX to facilitate easy of navigation from one story to the next.
Story Functionality Wireframes
[vc_gallery type=”image_grid” images=”14778,14779,14780,14781,14782″ img_size=”medium” onclick=”link_image” css=”.vc_custom_5924b0604a5ac{margin-bottom: 15px !important;padding-right: 125px !important;padding-left: 125px !important;}”]Users can swipe stories from left to right to navigate throughout a category that is listed above the story. Related stories based off tags and topics appear at the end of the story to serve as dead-end prevention on all ends.
Breaking News
Breaking news is important to the editorial teams and to the users. Special attention was given to the UI to ensure that it is the highlighted content on the home page and while users are reading stories.
The first two show breaking news when there is no story tied to the alert. The last two comps show breaking news with a story. The red is a clear indicator to take notice of something important.
Story Functionality Wireframes
[vc_gallery type=”image_grid” images=”14798,14800,14801,14799″ img_size=”200×340″ onclick=”link_image” css=”.vc_custom_5924b0604a665{margin-bottom: 15px !important;padding-right: 125px !important;padding-left: 125px !important;}”]Updates to the App
Since the initial launch of this app, we transitioned into 6-week cycles of updates to continuously improve the UX and performance. The major updates always start with feedback from users or the editorial teams. Sometimes they come from places and situations very different from what we had considered. These are some of the more useful updates.
Update Indicator
The home page updates each time the user goes back to the home or landing page because news comes in so quickly, but there was no indication that it was doing so, and instead would suddenly jump with new content. This would throw off users scrolling through the feed, but the new indicator helped to ensure a fast and clear indication of what the app is doing.
Weather Alerts
In some of our larger stations in the Midwest, their alerts were not able to show both school closings and weather warnings at the same time, which is a common occurrence for them for many months of the year. We found a solution that push down the hero images and described the alerts.
Video Weather Forecast
Promoting videos is one of our main tenants for the design refresh, but the original weather design made it so small that it was performing poorly in our KPI’s. I redesigned the layout to allow for a full-width video that is inviting and easy to access on load of the weather page. We saw an increase in user engagement with the daily forecast video go up.
Review
When the app refresh was launched, there was an increase in the common KPI’s. The biggest success was the easier integration between the app and the CMS that sped up the process for breaking news.
There were two main issues that caused problems for users. The first was a presitital ad that appears on first load of the app. This is an intrusive experience that takes over the full screen and auto-plays a video. Users quickly down rated the app, and this hurt the experience for everyone. Unfortunately, this was built into some sales contracts and took over a year to reverse and convert to an interstitial ad that appears only after the user has read a few stories.All users would prefer an experience without ads, but this is a key tenant of the process and essential to generating revenue for the company. The interstitial was the best negotiation for all sides.
All users would prefer an experience without ads, but this is a key tenant of the process and essential to generating revenue for the company. The interstitial was the best negotiation for all sides.
The second large issue came from the app size. In order to work as an aggregate of so many sources of data, the app was heavier than the average app. This is the only way the developers could execute the needs of the markets, but it results in a slow load of the app. This also feeds a negative experience and ratings for the app, and unfortunately a fix cannot come without more investment into improving the back end.
Even after seeing many problematic ratings for the app in the beginning, we saw an increase in downloads and usage across the various markets. This is in part to a large marketing push on the local level, but there is still plenty of room for improvement.
All works in portfolio are not part of the Creative Commons licence.[/vc_message]