-
Notifications
You must be signed in to change notification settings - Fork 0
/
carbon.html
137 lines (95 loc) · 6.48 KB
/
carbon.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<body itemscope itemtype="https://schema.org/Sculpture">
<head>
<title>Catherina Centanni</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="assets/img/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fountain. Interactive art installation based on search engine queries.">
<meta name="creator" content="Catherina Centanni">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
<style>
/* Landscape phones and down */
@media (max-width: 480px) {
h1 { font-size: 21pt;}
}
@media (max-width: 320px) {
h1 { font-size: 18pt;}
}
.row {margin-bottom: 30px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="text-center">
<a href="/"><img src="assets/img/catherina-sm.jpg" width="60px" class="rounded-circle"></a>
<h1 itemprop="name">Carbon</h1>
<hr>
<div>
</div>
</div>
<div class="row">
<div class="col">
<p class="text-left">Carbon, CNBC's publishing platform was initially released in 2018 and included the story editor, media library, and content library (advanced search). Since then we've added a number of other content types including data viz, infographics, and real time market data charts. We built a commerce platform powered by Carbon and expanded Pro live coverage features. We are able to create original video and ingest on-air video clips and publish and distribute them within minutes from airing.</p>
<p class="text-left">We set out on this journey with a very small team with the goal of creating tools our users would enjoy using. I didn't want to think of it as an internal tool people are forced to use. Many of us have struggled through filing expense reports using internal systems. My measure of success would be whether users would choose Carbon if it were a paid service.</p>
<p class="text-left">In addition to focusing on usability, many features were designed with measurable business impact goals in mind. From reducing time to pubish breaking news to just a few seconds to increasing engagement by suggesting relevant related links and video in articles, many features are motivated by driving business metrics.</p>
</div>
</div><!-- /row -->
<div class="row">
<div class="col">
<img src="assets/carbon/story.png" width="800px" alt="Carbon story editor">
</div>
<div class="col">
<h3 itemprop="name">Story editor</h3>
<p class="text-left">Traffic continues to shift to mobile, yet most content is authored on large screens. I felt it was important to focus reporters on creating and curating content rather than managing layout. Separation of concerns was an important principle when designing authoring pages. The goal was to create rich semantic content that can be optimized for a variety of clients without compromising publishing speed and usability. Different fields that auto-fill in order to speed up publishing can be optimized for mobile, social, and search.
</p>
</div>
</div><!-- /row -->
<div class="row">
<div class="col">
<img src="assets/carbon/rte.png" width="800px" alt="Rich-text editor">
</div>
<div class="col">
<h3 itemprop="name">Rich-text editor</h3>
<p class="text-left">Focusing on cross-platform publishing I wanted to take a "what you see is what you mean" approach rather than the traditional WYSIWYG editor. This approach further emphasizes thinking about where the customer is viewing content instead of thinking about what content looks like using desktop authoring tools.
</p>
</div>
</div><!-- /row -->
<div class="row">
<div class="col">
<img src="assets/carbon/taxonomy.png" width="800px" alt="Tagging">
</div>
<div class="col">
<h3 itemprop="name">Organizing content</h3>
<p class="text-left">In order to automate content curation and classification, stories are assigned to sections which describe where content should live within the information architecture.</p>
<p class="text-left">To make tagging content easier we automate entity extraction. Personalized alerts, market data pages, and topic sections use this metadata to automatically push and aggregate content.</p>
</div>
</div><!-- /row -->
<div class="row">
<div class="col">
<img src="assets/carbon/media-library.png" width="800px" alt="Media Library">
</div>
<div class="col">
<h3 itemprop="name">Media management</h3>
<p class="text-left">The new media library was designed to make it easier to upload, process, organize, and find photos from a variety of sources. Through integrations with Getty and Reuters users are able to automatically ingest metadata and manage entitlements. We were able to dramatically reduce the amount of communication between writers and photo editors by showing when a photo was last used and whether the writer is entitled to use the photo. Photos can re-licenced directly from Carbon.</p>
</div>
</div><!-- /row -->
<div class="row">
<div class="col">
<img src="assets/carbon/carbon-talk.png" width="800px" alt="Carbon Talk">
</div>
<div class="col">
<h3 itemprop="name">Managing workflows</h3>
<p class="text-left">The latest big feature launching in 2021 is Carbon Talk. I have been careful not to dictate processes. Instead, with most features in Carbon I've taken the approach of observing how people work together naturally and design features make collaboration easier. When possible, we try to augment and integrate tools editors already use like using the Slack API for notifications when a task is ready.</p>
<p class="text-left">Carbon Talk was designed to reduce cognitive load by making it easier to assign and manage tasks. Anyone can assign tasks to any teams or individual users making it easy for editors to keep track of the list of stories ready for them to edit, homepage managers know what's rady to be promoted to the homepage or altered. The process is flexible and each team can decide how to use task assignment. We want teams to have the autonomy to decide how much process, if any is helpful.
</p>
</div>
</div><!-- /row -->
</div> <!-- /container -->
</body>
</html>