CDL describes how they're using canvas to display real time business view of their Hummingbird solution to translate technical metrics into a business context.

<p>CDL is a top UK tech firm, listed in the Financial Times Future 100. Its customer base comprises high volume retail operations, including over 100 major Internet brands, meaning it processes vast amounts of consumer data in milliseconds.
</p><p>It does this by unlocking the potential of data to help financial services and other industries combat fraud and learn consumer habits. Harnessing CDL's innovative data solutions to drive success and growth, they are able to use data in real time during any type of customer journey.
</p><p>They rely on CDL's innovative data solutions to drive success and growth, and integral to this is the ability to use data in real time during any type of customer journey. To deliver this, we selected the Elastic Stack to power our high speed data analytics solution, Hummingbird. This ground-breaking data intelligence solution provides insights into consumer habits and helps tackle fraud before it happens. With real-time insights, decision makers need a way to visualise billions of documents in order to improve key performance indicators such as pricing, contact centre management and customer feedback. We had been using Kibana for some time, but we were often asked to present data in a more business-friendly way, whilst keeping the real-time element. Having been following the progress of Canvas, we jumped at the chance to check out its capabilities as soon as it became available in beta.
</p><h2>Setting up KPIs for the Service Management Team
</h2><p>First of all, we looked at our own data in CDL to prove the use case for Canvas. Our Service Management team had previously asked for better visibility of Hummingbird service KPIs. Our Hummingbird DevOps team had a Kibana dashboard (below) and we wanted to shift its focus from purely showing the technical components of the solution to monitoring the business indicators relevant to a management audience.
</p><div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/gzrVqR3oH7CRHfgsEZSw3q.jpg" data-uuid="gzrVqR3oH7CRHfgsEZSw3q" data-v="4" data-type="inline">
</div><p>Breaking this down further with the Service Management team, we agreed there were two KPIs: average speed of response and maximum speed of response.
</p><p>In Canvas we created two gauges for these KPIs.
</p><pre class="prettyprint">filters 
| esdocs index="microservices-*" fields="time_taken" 
query="@timestamp:[now-1m TO now] AND time_taken: &gt;=0 AND log_message:\"returning results to the client\" AND service_name:INTEGRATION" 
| math "mean(time_taken)" 
| progress shape="gauge" label=true 
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} max=2000 
| render 
containerStyle={containerStyle backgroundColor="rgba(255,255,255,0)" padding="0px" opacity="1" border="0px none "}
</pre><div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/wxaNXxrBQGSzjk3qPqgoNA.jpg" data-uuid="wxaNXxrBQGSzjk3qPqgoNA" data-v="4" data-type="inline">
</div><figcaption>The average time taken in the last minute to return a result to a customer.</figcaption><pre class="prettyprint">filters 
| esdocs index="microservices-*" fields="time_taken" 
query="@timestamp:[now-1m TO now] AND time_taken: &gt;=0 AND log_message:\"returning results to the client\" AND service_name:INTEGRATION" 
| math "max(time_taken)" 
| progress shape="gauge" label=true 
font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} max=4000 
| render containerStyle={containerStyle backgroundColor="rgba(255,255,255,0)"}
</pre><div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/p1ZLk2qD9qfrQYVVWDoASB.jpg" data-uuid="p1ZLk2qD9qfrQYVVWDoASB" data-v="4" data-type="inline">
</div><figcaption>The maximum time taken in last minute to return a result to a customer.</figcaption><p>Next, we needed to apply our branding and ensure the team knew these metrics were for Hummingbird rather than for other CDL solutions. We uploaded two static images and moved them until we got the right look.
</p><div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/uG5ErVoafywKqx5KK1LEVx.jpg" data-uuid="uG5ErVoafywKqx5KK1LEVx" data-v="4" data-type="inline">
</div><p>The feedback was instant and very positive. If you compare the existing dashboards with the Canvas version, they look very different and Hummingbird immediately stands out.
</p><p>
	Clive Simpson CDL’s Head of Service Management said: <em>“CDL provides business critical systems, and our clients rely on us to facilitate their business transactions. We have service agreements in place, and we are committed to ensuring ‘five nines’ availability (99.999%). The use of the Elastic Stack, in particular Canvas, has provided Service Management with a real time business view of the CDL Hummingbird solution and what it is delivering to clients. It allows us to translate huge amounts of technical metrics into a business context and bring customer experience to the forefront of service delivery</em>
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt2ba15644386bcc19/5ce83624afd3fe5a19731057/cdl-service-works.jpg" data-sys-asset-uid="blt2ba15644386bcc19" alt="CDL Service Works" "="" style="display: block; margin: auto;">
</p><figcaption>Service Works</figcaption><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt9d5d1150eb2ff387/5ce83630a30d785319aa555b/cdl-service-hub-and-management.jpg" data-sys-asset-uid="blt9d5d1150eb2ff387" alt="Service Works Canvas dashboards" "="">
</p><figcaption>Close up of ServiceHub and Service Management</figcaption><h2>Expanding Canvas, combating insurance fraud</h2><p>With this quick win, we looked at two other use cases.
</p><p>The first was to show the overall journey that transactions were taking through Hummingbird.
</p><p>The Hummingbird journey goes through a number of microservices. The initial request is a stateful HTTP call. The message is put in a queue and processed by each of the microservices. The microservices perform tasks such as parsing, searching (Elasticsearch), making external API calls to data held by third parties and applying business rules. Our Canvas dashboard needed to show metrics for the current day, i.e., the numbers would increase during the day then reset at 00:00. The dashboard showed the following:
</p><ul>
	<li>Number of requests</li>
	<li>Number of searches</li>
	<li>Search results</li>
	<li>Number of documents stored</li>
	<li>Average response time (seconds) for external calls</li>
	<li>Average response time (seconds) for internal calls</li>
</ul><p>We added metric elements for each of the above; an example is shown below.
</p><pre class="prettyprint">filters
| escount index="microservices-*" 
  query="@timestamp:[now/d TO now] AND service_name:ELASTIC-SEARCH-CLIENT AND log_message:\"Search found results\""
| formatnumber "0,0"
| metric "INDIVIDUAL SEARCH REQUESTS" 
  metricFont={font family="'Sharp Sans'" size=96 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} 
  labelFont={font family="'Sharp Sans'" size=18 align="center" color="#FFFFFF" weight="normal" underline=false italic=false}
| render
</pre><p>We then added a background image and icons that were relevant to each metric.
</p><div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/LSVgBDkG9NQVuSwb3LXnz8.jpg" data-uuid="LSVgBDkG9NQVuSwb3LXnz8" data-v="4" data-type="inline">
</div><p>By this point, we felt sufficiently confident in our use of Canvas to expand the usage to our customers. One of Hummingbird’s use cases is tackling application misrepresentation or ‘quote manipulation’ which is an increasing problem for the insurance sector. Hummingbird has serviced up to 7 million requests per day in production. Powered by Elastic, we can identify the factors that people are changing in real time. For example, consumers may alter key details such as their annual mileage, no claims bonus, occupation or garaging details between quotations, in an effort to reduce their insurance premiums.
</p><p>We also engaged our creative team who provided the following design concept for a dashboard.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt3ab15174cf52876c/5cd46746b9d9b24a59f961bb/Dashboard_Infographics_Concept.jpg" data-sys-asset-uid="blt3ab15174cf52876c" alt="Dashboard_Infographics_Concept.jpg" width="878" height="480" style="width: 878px; height: 480px;">
</p><p>As you can see, design elements such as colour and font were specified to be in keeping with brand image and guidelines.<br>
</p><p>We created pie chart elements for a number of data fields we noted were subject to frequent changes, such as the consumer’s occupation, to monitor the number of different data entries being made.
</p><div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/Hh9ttmcREQar9ZvzuiMQoZ.jpg" data-uuid="Hh9ttmcREQar9ZvzuiMQoZ" data-v="4" data-type="inline">
</div><p>Achieving consistency is important for all brands in how they present themselves. In practical terms this will often mean adhering to branding guidelines. In our case it was important that Canvas provided us with the flexibility to be consistent with:
</p><ul>
	<li>The CDL lettering, the graphic CDL symbol and our strapline</li>
	<li>Use of standard fonts</li>
	<li>The use of a consistent colour palette and recognised colour systems such as CMYK or Pantone™</li>
</ul><p>We found most properties to be very customisable. We were able to apply our colour scheme and fonts to the chart, as well as altering its opacity to maintain the visibility of the background image. We also added the CDL logo in white which was appropriate given the dark background with little variation of the colour behind. By achieving this consistency with other customer facing publications we believe that a customer would recognise the dashboard as something we had created even if it did not have the CDL logo on it.
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt5c8e1957863144df/5cd5511386dfd0840b395a08/CDL-Canvas-1.png" data-sys-asset-uid="blt5c8e1957863144df" alt="" width="431" height="386" style="width: 431px; height: 386px;"><br>
</p><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt6aa401fe10319869/5cd4687326b60d975bc8bff8/Canvas-Custom-3.png" data-sys-asset-uid="blt6aa401fe10319869" alt="" width="264" height="241" style="width: 264px; height: 241px;">
</p><pre class="prettyprint">filters
| escount index="responses-*" query="timestamp:[now/d TO now] AND response.fullTimeOccCodeCount:2"
| formatnumber "0,0"
| metric "OCCUPATION CHANGES" 
  metricFont={font family="'Sharp Sans" size=60 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} 
  labelFont={font family="Sharp Sans" size=18 align="center" color="#FFFFFF" weight="bold" underline=false italic=false}
| render
</pre><p>The finished dashboard looks like this:
</p><div class="video embed-container" style="height: 319.725px;">
	<img style="width: 100%; margin: auto; display: block;" class="vidyard-player-embed" src="https://play.vidyard.com/6sxFzxb1jqgo2cb33qDtZj.jpg" data-uuid="6sxFzxb1jqgo2cb33qDtZj" data-v="4" data-type="inline">
</div><h2>Unlocking data and improving customer experience
</h2><p>In conclusion, over a few days, we were able to go from having no hands-on experience with Canvas to having three dashboards up and running. Our initial use case for the technology was proven as we were able to relay business-focused information in a clear, engaging way, whilst retaining the real time capabilities.
</p><p>Our next steps are to use the technology more widely in CDL and with our customers. For example, we are installing digital signage within our campus and this will be powered by the Elastic Stack and display Canvas dashboards. For customers, we will be including Canvas as an additional module in our data platform so they can continue to unlock the potential of data in visually striking and effective ways.
</p><hr><p><img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt25881969485b9e28/5cd45d369033f96a5b031b17/MattH-compressed.jpg" alt="Matt Houghton" width="118" height="170" "="" style="float: left; width: 118px; height: 170px; margin: 0px 10px 10px 0px;">
</p><p>Technical Consultant at CDL, working on data-driven projects like <a href="http://www.fasterthanfast.com/">Hummingbird</a> to personalise and simplify products and transactions for the millennial generation. CDL applies technologies such as machine learning, AI and big data to chat and voice interfaces, transforming the consumer experience to meet the expectations of today's digital consumer.
</p>

cdl_canvas_elastic-compressed.jpg

CDL-Canvas-Thumbnail-Cut.png

CDL: Visualising the power of data with Canvas and Elasticsearch

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Matthew Houghton

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Communication Preferences - ONLY for /communication-preferences

<p>提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/elastic-cloud-account-terms" target="_self">服务条款</a>，并且您同意通过您提供的上述联系方式接收<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">所选的通信</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Serverless GDPR Text

<p>提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/serverless-preview-terms" target="_self">服务条款</a>，并且 Elastic 可以使用您提供的上述详细信息与您联系，以向您介绍我们相关的<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">产品和服务</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。</p>

<p>By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.</p>

Cloud Trial GDPR Text

<p>提交即表示您同意 <a href="/cn/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud 服务条款</a>。我们将会按照 <a href="/cn/legal/privacy-statement">Elastic 的隐私声明</a>处理您的个人数据。
</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Newsletter GDPR Text

<p>提交即表示您确认您已阅读并同意我们的<a href="/cn/legal/terms-of-use" target="_self">服务条款</a>，并且 Elastic 可以使用您提供的上述详细信息与您联系，以向您介绍我们相关的<a href="/cn/legal/privacy-statement#how-we-use-the-information" target="_self">产品和服务</a>。如需了解更多信息，或想随时取消订阅，请参阅 <a href="/cn/legal/privacy-statement/" target="_self">Elastic 的隐私声明</a>。</p>

Explore similar demos

Overview

Speakers

Close

See more insights

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

The content on this page is not available in the selected language.

本页内容尚不支持所选语言。Elastic 正在不断努力，以实现对多种语言内容的支持。感谢您在此期间给予的耐心与陪伴！

Author

Articles by

Learn more

Watch now (no PT)

Watch now

See all top stories

All (no PT translation)

Contact information

Press Release

Share on Reddit

Share this story

Share by Email

Thank you for your interest!

Contact Info

Follow us on Youtube

Load More

Share on LinkedIn

Follow us on LinkedIn

Search Integrations

All Solutions

Video for

Follow us on Twitter

See when this webinar starts in my time zone

查看本次网络研讨会在我的时区的开始时间

Register to Watch

Register now

See All Posts

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

无法实时参加？注册后我们会给您发送录像。您还将收到相关内容的电子邮件。

Author

Articles by Matthew Houghton

CDL: Visualising the power of data with Canvas and Elasticsearch

Sign up for Elastic Cloud free trial