Channel News Asia Redesign

MOBILE APP & WEBSITE

CNA is an English-language Asian news network established by Mediacorp. A transmedia company positioned to “Understand Asia”, it reports on global developments with Asian perspectives. CNA brings its audience the latest news and diverse content such as business, lifestyle, human stories, current affairs, and documentary programming. VMLY&R was engaged to help with their digital transformation and redesign of digital touch points.

Agency
VMLY&R

Project Launched
2021

Live Site
www.thegreatsingaporereplay.sg

Role
Art Direction, UI/UX Design, QA Testing

Challenge statement

The ask from the client was to revamp and redesign the Channel News Asia website and mobile applications, to create a more delightful content consumption experience for readers while improving editorial efficiencies and workflow.

Research & Analysis

A 2-day virtual workshop was conducted with the CNA stakeholders to figure out what they thought were amazing content consumption experiences and understand the various news reader behaviour and trends.

Identifying the types of news consumers

Competitors research

Key takeaways

- Daily briefings and curation of articles to user preferences
- Engagement by using notifications and activities
- Visual and multiplatform storytelling
- Quick catch up tools, especially during time-sensitive events or periods
- Real-time life updates
- Expanding consumption methods

User persona

Started off with 4 personas to embark on the journey of discovering the users. As we converge into their traits, needs and wants, the team observed some common patterns which led us to an extreme persona, who possess all of these traits and desires.

Design process

We looked at the rationale behind CNA’s logo and explored 3 directions to propose to the clients.  Symbol of Change / An Emerging Asia / Striking & Bold / Auspicious & Success

Art Direction 1

Auspiciously Bold

Bold / Striking / Dynamic

Users need a news platform that is modern and bold. Using strong color hues, the website can take on an approach that portrays itself as modern yet dynamic. The composition is a well balanced mix of blocks of red and striking graphical elements to create contrast and capture readers attention.

Art Direction 2

Contemporary New

Approachable / Delicate / Contemporary

Positioned to ‘Understand Asia’, the team looked at incorporating asian graphical elements to bring out a sense of delicateness in the design. Users need a website that is approachable and wise. We were able to achieve that by incorporating elements of intricate asian inspired patterns, half tone textures and serif fonts.

Feedback from clients -

"Is it possible to get a third option combining the banner style and rounded corners from Art Direction 2 in Art Direction 1?"

Final Direction & Key Screens

Positioned to ‘Understand Asia’, the team looked at incoporating asian graphical elements to bring out a sense of delicateness in the design. Users need a website that is approachable and wise. We were able to achieve that by incorporating elements of intricate asian inspired patterns, half tone textures and serif fonts.

Spotlight Banners

These collage banners were created to fit the different features and sections on CNA. By using image manipulation and asian inspired pattern graphics, we were able to create a look and feel that is contemporary yet delicate, uniquely made for CNA.

Article Detail

With features such as bookmark and share, readers can easily keep track of the content that they want to read and share relevant news to their friends and family with ease. The team also designed the app with the intention to support dark mode reading, we stayed away from using pure black, pure white and overly saturated colors. By using different shades of grey we were able to express elevation and space in an environment with a wider range of depth.

Section Master Template

Prior to designing the other key screens, we worked on the section master template which consists of the different content components. The section master template was also designed with the intention to support different sizes of advertising modules. The team also considered how these advertising modules and spotlight banners could be used as rhythm breakers during the browsing journey.

Watch

On the Watch page, readers will be able to watch the livestream of CNA news bulletins. Watch CNA's documentaries and current affairs shows on people and issues in Singapore, Asia and the rest of the world. A dark theme was applied to this page specifically so as to emulate a cinematic effect and to make the watching experience much more immersive.

Listen

On the listen page, users will be able to tune in to CNA938 live radio as well as catch up on the different podcasts series.  On the mobile app, we’ve designed an audio player that docks to the bottom of the page and users will be able to continue to browser through the content.

Discover

A page that is unique to CNA, readers can find editors' picks - a carefully curated list of best stories, videos or programmes. A surprise me feature has been designed for this page, to bring an element of delight to readers. By clicking on it, they’ll be recommended a piece of story content.

Challenges & Conclusion

This project has been a very valuable experience for me. From zooming in to experiment with how different components can be designed and assembled to form different variations of sections to working with the clients to get buy in on the proposed design direction and reviewing design implementation. The templates designed for CNA were also used for TODAY, Berita and Seithi website revamp.

1. Always consider real estate

This got repeatedly brought up during the meetings with CNA clients. Though they like art direction 2 for it’s motif graphics but they were concerned about graphics taking up too much real estate and in their industry practice, content is king and should be the prominent thing that users see at first glance.

2. Better manage timeline & workflow

This project was done over a short period, and there were many screens to be created. We experienced setbacks with the art direction and underwent multiple revisions. Which left us with slightly lesser time for the actual design implementation. Since it was the team’s first time designing for a news platform, we struggled with maintaining the component library while handling multiple change requests. As a result, there were a couple of times we had to do double work due to the lack of clarity on managing the design assets.

Experience Design Team:
Creative Director: Joshua Sim / User Experience: Beatrice Ong / Art Direction & Design: Qian Yu and Alan Teo