Redesigning the CNA news app to be more visually accessible
Automating Hyundai's issue reporting with a mobile app
For the Mediacorp Pitch It! competition, I redesigned the CNA mobile app to be more accessible and inclusive for the visually-impaired and elderly.
An improved user experience for the visually-impaired and elderly
An improved user experience for the visually-impaired and elderly
CNA is one of the most popular news networks and apps in Singapore and the APAC region, with 50M+ monthly impressions. It is owned by Mediacorp, a state-owned media conglomerate.
CNA is one of the most popular news networks and apps in Singapore and the APAC region, with 50M+ monthly impressions. It is owned by Mediacorp, a state-owned media conglomerate.
Under the theme of 'Design for All', our team pitched a redesign of the CNA mobile app to improve visual accessibility and inclusivity.
Under the theme of 'Design for All', our team pitched a redesign of the CNA mobile app to improve visual accessibility and inclusivity.
Duration
Duration
Jun 2024
Jun 2024
Skills
Skills
User Research, Wireframing, Interface Redesign
User Research, Wireframing, Interface Redesign
Team
Team
1 UI/UX Designer, 2 UX Researchers
1 UI/UX Designer, 2 UX Researchers
#1: Define the problem
#1: Define the problem
Our problem statement
Our problem statement
How might we innovate features for Mediacorp’s apps to enhance overall accessibility and inclusivity, addressing both diverse audience demographics and the specific needs of users with disabilities?
Accessibility: The quality of being easily understood and used by users with disabilities, with the product having extra accommodations to aid in usability.
Inclusivity: The quality of allowing all audience demographics, regardless of vision status, to have a more engaging visual user experience.
What's the problem?
What's the problem?
😡 Cluttered Interface
Too much text and too few images on the home page overwhelms users and makes it difficult to locate content.
Too much text and too few images on the home page overwhelms users and makes it difficult to locate content.
😡 Poor Contrast
Poor color contrast for some components makes it hard to distinguish features and surface key features.
Poor color contrast for some components makes it hard to distinguish features and surface key features.
😡 Hidden Features
Some accessibility features, such as article audio playback, are not visibly designed and placed.
Some accessibility features, such as article audio playback, are not visibly designed and placed.
Who are our target users?
Who are our target users?
Our team defined our target users as visually-impaired seniors (aged 50+) for the following reasons:
Our team defined our target users as visually-impaired seniors (aged 50+) for the following reasons:
Seniors are more likely to be visually-impaired → Risk of blindness increases by 15x for adults above 50 (Source: Singapore National Eye Centre)
Seniors make up a significant portion of CNA users → 24% to be specific (Source: Similarweb)
By designing to improve overall visual accessibility, we therefore improve inclusivity for seniors.
By designing to improve overall visual accessibility, we therefore improve inclusivity for seniors.
#2: Conduct some research
#2: Conduct some research
Let's interview users…
Let's interview users…
Due to time constraints, we decided to reach out to family members who fit into the age category of our target users. We conducted face-to-face semi-structured interviews with 10 seniors (aged 52-75) that had self-reported visual impairments, such as myopia. We gave them time to navigate the CNA app and ‘Think Aloud’.
Due to time constraints, we decided to reach out to family members who fit into the age category of our target users. We conducted face-to-face semi-structured interviews with 10 seniors (aged 52-75) that had self-reported visual impairments, such as myopia. We gave them time to navigate the CNA app and ‘Think Aloud’.
Using affinity mapping, we grouped the research findings below:
Using affinity mapping, we grouped the research findings below:
From our research, we were also able to compile common user motivations and pain points.
From our research, we were also able to compile common user motivations and pain points.
Seniors
Motivations
Want to receive real-time news updates in a visually accessible way, with enlarged images and minimal text for easier reading.
Want to browse headlines at a glance in order to quickly discern news of interest.
Want to adjust text size and brightness to customize the reading experience.
Pain Points
Too much text and too few images, creating a cluttered, overwhelming interface.
Poor WCAG color contrast for the bottom navbar and FAST button.
‘Listen to article’ audio feature is helpful, but not visible or docked in a permanent position.
Overly complex screenreader controls, cannot read CNA-specific buttons and images due to lack of alternative text
…and analyze competitors
…and analyze competitors
As part of our secondary research, we also looked into existing news apps.
As part of our secondary research, we also looked into existing news apps.
🇬🇧 BBC
We liked the use of large, eye-catching images to break up lines of text.
We liked the use of large, eye-catching images to break up lines of text.
🗽 New York Times
We liked the layouts of text-image content blocks to provide visual variety.
We liked the layouts of text-image content blocks to provide visual variety.
🇭🇰 SCMP
We liked the clear color contrast and intuitive navigation menus.
We liked the clear color contrast and intuitive navigation menus.
#3: Ideate and get feedback
#3: Ideate and design
#4: Get feedback and iterate
Mapping user flows
Mapping user flows
After the research stage, I drew out some quick user flows to understand the user journey more and how users would navigate our redesigned app. This allowed me to quickly note and validate the core features of our redesign with my team members.
After the research stage, I drew out some quick user flows to understand the user journey more and how users would navigate our redesigned app. This allowed me to quickly note and validate the core features of our redesign with my team members.
Sketching wireframes
Sketching wireframes
Afterwards, I quickly sketched some low-fidelity wireframes to help better visualize the redesigned app. Due to the time constraints of this competition, I then moved onto hi-fidelity designs after obtaining feedback and validation from my team.
Afterwards, I quickly sketched some low-fidelity wireframes to help better visualize the redesigned app. Due to the time constraints of this competition, I then moved onto hi-fidelity designs after obtaining feedback and validation from my team.
Obtaining feedback
Obtaining feedback
Afterwards, I went straight into the hi-fidelity designs due to the time constraints and asked both my team members and our target users for feedback. Some of my findings:
Afterwards, I went straight into the hi-fidelity designs due to the time constraints and asked both my team members and our target users for feedback. Some of my findings:
Increase the size of navbar icons (and label them if possible) to improve visibility and avoid user confusion.
Increase the size of images in the sub-sections of the home page (such as My Feed) to be full-width and more eye-catching.
Remove the floating "FAST" button and relocate it since it is visually obstructive.
The screenreader feature flow could be achieved with fewer clicks (Menu → Settings → Screenreader) instead of being nestled within a display menu.
#5: Arrive at a final design!
#4: Get feedback and iterate
Redesigned: Home Page
Redesigned: Home Page
Redesign
Original
Redesigned Home Page
✅ Enlarged the hero image, article images and white space between articles for legibility.
✅ Improved color contrast of the navbar based on users’ feedback and WCAG rules.
✅ Users commented that the floating “FAST” button was visually obstructive. I renamed this feature as “Digest” and moved it to the bottom navbar beside “Watch” and “Listen”, following the logic that the navbar shows different types of content.
Redesign
Original
Redesigned Home Page
✅ Enlarged the hero image, article images and white space between articles for legibility.
✅ Improved color contrast of the navbar based on users’ feedback and WCAG rules.
✅ Users commented that the floating “FAST” button was visually obstructive. I renamed this feature as “Digest” and moved it to the bottom navbar beside “Watch” and “Listen”, following the logic that the navbar shows different types of content.
Redesign
Original
Redesigned Home Page
✅ Enlarged the hero image, article images and white space between articles for legibility.
✅ Improved color contrast of the navbar based on users’ feedback and WCAG rules.
✅ Users commented that the floating “FAST” button was visually obstructive. I renamed this feature as “Digest” and moved it to the bottom navbar beside “Watch” and “Listen”, following the logic that the navbar shows different types of content.
Redesigned: Article Page
Redesigned: Article Page
Key Consideration: How should advertisements be placed in articles to get traffic while not impairing accessibility?
Key Consideration: How should advertisements be placed in articles to get traffic while not impairing accessibility?
Users want less ads, but CNA needs ads to be profitable. I grew conscious of this trade-off from the product perspective. Therefore, even though our users commented on the prevalence of ads, I maintained the ad placements in the redesign.
Users want less ads, but CNA needs ads to be profitable. I grew conscious of this trade-off from the product perspective. Therefore, even though our users commented on the prevalence of ads, I maintained the ad placements in the redesign.
Redesign
Original
Redesigned Article Page
✅ Increased text size, image size and padding between paragraphs and the “Also worth reading” recommendation section for legibility.
✅ Added labels to navbar icons to aid in users’ visual recognition.
Redesign
Original
Redesigned Article Page
✅ Increased text size, image size and padding between paragraphs and the “Also worth reading” recommendation section for legibility.
✅ Added labels to navbar icons to aid in users’ visual recognition.
Redesign
Original
Redesigned Article Page
✅ Increased text size, image size and padding between paragraphs and the “Also worth reading” recommendation section for legibility.
✅ Added labels to navbar icons to aid in users’ visual recognition.
On the article page, the ‘Listen’ feature allows users to listen to an AI transcript, benefitting the visually-impaired. However, users need to scroll below the header to activate this feature, which can be inconvenient. Thus, I also redesigned the feature.
On the article page, the ‘Listen’ feature allows users to listen to an AI transcript, benefitting the visually-impaired. However, users need to scroll below the header to activate this feature, which can be inconvenient. Thus, I also redesigned the feature.
Redesign
Original
Redesigned Article Page
✅ Relocated the ‘Listen’ feature to the navbar to be accessed conveniently at any point, allowing users to control audio settings via pop-up controls.
Redesign
Original
Redesigned Article Page
✅ Relocated the ‘Listen’ feature to the navbar to be accessed conveniently at any point, allowing users to control audio settings via pop-up controls.
Redesign
Original
Redesigned Article Page
✅ Relocated the ‘Listen’ feature to the navbar to be accessed conveniently at any point, allowing users to control audio settings via pop-up controls.
New: Screen Reader
New: Screen Reader
With the suggestion of users, I added an internal CNA screen reader for visually-impaired users that commented that in-app elements were unidentifiable by system screen readers.
With the suggestion of users, I added an internal CNA screen reader for visually-impaired users that commented that in-app elements were unidentifiable by system screen readers.
Screen Reader
Added Screen Reader
✅ The reader uses simple gestures (1 tap to read, 2 taps to activate, tap left corner to play/pause). It will be toggled on and off via the settings display menu.
✅ The reader uses simple gestures (1 tap to read, 2 taps to activate, tap left corner to play/pause). It will be toggled on and off via the settings display menu.
✅ The blue selection to be read aloud allows CNA to tailor alternative text to their purposes. Of course, this requires all the images and buttons to have alternative text.
✅ The blue selection to be read aloud allows CNA to tailor alternative text to their purposes. Of course, this requires all the images and buttons to have alternative text.
#5: Arrive at a final design!
#6: Reflect
Polish up the hi-fidelity designs…
Polish up the hi-fidelity designs…
Finally, I jumped straight to high-fidelity designs and consulted my groupmates for internal feedback as I worked.
Finally, I jumped straight to high-fidelity designs and consulted my groupmates for internal feedback as I worked.
…and present!
…and present!
We presented our proposed redesign of the mobile app to the Mediacorp Digital Product Heads and were delighted to win the competition. As a result, I also received an 🌈 internship offer 🌈 to work with the Digital News Division on the actual CNA app revamp!
We presented our proposed redesign of the mobile app to the Mediacorp Digital Product Heads and were delighted to win the competition. As a result, I also received an 🌈 internship offer 🌈 to work with the Digital News Division on the actual CNA app revamp!
It was exciting to present (and defend) my redesigns when prompted by the judges and discuss the feasibility of implementing them, especially considering how advertisements would come into play in the real world.
It was exciting to present (and defend) my redesigns when prompted by the judges and discuss the feasibility of implementing them, especially considering how advertisements would come into play in the real world.
I'm second from the right!
I'm second from the right!
#6: Let's reflect…
Parting takeaways
Parting takeaways
This was my first time participating in a UX competition and I took away several key lessons!
This was my first time participating in a UX competition and I took away several key lessons!
🧐 Challenge assumptions with research
Even with our limited sample size, our user research was vital to broadening our perspective, discarding unfounded assumptions and justifying design decisions.
Even with our limited sample size, our user research was vital to broadening our perspective, discarding unfounded assumptions and justifying design decisions.
🔍 Stay true to the problem statement
It’s easy to want to design for everything, but stick to the scope to implement realistic changes. We clearly defined our scope (visual accessibility) from the start.
It’s easy to want to design for everything, but stick to the scope to implement realistic changes. We clearly defined our scope (visual accessibility) from the start.
💨 Design fast: use existing libraries
In time-pressure environments like this hackathon, make use of existing component and icon libraries to get your designs out ASAP. Then, you can focus on further iterating.
In time-pressure environments like this hackathon, make use of existing component and icon libraries to get your designs out ASAP. Then, you can focus on further iterating.
Like what you see?
Check out more projects by me ☆
Improving CNA's page discovery with a navigation menu revamp
Mediacorp | Oct - Dec 2024
UX Research
User Testing
Interface Design
Streamlining volunteer management for Ground-Up Initiative
Ground-Up Initiative | Sep 2023 - Apr 2024
UX Research
Interface Design
Like what you see?
Improving CNA's page discovery with a navigation menu revamp
Mediacorp | Oct - Dec 2024
UX Research
User Testing
Interface Design
Streamlining volunteer management for Ground-Up Initiative
Ground-Up Initiative | Sep 2023 - Apr 2024
UX Research
Interface Design