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="/kr/legal/elastic-cloud-account-terms" target="_self">Elastic 서비스 약관</a>을 읽고 이에 동의하며, 위에 제공된 연락처로 <a href="/kr/legal/privacy-statement#how-we-use-the-information" target="_self">선택한 커뮤니케이션</a>을 수신하는 데 동의한 것으로 간주됩니다. 언제든지 수신을 거부할 수 있으며 자세한 내용은 <a href="/kr/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>제출하면 귀하가 Elastic <a href="/kr/legal/serverless-preview-terms" target="_self">서비스 약관</a>을 읽고 이에 동의하며, 위에 제공된 세부 정보를 사용하여 Elastic이 관련 제품 및 서비스에 대해 귀하에게 <a href="/kr/legal/privacy-statement#how-we-use-the-information" target="_self">연락할 수 있음</a>을 이해한 것으로 간주됩니다. 언제든지 수신을 거부할 수 있으며 자세한 내용은 <a href="/kr/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="/kr/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud 서비스 약관</a>에 동의하시게 됩니다. 개인 데이터는 <a href="/kr/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>제출하면 귀하가 Elastic <a href="/kr/legal/terms-of-use" target="_self">서비스 약관</a>을 읽고 이에 동의하며, 위에 제공된 세부 정보를 사용하여 Elastic이 관련 제품 및 서비스에 대해 귀하에게 <a href="/kr/legal/privacy-statement#how-we-use-the-information" target="_self">연락할 수 있음</a>을 이해한 것으로 간주됩니다. 언제든지 수신을 거부할 수 있으며 자세한 내용은 <a href="/kr/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

참여가 어려우신가요? 등록하시면 녹화 자료를 보내드리겠습니다. 이메일로 관련 콘텐츠도 받아보실 수 있습니다.

Small image for

On-demand webinar

Featured webinar

Register to Attend

Share on Facebook

Reset all

Upcoming webinar

View more posts

Print

Hosted by

Sign In to Attend

View next

Follow us on Facebook

Share

Highlights

Read less

You'll also receive an email with related content

이메일을 통해 관련 내용을 보내드리겠습니다.

Thank you for registering. We will send you a confirmation email soon.

등록해 주셔서 감사합니다. 곧 확인 이메일을 보내드리겠습니다.

Author

Articles by Matthew Houghton

CDL: Visualising the power of data with Canvas and Elasticsearch

Sign up for Elastic Cloud free trial