Newsnation
Problem | Opportunity
Nextstar needed a multi media website to deliver news of different format, including live broadcast, video, audio, etc. for their new brand NewsNation
Solution
Responsive CMS website
STATUS
MY ROLE
Responsive website design
Launched in September 2020
Research
-
News "on the go"
-
Ease of content discovery and navigation
-
Digestable content
-
Timeliness
-
Flexible design for frequent updates
-
Multi-format news
-
Weather widget
-
Seamless experience across all devices
-
Content promotion
NewsNation
UX
User
-
Flexible IA
-
Dynamic mega navigation
-
Content cross- pollination
-
Responsive design
-
Accessibility standards adherence
User
User
Information Architecture
Conceptual content map
IA was designed to accommodate similar content aggregation on category pages that would direct user to individual article pages
.png)
Content cross-pollination
Regardless of where users land on NewsNation site, they need to be able to discover other similar articles or explore completely different categories. System of patterns was designed to facilitate content cross-pollination
design system
Design system was created as a first step in designing patterns for content cross-pollination. It served as building blocks that later were be repurposed for different patterns
Atoms
Media format icon
Category
Date
Headline
Teaser
Thumbnail
Molecules
Eyebrow
Thumbnail with an icon
Organisms
Listing 1
Listing 2
Listing 3
Listing 4
Search results
listing
Featured story
Featured story 2
Cross-pollination pattern
Navigation
NewsNation needs to cover very broad range of news and update them frequently.
-
The main menu is designed to include maximum of 10 news categories with second level pages. (e.g. Regional > Midwest)
-
The main 7 categories are: National, World, Regional, Weather, Politics, Sports, Entertainment.
-
The remaining 3 categories are dynamic for NewsNation to update when hot topics needed to be prominently surfaced in the navigation in its won category (e.g. Coronavirus, BLM, Election).
Homepage
-
For users who are interested in the most recent news, there is newsfeed on the left side rail . Each news listing includes date stamp, news category and headline for users to quickly scan them.
-
On the right hand side - featured news section for NewsNation to highlight, promote and prioritize headlines they deem necessary. Each news listing includes date stamp, news category, headline, image and video format indicator.
-
Tabular widget is designed to highlight various groups of news simultaneously. NewsNation can update categories as needed.
Category sections
-
Large news categories that receive a lot of coverage and users' attention are prominently displayed in dedicated category section on the homepage. Each section includes link to the category page for user who want to read more
-
Each listing includes news category, image, headline and preview for fast scanning
-
Load More CTA allows users to stay on the homepage and browse all of the headlines
Category page
-
Each category page includes a featured story and sections for different topics within individual category.
-
Related section allows user to keep reading similar news
article page
-
Article page supports image and video embeds for ultimate reading experience
-
Related section promotes similar news for users who want to learn more on a given topic
-
Related section allows users to discover NewsNation website especially if users landed on the page from third party search engine
-
Date stamp and by-line inform user about recency of the article and the author
-
Social media shares allows user share the article with others
Audio page
Live broadcast page
-
Show cadence informs users that the broadcast is a scheduled program
-
"Live TV" tag, current date and progress bar clarifies to users that it is a timed video
-
Text teaser informs users about the content of the program
-
Social media shares facilitate content promotion
Weather page
-
Current weather page is identified with a help of the geo location to provide users with the most accurate forecast
-
"Change location" link allows user to look up weather in different parts of the country
-
Weather widget displays temperature and precipitation hourly and weekly
-
Weather headlines section informs users about upcoming weather changes and news
Search
-
Search provides users with ability to find the exact news they look for
-
Each search results listing includes headline, news category, date stamp and preview to allow users scan headlines for ultimate searching experience
Notifications
-
Notifications are designed facilitate content promotion.
-
Notifications remain sticky at the top of the screen until users disable them or notifications become outdated
-
Color code is used for different types of notifications (e.g. yellow - alert, red - breaking news)
-
Live broadcast show is promoted with help of toast notification on the right bottom of the screen to signal urgency.
