1. Hi 👋 My name is Audhina Nur Afifah, B.A. (she/her)
Currently working as Lead Product Manager of detikcom
I maintain strategic product role of CNN Indonesia & CNBC Indonesia daily
Herewith the telltale of my works and selected projects!
audhinafh.afifah@gmail.com
audhina-afifah.medium.com
2. Formally educated in art & design, experienced in
creative directing and exhibition management.
Being both deep and broad learner, I have keen
eyes and sharp wits to dig into various domain
knowledge, especially those which are mainly
user-facing 💣💥
By these experiences, my skills ranging from:
● Design Thinking
● UI/UX Design
● Research & Analysis
● Business Intelligence
● Data Visualization
● Reporting & Presentation
● Product Roadmap & Strategy
● Stakeholder Management
● Agile Development
● Release Management
● Continuous Integration & Continuous Delivery
3. Graduated cum laude
Bachelor of Arts, Interior
Design
Institut Teknologi Bandung
Finished working at
ArtSphere Art Consultancy
Started & finished working
as Campaign Manager at
Lemonilo
Started working as Product
Manager at
CNNIndonesia.com
Started working as Curator
Assistant at ArtSphere Art
Consultancy
Creative Director
Lingkar Pemilih Muda
KPU Jawa Barat
Exhibition Manager
Faces of Life
ArtSphere x ARTOTEL
Exhibition Manager ArtStage
Jakarta 2017
ArtSphere
Interior Designer
LRT Kelapa Gading
PT. Jakpro
Program Manager
Bandung Design Archive
Rupa Desain x Bandung
Creative Hub
Interactive Dataviz
Indonesia General Election
2019
Kursi Panas Pemilu CNN
Indonesia
Digital News Page Redesign
(Text and Multimedia)
CNN Indonesia
Dynamic Tagsite and
Channelbox
CNN Indonesia
Travel - Lifestyle Homepage
CNN Indonesia
[link]
Selected Projects
Facilitator
DesignAction
Bandung Creative City
Forum & Bandung Municipal
Govt
Volunteer
International Council on
Monuments and Sites
Education & Work History
2016 2017 2018 2019 2020
Creative Director
Interupsi! Podcast
ITB Alumna Association
—present
4. Selected Projects
Education & Work History
2021 2022 2023—present
CNN TV Digital Redesign
CNN TV Digital
[link]
FOKUS: Featured
News List Redesign
CNN Indonesia
[link]
Mentor & Curriculum
Designer
Full Stack Product
Management Bootcamp
Kanal Potensi
Promoted as Senior Product
Manager at
CNNIndonesia.com & CNN
TV Digital
CNNIndonesia.com
Redesign
CNN Indonesia
Project Lead
Content Personalization
CNN Indonesia
Mentor & Learning Designer
Digital Product Management
Course
Bitlabs Academy
Program Officer
Rupa Desain for Bandung
Design Bienalle 2021
Rupa Desain
Promoted as Product
Lead/Section Head for News
Licensed Media at detikcom
CNN Indonesia
CNBC Indonesa
—present
CNBCIndonesia.com
Redesign
CNBC Indonesia
CNN Business
CNN Indonesia
[link]
Otomotif - Homepage
CNN Indonesia
[link]
What The Fact! Politics
Newsletter
CNN Indonesia
General Election Microsite
Kanal Pemilu Tepercaya
[link]
Interactive Dataviz
Indonesia General Election
2024
Kanal Pemilu Tepercaya
[link]
6. Packing Information
Redesign
CNNIndonesia.com
Key Results
● Increase in daily loyal user by 50%
● Decreased unplanned development request by
nearly 70%
● Increased overall product plan achievement by
20%
● Diversifying audience composition by gender
and age group to more balanced proportion,
dispersing contents readability from mostly hard
news to more soft news
● Increase LCP & CLS performance by 30%
Thought Process
Exploratory research, Object Oriented Design
CNN Indonesia is a news media outlet reporting
across the nation and globally which provides
web app, native app, and digital TV live streaming
channel. Our brand was declared the most
trusted news outlet in Indonesia (Reuters-Oxford
Digital News Report 2021). Since 2020, our
readers grow significantly and diversified widely.
I led the development of the whole redesigning
proces, including pre-research and
incremental development. This project aimed to
support the newsroom to deliver expose more
quality contents.
Adaptability is keyword of this project. Being the face of editorial’s judgment
and completely lies on editorial’s territory, we pursue to mimic newspaper
headline solely for this feature. By adding details of the most important news at
that time, we simply built the sense of importance along with belt of editorial’s
pick below. However, we design balanced layout to make the best use of our
engine; by implementing recommendation engine for related article (of
headline) and most popular articles which are currently read by our users.
This project won Silver Medal for News Website or Mobile Service at Digital
Media Awards Asia 2022 held by World Association of News Publishers.
[link] [link]
7. Though published weekly, our features are the
most loved and awaited by our loyal users. With
widely ranged topics and news format, we built a
showcase of magazine-like content
collections, which is also embedded in our
menu.
In addition, to be the fastest catcher of
developing news, moments need to be captured
clearly and briefly. We enhanced live report
pages which focused on providing pieces of
information with tenuous chronological order
to distinctively report what’s matter.
Packing Information
Redesign
CNNIndonesia.com
Key Results
● Raised number of pageviews and pages per
session up to three times, which then raised
advertorial impression by 20%
● Increased percentage of multimedia content
retention funnel up to 60%
● Raised click-through rate by 30%
Thought Process
Exploratory research, Object Oriented Design
8. What The Fact! Politics is an ongoing pilot
project road to the development of CNN
Indonesia Premium. It provides in-depth analysis
of current political issues, weighing mostly on
2024 general election. The brand focuses on
hard news for younger audiences, designed
for mobile first.
Packing Information
Redesign
CNNIndonesia.com
www.CNNindonesia.com
Key Results
● Acquiring 30K newsletter subscribers with 13%
email open rate on average.
Thought Process
Exploratory research
www.CNNindonesia.com
9. Clearer Information, Fairer Journalism
Interactive Data Visualization
Indonesia General Election 2019
CNNIndonesia.com
Senior PM
Ariel Aulia Widjaja
Product Manager
Audhina Nur Afifah
UI/UX Designer
Dani Rus
Talib Abdillah
UX Engineer
Ferdy Saptawira
Muhamamd Nur Lanta Adena
Front-end Engineer
Andrian Robby Pratama
Creative Director
Fajrian Bambu
10. Clearer Information, Fairer Journalism
Interactive Data Visualization
Indonesia General Election 2019
CNNIndonesia.com
Helped journalists to write real time election update articles, as well as a guidance to make an infographic.
KPU’s Real Count 7,78%: Jokowi 54,32%, Prabowo 45,68%
CNN Indonesia - Politics coverage
Published Sunday, 21st April 2019
INFOGRAPHIC: Map of Political Power 2014
CNN Indonesia - Politics coverage
Published Tuesday, 16th April 2019
Election 2019
(Microsite)
Index of content
(Based on tag)
Election Timeline
(Static page)
Fact Check
(Static page)
Vote Count
(Data visualisation)
Presidential
(Two candidates)
Legislative
(20 contenders)
Bar graph
Geomap
Table
Bar graph
Geomap
Half-pie chat
The information architecture provided is developed within these sets of features:
Key Results
● Increase in user by 300% during electoral week
● Increase in advertorial impression by five times
● More than doubled increase in election news
exploration (by visits) per user
Thought Process
Exploratory research, Object Oriented Design
”Indonesia has the biggest, most complicated
single day election in the world.” (Reuters, 2019).
The key of democracy is well-informed
consensus, thus news deliverables method is
crucial. I led the development of our main
feature: ballot result interactive data
visualization. This project aimed to support the
newsroom to deliver clearer, detailed, and
interactive data-informed contents.
By that time, CNN Indonesia was the first and
only online media outlet to publish this set of
features.
11. Clearer Information, Fairer Journalism
Interactive Data Visualization
Indonesia General Election 2019
CNNIndonesia.com
Elections are generally ruled by one man, one
vote system. As Indonesia had two presidential
candidates, one of them must surpass more than
a half of the ballot to win, thus, there will be one
party who dominates to show popular vote.
Presidential Election - Desktop View
This feature mainly lets users get the bigger picture of
who dominates the vote by using a bar chart. Users were
also given geomap which domination scale indicated by
intensity of color.
Additionally, users can choose which data to be shown by
select box (dropdown interaction).
Hover interaction on geomap
shows pop-up with detailed
information of regional area
(portrayed by bar chart) similar
to national vote.
Presidential Election - Mobile View
In general, national vote is similar to desktop. The
difference is on detailed regional information,
which is visualized by table. Percentage number of
victorious candidate was shown in color, in
contrast, failed contender was grayscaled.
In Bali, #1 Jokowi was the
winner (red). Meanwhile,
#2 Prabowo won in
Banten (yellow).
12. Clearer Information, Fairer Journalism
Interactive Data Visualization
Indonesia General Election 2019
CNNIndonesia.com
This feature was the first legislative count
visualization published real time along with
parliamentary projection by online media in
Indonesia,
For context, Indonesia’s parliamentary threshold
stood at 4%. This rule is important to convey the
message on who is going to get parliamentary
seats. Thus, visual significance should be
applied to show successful and failed
contenders.
As a result, a visual signifier implemented: those
who gained vote below 4% were grayscaled.
Second, half-circle chart was made to resembles
House of Representatives seats’ proportion. Only
parties which won the seats were then
projected to this chart.
Legislative Election - Desktop View
There are two main informations which should be
shown. First, ranked percentage of vote gained by
each party. Second, who did not make it past
parliamentary threshold.
Legislative Election
Mobile View
In general, national vote is similar
to desktop. The difference is on
detailed regional information,
which is visualized by table.
Percentage number of victorious
candidate was shown in color, in
contrast, failed contender was
grayscaled.
Visual difference between
successful and failed
contenders.
13. The Biggest Vessel
Digital News Page Redesign
(Text and Multimedia)
CNNIndonesia.com
Senior PM
Ariel Aulia Widjaja
Product Manager
Audhina Nur Afifah
UI/ UX Designer
Rendi Rahmadani
UX Engineer
Muhammad Nur Lanta Adena
Ahmad Firizal
Front-end Engineer
Akhmad Taufiq Ridhowadi
Mukhsin Wibowo
Rivai Arvian
14. The Biggest Vessel
Digital News Page Redesign
(Text and Multimedia)
CNNIndonesia.com
Key Results
● Raised number of pages per session to three
times, which then raised advertorial impression
● Improved engagement metrics (session
duration, bounce rate) up to 15%
● Increased percentage of multimedia content
retention funnel up to 60%
● Raised click-through rate uptrend by 30%
year-on-year
Thought Process
Design sprint, co-design
Phenomenological research, A/B testing
Unconsciously, we had successfully switched
news exposures from front page headline right
away to content in pieces, thanks to the internet.
Not only I was challenged to develop platform
adoption according to shifted user’s behavior
as for news consumption, but also diversified
methods of delivering messages which are
highly adherent to user’s preferences.
As of today, biggest magnitude of online media
lies on articles, instead of welcome page.
Henceforth, this project was also deployed along
with structured data for SEO enhancement.
Generally, CNN Indonesia has two main kinds of content deliverables: text and multimedia. However,
multimedia contents were not explored enough by users due to lack of exposures. Conversely, data showed
that multimedia has greater tendency to generate higher performance on engagement metrics, such as
pages/session, retention, bounce rate, average time on page, and session duration. In addition to this,
both newsroom and commercial department need to raise page viewed by users for editorial quality and
advertorial impressions purpose. Therefore, the idea is to attach more multimedia contents to text
articles, which are already have the biggest exposures—being read by more than 80% of daily visitors.
How might we (1)
Help newsroom easily attached
multimedia contents while writing
text-based news?
How might we (2)
Present readers more multimedia
contents within text-based news
seamlessly?
Challenge statement
Text-based:
● Single Page Article
● Multiple Page Article
● Op-ed (opinions and editorials)
● Live Report
Multimedia:
● Photo Gallery
● Video on Demand
● Infographic
80% of the traffic
Lower engagements
20% of the traffic
Higher engagements (up to thrice)
15. The Biggest Vessel
Digital News Page Redesign
(Text and Multimedia)
CNNIndonesia.com
Experience Enhancement
(Text Article)
Text Article
Photo Gallery
● FOKUS (Editorial Features)
Exposure
● Embed Photo Gallery
● Embed Infographics
● Auto-embed Video
● Channelbox based on topics
● Headline
● Editorial’s Pick
● User interface
revamp
● Recommended Photo
(Next Photo Gallery)
Text article body
(Written by newsroom)
Multimedia embed
(Photo, Video,
Infographics)
Integration
Automatic by
recommender
system
Manually
chosen by
newsroom
Content Management Platform
HMW (2)
UI/UX Enhancement
HMW (1)
Content Management System
First challenge answered by
adding new embed
management system which
allows journalist to both
manually and automatically
add multimedia content.
Automatic embed is based of
content keyword.
To achieve holistic experience,
interface enhancement was
focused on synchronizing
back-end content to be shown
seamlessly, according to each
type of multimedia content, at
the body text of articles.
Additionally, overall photo
gallery experience was also
revamped.
As we need to include both newsroom operations
and recommender run by engine, to improve
overall integration, building blocks were developed
on both back-end and front-end.
16. The Biggest Vessel
Digital News Page Redesign
(Text and Multimedia)
CNNIndonesia.com
Enhanced Text Articles
Articles Page
Opium, Can Taliban Live Without the Fragrant Fund Farm?
CNN Indonesia - Middle East coverage
Published Tuesday, 5th October 2021
Mobile View Desktop View
Desktop View Mobile View
FOKUS Embed (Auto)
Usually, the newsroom gathered important news on
certain topics on a feature named FOKUS. Then,
widget box which portrays most related and most
important news articles to the existing article was
added. The box will automatically appeared in all of
articles which included in the FOKUS. Hence, users
will get deeper editorial perspectives.
Photo Gallery Embed (Auto & Manual)
To increase exposure and retention to multimedia
articles, photo gallery embed was shown in the
form of HTML Iframe code, which automatically
generated by content management system.
Journalist could add them automatically and
manually. Therefore, users will get bigger picture
by both consuming textual and visual contents of
the title.
17. The Biggest Vessel
Digital News Page Redesign
(Text and Multimedia)
CNNIndonesia.com
Photo Gallery & Slideshow
Articles Page
Taliban Victory, Afghan's Drug Market in Demand
CNN Indonesia - Business Economics coverage
Published Friday, 1st October 2021
Mobile View Desktop View
Desktop View Mobile View
Photo Article View
Photo article was designed with bigger
portion of image presentation, with higher
quality of image rendering, by applying fixed
width and height on CSS.
Row of images within the gallery are also
shown, thus users could easily choose which
one to expand.
Slideshow View
Besides improvement of
image rendering, at the end
of the slides, related photo
galleries was added as
recommendation, to provide
users more content options
based on their previous
activity.
19. Integration of Delivery
Dynamic Contents
(Tagsite, Link, Channelbox)
CNNIndonesia.com
Key Results
● Raised pageviews to users ratio two times
● Increased content retention funnel up to 20%
● Decreased unplanned development request by
nearly 75% thus increase iteration cycle
efficiency up to 50%.
● Increased overall product plan achievement to
20%
Thought Process
Design sprint, co-design
Phenomonological research, A/B testing
In this attention economy, reading sure takes a
lot of effort. As technology accommodates
various types of snackable mediums,
contextual yet meticulous information
architecture is needed.
Besides, news are naturally fast-paced, too
uncertain, and too frequent. In order to avoid
technical and development debt, adaptive
platform for flexible delivery becomes
necessary.
Tagsite
Dynamic
Channelbox
Welcome Pages
Articles
Features
Dynamic Link
Welcome Pages
(Popular Topics)
Articles
(Related Topics)
Hamburger
Menu
Linked to
Appeared at
Tagsite
Tagsite
The information architecture is simple. CNNIndonesia.com already has /tag/ slug after the domain for every
tag posted along with articles to automatically creates an index of articles with each of every specific meta
keywords. No need to build new page for certain events, hence the name, I build an information structure by
the basis of objects (tag), which easily placed around the site, then resulting on these benefits:
● Matches reader’s mental model.
● Content grouping to creates bubbles within huge bubble.
● Incremental and reusable.
● Odds of structured data for SEO.
● End-to-end content integration
Appeared at,
similar channel
20. Integration of Delivery
Dynamic Contents
(Tagsite, Link, Channelbox)
CNNIndonesia.com
Tagsite - Newsfeed Layout
When we talk about coronavirus, which is prone to
misinformation, clustering articles based on types
(video, infographic) is needed. These clusters should also
be perishable as well by putting dynamic boxes. It
works by combining virus-corona tag (main value) and
infographic and video (content type value). As we know
that the virus competes with the speed of information —
clear message is obligatory, clearer message is better.
Tagsite - Multimedia Layout
CNN Indonesia has several features which are
published periodically, mostly weekly, as a wrap-up
of trending issues. These features oftentimes
published as multimedia, one of them is
videographic. Thus, different page layout for single
type contents which gives timeless impression is
needed.
Tagsite has tag as its main value. It allows
additional content delivery which are:
● Automatic addendum of other value
placed in between news feed, such as:
○ Content types
○ Channels
○ Other tag
● Manual embed at headline area
○ Livestream player
○ Live Report excerpts
○ Featured News
○ Iframe embed
21. Integration of Delivery
Dynamic Contents
(Tagsite, Link, Channelbox)
CNNIndonesia.com
Channelbox Layout
As channelboxes are exposed at different types of pages (articles, welcome page), it has more flexible
and customizable layout. Hence, we could generate different impressions on different topics.
Dynamic channelbox has customizable layout
for these elements:
● Title and call to action
● Style and color
● Thumbnail layout
All of these to aim different impressions on each
topic, as it has extensive exposures to other
pages, which are:
● Welcome Pages
● Articles
● CNN TV Digital
In total, dynamic channelbox exposures made
up to 95% of total site traffic.
22. Integration of Delivery
Dynamic Contents
(Tagsite, Link, Channelbox)
CNNIndonesia.com
Dynamic Channelbox
Dynamic Link
Tagsite
Integrated Delivery
This is an example of integrated delivery between tagsite, dynamic link, and dynamic box. Edusports is a
videographic series published weekly as an explainer of trending sports news. It has dedicated multimedia
tagsite, with edusports tag as main value. Dynamic channelbox is located at Sports Welcome Page, which
then automatically appeared in all of Sports’ articles, at dedicated slot for dynamic channelbox. Simply put,
those are published under Sports with certain tag (edusports), resulted in publication at all of Sports pages.
23. Global Service Jam 2022
Enlight Rooms
Service Design Indonesia
Mentor
Dono
Team
Kemalpasha
Audhina Nur Afifah
24. Global Service Jam 2022
Enlight Rooms
Service Design Indonesia
Have you ever experienced the feeling of being
unheard? Or curious about something your
surrounding tells you never to think about?
The theme we got for Global Service Jam 2022
was The Brightness We Share, in which my
group interpreted as a way to shed a light on
dark topics we do not usually talked about.
We aim to provide a melting pot, safe space
for people with different identities (race,
religion, gender, socio-economic status) to voice
out their concerns peacefully.
Which one is the most determining
factor of education?
400 respondents (Twitter poll)
242 respondents (Twitter poll)
Which one is your primary source
of education?
What
Discussion space
Web app & offline community
Who
Urban citizen
Why
Lack of healthy discussion space to talk about
taboo topics. As most knowledge was gained
through family, only a little amount of the
institutions are open to foreign values. So
does formal school incapability to cater these
needs, mainly because they avoid conflict with
conservative administrations.
How
Service journey to match a person who has a
sensitive question with some others who are
willing to answer.
Prototype for offline space
25. Global Service Jam 2022
Enlight Rooms
Service Design Indonesia
Apple Pie
(Moderated Forum)
Get to know more than one piece of what’s bugging you
You get to throw one question and let your preferred crowd
answers. Moderator will fully take charges of maintaining
discussion, while you get to choose which of kind cohort is
the most suitable to answer.
Link to Service Blueprint
26. Apples to Apples
(Unmoderated one one one)
Voice out what matters to you, directly with the matter
Talk directly with someone of your preference. Grow the
conversation independently without moderator. Here,
both parties have given consent to be asked and answer
sensitive question. Each of them agreed to conduct a
peaceful conversation.
Global Service Jam 2022
Enlight Rooms
Service Design Indonesia
Link to Service Blueprint
27. Apple Juice Bar
(Moderated one on one)
When in doubt, asks the bartender to give you the answer, he curates finest
ingredients blend into one
Talk with someone and one more person in the middle to get things on
track. Just like our nightlife contemplation experience, we get to meet two
random person. One is a person who happens to visit the bar just like you,
one is the bartender who is already used to listen to those on tables.
Global Service Jam 2022
Enlight Rooms
Service Design Indonesia
Link to Service Blueprint
28. Upskilling from the Downhill
Product Management Bootcamp
Learning Design
Kanal Potensi
Team
Audhina Nur Afifah
Giovanni Nian Gani
Ariel Nian Gani
29. Bootcamp as an informal education platform is
currently flourishing these days. Nevertheless, it
is a short-term solution to address longstanding
issue of skills mismatch between the
education and industrial sectors, since
currently there is no undergraduate program
dedicated for digital product management.
This curriculum was made based on my
professional experience, reflected on “What to
do during first 90 days of being a product
manager”.
Link to course
Upskilling from the Downhill
Product Management Bootcamp
Learning Design
Kanal Potensi
1. Getting to know your surroundings
Product management basics, leadership, self resilience and stakeholder management
2. Proposing ideas
Problem identification and idea pitch
3. Analyzing
Quantitative and qualitative analysis, generating insights
4. Empathizing
Empathizing and validation, persona-making
5. Defining product roadmap & strategy
Defining MVP and backlog grooming, short-term product roadmapping
6. Brainstorming
Divergence, convergence, and rapid prototype sketching.
7. Writing product requirement documentation
Effective writing communication skill through documentation
8. Prototyping
Understanding UI/UX basics, lo-fi prototyping
9. Iterating
Planning iteration and continuous delivery
10. Testing
Understanding test environment and writing test result
11. Evaluating
Understanding dashboard and post-deployment analytics
Course Structure
Bibliography & Sources
● Cagan, Marty. (2017) INSPIRED: How to
Create Tech Products Customers Love. John
Wiley & Sons
● Eyal, Nir. (2014) Hooked: How to Build
Habit-Forming Products. Penguin Canada
● Norman, Donald. (2002) The Design of
Everyday Things. Basic Books
● Scheinder, Jakob. (2010) This is Service
Design Thinking: Basics, Tools, Cases. BIS
Publishers