News Media

Cross-platform UI/UX Design for News Media.

Channel C HK is a newly established news media company with over 500k YouTube subscribers. 

In June 2023, the mobile app Channel C HK achieved the top rank in the App Store’s chart for free apps.  

App Store’s chart for free apps in June 2023

The following will mainly focus on introducing the UX/UI design of the newly developed mobile app. As for the revamp of the website, it will be briefly introduced later on. 

The Pain Points and The Solution

Channel C HK faced the following pain points

A lot of channel subscribers said ”You can use social media platforms to post news and generate revenue. Why do you need to develop a app with large investment?” 

In face, before the app released, they were only posting news on social media and website. I had discussed with clients and concluded that they were facing the following pain points: 

Regarding posting on social media:  

Lack of control: Limited control over how their content is distributed and presented, as algorithmic changes or policy updates by these platforms can significantly impact visibility and reach. 

Revenue challenges: Although the social media platform started to enable followers to support the channel with paid subscription option apart from advertising revenue, the changes in the policies, terms of service, and algorithms an significantly impact the visibility, reach, and monetization potential. 

They have a self-owened website, but it: 

Limited Mobile User Experience: Navigating a website on a mobile browser can be cumbersome, with difficult navigation by opening a web browser, enter the website URL, and slower loading times. This process can be less convenient and time-consuming and resulted in low access rate of website. 

Inconsistent Brand Presence: Hence, due to the limitation of a website, it is resulted in a less consistent and visible brand presence in users’ daily lives. 

In order to expand the business and looking for more opportunies, so they need a dedicated platform and they found that developing a mobile application would improve the situtation. 

Goal

In June 2023, the mobile app Channel C HK achieved the top rank in the App Store’s chart for free apps.  

The following will mainly focus on introducing the UX/UI design of the newly developed mobile app. As for the revamp of the website, it will be briefly introduced later on. 

Convenient access and navigation

Enhance brand loyalty

Monetization opportunities

Requirements

To achieve these goals, I have discussed the following features with the client that the app should be included in in the first stage: 

Easy navigation with categorisation: Users should be able to navigate through the app seamlessly and find the desired news content to find and consume relevant information with intuitive navigation. 

Engaging multimedia: The app should offer a visually appealing and interactive experience by incorporating images, videos, and other multimedia elements. 

Push notifications: Users should receive timely notifications for breaking news and updates based on their selected categories. 

Social sharing: Users should be able to comments and share. 

Call to action for Subscription.

System Overview

User Flow

The user flows were then created to demonstrate the important functions featuring the requirements mentioned before on this stage. 

Wireframe

Style Guide

Illustrations

Animations

Title Screen

Loading

Article “Like”

Storage Box Idle State

Storage box “Saved” Action

Mobile App UI

1. News: Homepage News Categories and Video 

An intuitive interface with news categories displayed prominently, allowing users to select their desired topics easily with swipe on the screen. Users also able to comment, like and share the news articles within the app.

Homepage Tab > News Article

A visually engaging layout, featuring thumbnail previews of the latest video news content, and allowing users to play videos directly within the app. 

Video Tab and the UI of Video in different categories

2. Weather and Notification

Regarding the analysis of readers’ preferences of the client, weather is hot topic. Therefore, providing weather information and the related news by placing a weather icon in an intuitive area — the corner of navigation bar for easy access, would definitely enhance the user experience.

Homepage > Weather Information and Notification

3. Report News Channels 

In order to catch the latest and exclusive news sources, an easily approachable reporting flow is provided when they encounter any first hand news source.  

Before and after tapping on Report tab

4. Subscribers Benefits 

Subscribers to Channel C HK would enjoy exclusive benefits within the app and website, such as exclusive discount offers provided from business partners and subscribers only activities. 

Member Tab > Member Activities, Member benefits, Record of Activities
Member discount information and the UI difference for partner store to identify paid and unpaid member

Personalised storage box for keeping favourite benefits and activities rewards. 

Storage Box > Favourite tab and Reward Notifications

5. My Account 

Due to belief of client, users are fully accessible to news articles and video without login. In order to attract the member registration of user, the exclusive benefit offered to members are putting in the login tab to attract signing up.

Before Login, Login Page and Registration Page

After logging in, the My Account page would enable users to view their profile settings, manage subscription, and access features like saved articles and videos. 

My Account Tab > Account Information, Favourited Articles
My Subscription > Payment Record : Subscribed, Cancelled, Not yet Subscribe
My Account Tab > Payment Record : Subscribed, Cancelled, Not yet Subscribe

6. My Account > Subscription

Not only is the price different, but the benefits offered for monthly and annual payments also vary. Therefore, the list of benefits will change when choosing to pay monthly or annually.

Subscription Page – Options: Standard(Pay Annually), Standard(Pay Monthly); Light(Pay Annually), Light(Pay Monthly)
Subscription Page: FAQ, Proceed to Payment, Payment Result

Web UI : Before and After

[Homepage]

As a news media platform, the homepage should appear informative yet tidy. Therefore, I have made the following adjustments: 

Navigation Bar: Changed to a light grey color, matching the background, to create a brighter aesthetic. 

Carousel Slideshow: Narrowed and aligned it within the page border grid to achieve a cleaner look. 

Special Coverage: Since this category is highly popular among our audience and is usually presented through videos, I applied a dark grey background to highlight and separate it from other sections, while also ensuring familiarity for users. 

Article Cards: Displayed the number of comments and likes without requiring users to click into each article. This allows users to satisfy their curiosity about others’ comments directly from the card itself. 

Tags: Modified the UI to make them resemble actual tags, enhancing their visual appearance. 

Homepage

News Article and Comments

Regarding the content of news articles, the grid has been arranged to make it appear cleaner and more informative. 

Monetization: Upon clicking into a news article, a large advertisement will be displayed regardless of whether the user is on desktop or mobile. 

News content (Image and Text): The images have been enlarged and aligned with the text, placing them on the left-hand side to create a cleaner and more attractive layout. This adjustment also frees up space on the right-hand side. 

Latest News Articles: To encourage users to read more and stay on the website, additional content is now displayed in a more intuitive manner. The latest news section has been moved up next to the news content. 

Related News Articles: The inclusion of this section aims to increase reader engagement and encourage more clicks. It is now presented in the form of cards instead of rows, as this takes up less space and is more visually appealing for desktop users to access more content. 

Tags: The UI has been enhanced to provide a more visually appealing and clickable appearance. 

Extra Information: Since this information is not part of the news content, a darker background has been applied to make it stand out from the rest of the content. 

Comments: The comment section has been revamped to match the design of the mobile app and create a cleaner look. 

Homepage > News Article

Web UI : Desktop/ Mobile Responsive

Homepage and News Articles

Apart from the Homepage and News Articles, the UI of other pages has also been revamped to improve the user experience and align with the brand identity.

Login, Registration and Menu
My Account, Favourited News, Exclusive Benefits for Paid Subscriber
Member Page: Activities, Benefits, Record of Activities, Favourite tab and Reward Notifications
Mobile App Introduction Landing Page, Error 404, Subscription Page

Reflection

Overall, the website and mobile application successfully addressed the pain points of Channel C HK and provided an engaging platform for their audience. However, continuous improvement is essential to ensure the platform remains up-to-date and meets evolving user expectations.  

Future enhancements might include: 

Enhanced personalisation: Offering more advanced customisation options to tailor the news feed precisely to individual preferences. 

Social interaction: Integrating social features to enable users to engage with other community members, such as notifications from comment on articles, and participate in discussions. 

By incorporating these improvements, the website and mobile application for Channel C HK can further enhance the user experience and maintain their position as a leading online news media platform.