https://calumhale.com Calum Hale Design Wed, 04 Oct 2023 15:30:51 +0000 https://calumhale.com en https://calumhale.com/Home Tue, 07 Mar 2023 13:40:22 +0000 Calum Hale Design https://calumhale.com/Home https://calumhale.com/ERM-Decarbonisation-Platform Wed, 04 Oct 2023 15:30:51 +0000 Calum Hale Design https://calumhale.com/ERM-Decarbonisation-Platform ERM Decarbonisation Lending PlatformClient: ERM: Environmental Resources ManagementYear: 2023 ︎ The full project is password protected.Please email calum.hale@gmail.com for more details. https://calumhale.com/Sierra-Leone-DSTI-Education-Data-Hub Thu, 27 Apr 2023 06:36:08 +0000 Calum Hale Design https://calumhale.com/Sierra-Leone-DSTI-Education-Data-Hub Sierra Leone Education Data Hub Client: Sierra Leone Directorate of Science, Technology and Innovation (DSTI) Year: 2019–2020 Designer: Calum Hale Data Engineer: Isabel Beard Developer: Richard Pullinger Art Director: Kate Ashton Creative Direction: Duncan Swain ︎ Interactive Data Hub BriefThe Sierra Leone government came to us with the challenge to create a data explorer for all of the education data they had. This could then be used by ministers to check the performance of schools, and also by citizens to see how the schools their children go to are doing. OutcomeWe created an online tool that let the user see the school results from a country-wide view down to the district level. This tool allowed schools to be compared against measures of performance as defined by the government, with some of these measures also being able to be plotted geographically.My contributionI worked with the team to define the user experience and information architecture before creating the wireframes. As new data came in we had to update and adapt the wireframes. I then created the look &amp; feel for the visual design of the UI, iterating and collaborating with the Design Director, Kate, who worked on the overall DSTI branding in parallel. <img width="2560" height="1600" width_o="2560" height_o="1600" data-src="https://freight.cargo.site/t/original/i/07f5e19f5f60163020116c25823d00bfaf249481704dc4afe8549b5769a3e8ec/SL-Education-Tool-Mockup_crop.jpg" data-mid="176863586" border="0" src="https://freight.cargo.site/w/1000/i/07f5e19f5f60163020116c25823d00bfaf249481704dc4afe8549b5769a3e8ec/SL-Education-Tool-Mockup_crop.jpg" /> Visual Design <img width="2560" height="7364" width_o="2560" height_o="7364" data-src="https://freight.cargo.site/t/original/i/f01d13b21001ae7f31c8a066485c099310c2005ca7ab682ea041bf5e6547c995/01-screencapture-educationdatahub-dsti-gov-sl-education-overview-2019-12-06-00_22_26.png" data-mid="176864279" border="0" src="https://freight.cargo.site/w/1000/i/f01d13b21001ae7f31c8a066485c099310c2005ca7ab682ea041bf5e6547c995/01-screencapture-educationdatahub-dsti-gov-sl-education-overview-2019-12-06-00_22_26.png" /> <img width="2560" height="3600" width_o="2560" height_o="3600" data-src="https://freight.cargo.site/t/original/i/883edf6528456c971edc70d1177827f8c0b60ba355624eecfed818cd8bf77d98/02-screencapture-educationdatahub-dsti-gov-sl-education-schools-2019-12-06-00_22_51-crop.png" data-mid="176864289" border="0" src="https://freight.cargo.site/w/1000/i/883edf6528456c971edc70d1177827f8c0b60ba355624eecfed818cd8bf77d98/02-screencapture-educationdatahub-dsti-gov-sl-education-schools-2019-12-06-00_22_51-crop.png" /> <img width="2880" height="4924" width_o="2880" height_o="4924" data-src="https://freight.cargo.site/t/original/i/521b67c87ca27fa001d1794c9f3d2d8170067aa15b4fa32ba059b91ace760939/06-screencapture-educationdatahub-dsti-gov-sl-schools-6189-2023-03-24-23_56_58_compressed.jpg" data-mid="176864332" border="0" src="https://freight.cargo.site/w/1000/i/521b67c87ca27fa001d1794c9f3d2d8170067aa15b4fa32ba059b91ace760939/06-screencapture-educationdatahub-dsti-gov-sl-schools-6189-2023-03-24-23_56_58_compressed.jpg" /> <img width="2560" height="3076" width_o="2560" height_o="3076" data-src="https://freight.cargo.site/t/original/i/320c30f3a26e81e527e8bb35cfd8299f1bc8a5d468370e17c045e56739de8421/03-screencapture-educationdatahub-dsti-gov-sl-education-explorer-2019-12-06-00_23_13.png" data-mid="176864301" border="0" src="https://freight.cargo.site/w/1000/i/320c30f3a26e81e527e8bb35cfd8299f1bc8a5d468370e17c045e56739de8421/03-screencapture-educationdatahub-dsti-gov-sl-education-explorer-2019-12-06-00_23_13.png" /> <img width="2560" height="3474" width_o="2560" height_o="3474" data-src="https://freight.cargo.site/t/original/i/d50085a1ea70e8b034e8ca76f58fc2a6b3c976cea193e74a6103546ae3d3a54e/04-screencapture-educationdatahub-dsti-gov-sl-education-compare-2019-12-06-00_23_28.png" data-mid="176864312" border="0" src="https://freight.cargo.site/w/1000/i/d50085a1ea70e8b034e8ca76f58fc2a6b3c976cea193e74a6103546ae3d3a54e/04-screencapture-educationdatahub-dsti-gov-sl-education-compare-2019-12-06-00_23_28.png" /> <img width="2560" height="1378" width_o="2560" height_o="1378" data-src="https://freight.cargo.site/t/original/i/56dd89552742df02407b6bfb33efe348385b3baa22588e9095c87f6f9bff3b4e/05-screencapture-educationdatahub-dsti-gov-sl-education-map-2019-12-06-00_23_44.png" data-mid="176864324" border="0" src="https://freight.cargo.site/w/1000/i/56dd89552742df02407b6bfb33efe348385b3baa22588e9095c87f6f9bff3b4e/05-screencapture-educationdatahub-dsti-gov-sl-education-map-2019-12-06-00_23_44.png" /> App Styleguide for Dev <img width="1024" height="1264" width_o="1024" height_o="1264" data-src="https://freight.cargo.site/t/original/i/278d65f2ee11a88456a724a87433c32b7d617c184978ed1d1c915fd792c5ced9/190314-Colour.png" data-mid="176864729" border="0" src="https://freight.cargo.site/w/1000/i/278d65f2ee11a88456a724a87433c32b7d617c184978ed1d1c915fd792c5ced9/190314-Colour.png" /> <img width="1024" height="832" width_o="1024" height_o="832" data-src="https://freight.cargo.site/t/original/i/e9fcb6e89b1604c37823c46062afa22aa6a2e670d1039c760ed98f16072cfbe0/SL-Typography.jpg" data-mid="176864486" border="0" src="https://freight.cargo.site/w/1000/i/e9fcb6e89b1604c37823c46062afa22aa6a2e670d1039c760ed98f16072cfbe0/SL-Typography.jpg" /> <img width="1024" height="2792" width_o="1024" height_o="2792" data-src="https://freight.cargo.site/t/original/i/40cc2c67a24910c8a1fee87d41d34929ada0eee1269a247a5717ee36fc63a520/SL-Components.jpg" data-mid="176864484" border="0" src="https://freight.cargo.site/w/1000/i/40cc2c67a24910c8a1fee87d41d34929ada0eee1269a247a5717ee36fc63a520/SL-Components.jpg" /> <img width="1024" height="2600" width_o="1024" height_o="2600" data-src="https://freight.cargo.site/t/original/i/1db3578fe3c05ec88e7fd35f65d00009898d0f7a8314e6b8c5a2293c9aa8d6b6/SL-Spacing.jpg" data-mid="176864485" border="0" src="https://freight.cargo.site/w/1000/i/1db3578fe3c05ec88e7fd35f65d00009898d0f7a8314e6b8c5a2293c9aa8d6b6/SL-Spacing.jpg" /> UX Design <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/b1b84c30444121b7560a2b8e188ea68b409950d6baf4c93a1f8bbc6c33dfdb43/02-Map-view.jpg" data-mid="176865097" border="0" src="https://freight.cargo.site/w/1000/i/b1b84c30444121b7560a2b8e188ea68b409950d6baf4c93a1f8bbc6c33dfdb43/02-Map-view.jpg" /> <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/37baed6a03292a1ffbb8282a65e75859ba33dd173bbfbbdea9099e89973f1402/03-Data-table.jpg" data-mid="176865099" border="0" src="https://freight.cargo.site/w/1000/i/37baed6a03292a1ffbb8282a65e75859ba33dd173bbfbbdea9099e89973f1402/03-Data-table.jpg" /> <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/f4f4481d9a21d7b52984dfe1b96c29eff93b725479afbfaa5dae32bbca2668e0/04-Schools-table.jpg" data-mid="176865100" border="0" src="https://freight.cargo.site/w/1000/i/f4f4481d9a21d7b52984dfe1b96c29eff93b725479afbfaa5dae32bbca2668e0/04-Schools-table.jpg" /> <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/160a8a30930bb6857f0b721c70a72be756a26c331265e42fbf5c53b89a9ec84c/05-School-profile.jpg" data-mid="176865101" border="0" src="https://freight.cargo.site/w/1000/i/160a8a30930bb6857f0b721c70a72be756a26c331265e42fbf5c53b89a9ec84c/05-School-profile.jpg" /> <img width="2004" height="1416" width_o="2004" height_o="1416" data-src="https://freight.cargo.site/t/original/i/e1e7b2299b6e86fd2783d6d865af756c3e585599cdea0a00b99f235122ac5707/SL-UX-sketches_copmressed.jpg" data-mid="176865008" border="0" src="https://freight.cargo.site/w/1000/i/e1e7b2299b6e86fd2783d6d865af756c3e585599cdea0a00b99f235122ac5707/SL-UX-sketches_copmressed.jpg" /> <img width="848" height="1580" width_o="848" height_o="1580" data-src="https://freight.cargo.site/t/original/i/8a540b05f27bcce5ec5b5f6a4ac63e235273444891f4b606b7ac8ffd81b49655/SL-Wireframe-Sketches.png" data-mid="176865013" border="0" src="https://freight.cargo.site/w/848/i/8a540b05f27bcce5ec5b5f6a4ac63e235273444891f4b606b7ac8ffd81b49655/SL-Wireframe-Sketches.png" /> <img width="3264" height="2448" width_o="3264" height_o="2448" data-src="https://freight.cargo.site/t/original/i/07a2ae5cb893cb240158ad8c6ec26ed9d64aa8a79ec2b01d0f16c815eada979e/190403-Learning-outcomes-sketch-session_Edit.jpeg" data-mid="176865005" border="0" src="https://freight.cargo.site/w/1000/i/07a2ae5cb893cb240158ad8c6ec26ed9d64aa8a79ec2b01d0f16c815eada979e/190403-Learning-outcomes-sketch-session_Edit.jpeg" /> <img width="3264" height="2448" width_o="3264" height_o="2448" data-src="https://freight.cargo.site/t/original/i/1dcbefe24997035be9bff1402be8448e45d9d39ec1a52de7633f14524a1e8a32/190325-Filter-sketch-session.JPG" data-mid="176865001" border="0" src="https://freight.cargo.site/w/1000/i/1dcbefe24997035be9bff1402be8448e45d9d39ec1a52de7633f14524a1e8a32/190325-Filter-sketch-session.JPG" /> https://calumhale.com/TFL-Traffic-Incidents-Web-App Thu, 29 Sep 2016 16:48:49 +0000 Calum Hale Design https://calumhale.com/TFL-Traffic-Incidents-Web-App Transport for London: Traffic Accident Interactive DataViz Client: HABITAT III,&nbsp;The United Nations Conference on Housing and Sustainable Urban Development Year: 2016Design/Art Direction by: Calum Hale Web/UI Development by: Lucia Kocincova︎ Explore the interactive web app here: https://lucyia.github.io/tfl-accidents/ This interactive visualisation aims to display traffic accident information as kept by Transport for London for the year 2015. The traffic incidents are plotted geographically on the map, colour coded by severity, and there are some interactive summary statistics in the left panel. Interactive elements highlight on hover, and can be clicked to filter the selection. The supplementary information is broken down by vehicle type, by the age-range of the people involved in the incidents and also by the London borough in which the incident occurred. This project was created as part of a submission for the 'Habitat III' conference's "call for submissions" as part of 'cityvis.io' Lucia and I also got the chance to talk about our project at the second 'DataViz London' Meetup on 05 October 2016. <img width="1440" height="786" width_o="1440" height_o="786" data-src="https://freight.cargo.site/t/original/i/8c36594611e752f15acb292301eefaeded61e401d7490f3ae651612a0872d136/01-Screen-Shot-2016-09-29-at-16.47.05_cropped.jpg" data-mid="170832611" border="0" alt="Landing page" data-caption="Landing page" src="https://freight.cargo.site/w/1000/i/8c36594611e752f15acb292301eefaeded61e401d7490f3ae651612a0872d136/01-Screen-Shot-2016-09-29-at-16.47.05_cropped.jpg" />Home page with a left filter panel and a right panel introducing the site <img width="1440" height="786" width_o="1440" height_o="786" data-src="https://freight.cargo.site/t/original/i/8d346e6f1a936b7626b839e7d95f4fdc8f243e11d0a74f4e01684e42e37047e4/02-Screen-Shot-2016-09-29-at-16.48.18_cropped.jpg" data-mid="170832612" border="0" alt="Specific incident selected, with extra information in the right panel" data-caption="Specific incident selected, with extra information in the right panel" src="https://freight.cargo.site/w/1000/i/8d346e6f1a936b7626b839e7d95f4fdc8f243e11d0a74f4e01684e42e37047e4/02-Screen-Shot-2016-09-29-at-16.48.18_cropped.jpg" />Selecting a node shows the details of the incident <img width="1440" height="786" width_o="1440" height_o="786" data-src="https://freight.cargo.site/t/original/i/f6bb884946c61d3a42df32c1ef1f0385abaa4b92e29fbb145440b012cca448fb/03-Screen-Shot-2016-09-29-at-16.49.29_cropped.jpg" data-mid="170832613" border="0" alt="specific vehicle type (car) filtered" data-caption="specific vehicle type (car) filtered" src="https://freight.cargo.site/w/1000/i/f6bb884946c61d3a42df32c1ef1f0385abaa4b92e29fbb145440b012cca448fb/03-Screen-Shot-2016-09-29-at-16.49.29_cropped.jpg" />The user can filter by vehicle, in this case showing on incidents involving cars <img width="1440" height="786" width_o="1440" height_o="786" data-src="https://freight.cargo.site/t/original/i/5630c94ace4be7eae899d2fe1715081bb675f3cf4616ef67f6ff0cd8768baacc/04-Screen-Shot-2016-09-29-at-16.48.36_cropped.jpg" data-mid="170832614" border="0" alt="Specific age range (25&ndash;34) filtered" data-caption="Specific age range (25–34) filtered" src="https://freight.cargo.site/w/1000/i/5630c94ace4be7eae899d2fe1715081bb675f3cf4616ef67f6ff0cd8768baacc/04-Screen-Shot-2016-09-29-at-16.48.36_cropped.jpg" />Filtering by age-range <img width="1440" height="786" width_o="1440" height_o="786" data-src="https://freight.cargo.site/t/original/i/94957f1057c83dd12aa08148d9ab20fc75b8d61cacf0f5f9edc5ae2f9063d629/05-Screen-Shot-2016-09-29-at-16.49.40_cropped.jpg" data-mid="170832615" border="0" alt="Specific London borough filtered" data-caption="Specific London borough filtered" src="https://freight.cargo.site/w/1000/i/94957f1057c83dd12aa08148d9ab20fc75b8d61cacf0f5f9edc5ae2f9063d629/05-Screen-Shot-2016-09-29-at-16.49.40_cropped.jpg" />Filtering by London borough <img width="1440" height="786" width_o="1440" height_o="786" data-src="https://freight.cargo.site/t/original/i/e5fdf2adb0bfd016bddd10e881e5472037603e0c3b759e19b9dfec780b66b2cb/06-Screen-Shot-2016-09-29-at-16.49.49_cropped.jpg" data-mid="170832616" border="0" alt="All incident severities selected" data-caption="All incident severities selected" src="https://freight.cargo.site/w/1000/i/e5fdf2adb0bfd016bddd10e881e5472037603e0c3b759e19b9dfec780b66b2cb/06-Screen-Shot-2016-09-29-at-16.49.49_cropped.jpg" />Showing all incident severity types (’slight’ injuries aren’t displayed by default) <img width="1440" height="786" width_o="1440" height_o="786" data-src="https://freight.cargo.site/t/original/i/2a79c15f238e3875002562f58ba1aea545ae9960e0fd37edc979fcc61486d7c2/07-Screen-Shot-2016-09-29-at-16.53.59_cropped.jpg" data-mid="170832617" border="0" alt="Call for submission" data-caption="Call for submission" src="https://freight.cargo.site/w/1000/i/2a79c15f238e3875002562f58ba1aea545ae9960e0fd37edc979fcc61486d7c2/07-Screen-Shot-2016-09-29-at-16.53.59_cropped.jpg" />The home page of the Habitat III ‘Visualizing Cities’ call for submission page <img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/f9b495aa0c73b72ff121c99cbf90587507bb80c1b92d3a695611d8bd83f5c0c5/DatViz-London-05-Oct.jpg" data-mid="170832619" border="0" alt="Speaking at DataViz London, October 2016" data-caption="Speaking at DataViz London, October 2016" src="https://freight.cargo.site/w/1000/i/f9b495aa0c73b72ff121c99cbf90587507bb80c1b92d3a695611d8bd83f5c0c5/DatViz-London-05-Oct.jpg" />Luciya and I presenting our work at DataVis London Meetup&nbsp; https://calumhale.com/FMCG-Portfolio-Tool Thu, 05 Nov 2015 15:15:26 +0000 Calum Hale Design https://calumhale.com/FMCG-Portfolio-Tool Fast Moving Consumer Goods: Brand Portfolio Tool Designed at QuantumBlack Year: 2014UX Designer: Matt MillerVisual Designer: Calum HaleCreative Direction: Yves Boussemart - All data anonymised Design © QuantumBlack Visual Analytics Ltd. BriefA leading fast-moving consumer goods (FMCG) company need to be able to track its portfolio of products against sales and market share, while also predicting what would happen in the future if they released new products into the market. OutcomeWe designed and built an app that allowed a brand manager to see how their products were performing across world markets. The app included a scenario tool where the user could change metrics such as ‘advertising spend’ and see the predicted impact, driven by data science, on its future sales. My ContributionWorking under the Creative Director, I documented detailed user journeys to ensure the user didn’t get lost in the portfolio. Then working alongside senior visual designers, I helped create the look and feel for the app. I also oversaw the build of the application working with our development team. Visual Design <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/8be41058637de61c42b49ec9c6b612ae7ed35931fc01fe1754bf580ad2653078/01-Obsidian-Hero-Shots-Sanitised-1.jpg" data-mid="170832621" border="0" src="https://freight.cargo.site/w/1000/i/8be41058637de61c42b49ec9c6b612ae7ed35931fc01fe1754bf580ad2653078/01-Obsidian-Hero-Shots-Sanitised-1.jpg" />Worldwide overview <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/6c330eb49bdcba2156c7aa7b3075929f912587968bb5afb188833f325adb6baa/02-Obsidian-Hero-Shots-Sanitised-2.jpg" data-mid="170832622" border="0" src="https://freight.cargo.site/w/1000/i/6c330eb49bdcba2156c7aa7b3075929f912587968bb5afb188833f325adb6baa/02-Obsidian-Hero-Shots-Sanitised-2.jpg" />Viewing the performance of a particular brand category <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/4cbe74249709ebc6039b672954ebf74f9d9141231ca206e7fb472496de5f21a4/03-Obsidian-Hero-Shots-Sanitised-3.jpg" data-mid="170832623" border="0" src="https://freight.cargo.site/w/1000/i/4cbe74249709ebc6039b672954ebf74f9d9141231ca206e7fb472496de5f21a4/03-Obsidian-Hero-Shots-Sanitised-3.jpg" />Viewing the sales value vs. target over time for a particular brand <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/a3b55547f0d4ee329e9f7f1c9b26b1c3943c87bb13e36a15b2cf6abf4ee9a8aa/04Obsidian-Hero-Shots-Sanitised-4.jpg" data-mid="170832624" border="0" src="https://freight.cargo.site/w/1000/i/a3b55547f0d4ee329e9f7f1c9b26b1c3943c87bb13e36a15b2cf6abf4ee9a8aa/04Obsidian-Hero-Shots-Sanitised-4.jpg" />An interaction map showing how sales shift between brands over time, including new brand launches <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/e625f1c9196e1aa1d02615e3c65d861e373f80ee5bf7ab573b03c548e2404cd3/05-Obsidian-Hero-Shots-Sanitised-5.jpg" data-mid="170832625" border="0" src="https://freight.cargo.site/w/1000/i/e625f1c9196e1aa1d02615e3c65d861e373f80ee5bf7ab573b03c548e2404cd3/05-Obsidian-Hero-Shots-Sanitised-5.jpg" />Waterfall chart showing the gross margin for a specific brand <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/466b527e7d12492a16d7ad213923575d04149220c1a1609147852324c1f08e2e/06-Obsidian-Hero-Shots-Sanitised-6.jpg" data-mid="170832626" border="0" src="https://freight.cargo.site/w/1000/i/466b527e7d12492a16d7ad213923575d04149220c1a1609147852324c1f08e2e/06-Obsidian-Hero-Shots-Sanitised-6.jpg" />Tree map showing market share for a product category <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/3c1d3affed90f9f25a2080a81c61afd40fac08c643af46995c81e733d283a177/07Obsidian-Hero-Shots-Sanitised-7.jpg" data-mid="170832627" border="0" src="https://freight.cargo.site/w/1000/i/3c1d3affed90f9f25a2080a81c61afd40fac08c643af46995c81e733d283a177/07Obsidian-Hero-Shots-Sanitised-7.jpg" /> Charts showing sales value increase/decrease compared to total sales Visual Design Reference for Dev <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/30171e835006c652a571453dfc501b1b8a26016b4fbaf37cda5fcca5fa8f8e92/9.UI-Element-States-Sanitised-2-01.png" data-mid="176986497" border="0" src="https://freight.cargo.site/w/1000/i/30171e835006c652a571453dfc501b1b8a26016b4fbaf37cda5fcca5fa8f8e92/9.UI-Element-States-Sanitised-2-01.png" /> <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/5b31e3ba598296191f0215405ee666dcb96c63918bc2ed518ba714f62f45a5c8/9.UI-Element-States-Sanitised-1-01.png" data-mid="176986495" border="0" src="https://freight.cargo.site/w/1000/i/5b31e3ba598296191f0215405ee666dcb96c63918bc2ed518ba714f62f45a5c8/9.UI-Element-States-Sanitised-1-01.png" /> High-fidelity wireframes for key pages <img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/bfecaed1aa71a66a43bed77492d7e2c1730239715dd30adc7c2722155945f8dc/UX_Continous.png" data-mid="176986533" border="0" src="https://freight.cargo.site/w/1000/i/bfecaed1aa71a66a43bed77492d7e2c1730239715dd30adc7c2722155945f8dc/UX_Continous.png" /> <img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/73c3950b221acdfc732c72692488c26d0cdd2cf91566409fd864d311746d52c7/UX_Gross-Margin.png" data-mid="176986534" border="0" src="https://freight.cargo.site/w/1000/i/73c3950b221acdfc732c72692488c26d0cdd2cf91566409fd864d311746d52c7/UX_Gross-Margin.png" /> <img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/9990a0f63c4a98b8b5284e844894624ebd7d1f317e84ee49bf80b4e0e8364121/UX_Houses.png" data-mid="176986535" border="0" src="https://freight.cargo.site/w/1000/i/9990a0f63c4a98b8b5284e844894624ebd7d1f317e84ee49bf80b4e0e8364121/UX_Houses.png" /> <img width="2048" height="1536" width_o="2048" height_o="1536" data-src="https://freight.cargo.site/t/original/i/20d897b14880e51bd7fe31b32f4e4240ebee466afb109d3e0ad04313bd7a8a36/UX_Interaction-1.png" data-mid="176986536" border="0" src="https://freight.cargo.site/w/1000/i/20d897b14880e51bd7fe31b32f4e4240ebee466afb109d3e0ad04313bd7a8a36/UX_Interaction-1.png" /> Aesthetic moodboards <img width="4961" height="3508" width_o="4961" height_o="3508" data-src="https://freight.cargo.site/t/original/i/eec345c9c4e3f55ee0cbe3eaaf8815296e7b8a2b8e3f22cdd9f5f0e09b847c58/Aesthetics-Moodboard-v2_Page_1.png" data-mid="176986606" border="0" src="https://freight.cargo.site/w/1000/i/eec345c9c4e3f55ee0cbe3eaaf8815296e7b8a2b8e3f22cdd9f5f0e09b847c58/Aesthetics-Moodboard-v2_Page_1.png" /> <img width="4961" height="3508" width_o="4961" height_o="3508" data-src="https://freight.cargo.site/t/original/i/7010823526d89be36cebb3fda448d658364168bc41f1ce0d1405ad5d2b57ac8a/Aesthetics-Moodboard-v2_Page_2.png" data-mid="176986607" border="0" src="https://freight.cargo.site/w/1000/i/7010823526d89be36cebb3fda448d658364168bc41f1ce0d1405ad5d2b57ac8a/Aesthetics-Moodboard-v2_Page_2.png" /> <img width="4961" height="3508" width_o="4961" height_o="3508" data-src="https://freight.cargo.site/t/original/i/5d268e6e586e28628dae40bd15cbc6e5d51b22a51d099beddfdbb3996e18e09e/Aesthetics-Moodboard-v2_Page_3.png" data-mid="176986608" border="0" src="https://freight.cargo.site/w/1000/i/5d268e6e586e28628dae40bd15cbc6e5d51b22a51d099beddfdbb3996e18e09e/Aesthetics-Moodboard-v2_Page_3.png" /> <img width="4961" height="3508" width_o="4961" height_o="3508" data-src="https://freight.cargo.site/t/original/i/8687accbeda39f4183f2cd3bb3b157089391db42096b0dbe727f311e8f8542bc/Aesthetics-Moodboard-v2_Page_4.png" data-mid="176986609" border="0" src="https://freight.cargo.site/w/1000/i/8687accbeda39f4183f2cd3bb3b157089391db42096b0dbe727f311e8f8542bc/Aesthetics-Moodboard-v2_Page_4.png" /> Moodboards for dark, light and dark+light UI aesthetics https://calumhale.com/MS-Drug-iPad-App Sat, 24 Oct 2015 11:33:30 +0000 Calum Hale Design https://calumhale.com/MS-Drug-iPad-App Multiple Sclerosis: Drug Performance iPad App Designed at QuantumBlack Year: 2015 Lead Designer: Calum Hale Creative Direction: Yves Boussemart Design © QuantumBlack Visual Analytics Ltd. All data anonymised BriefA large pharmaceutical company were attending a medical conference in Europe and wanted to demonstrate their Research &amp; Development capabilities. We were tasked with creating an app to showcase the effectiveness of their Multiple Sclerosis drugs. OutcomeThe web app we designed allowed the user to explore data for three clinical trials, measuring three drugs and a control. The data viz solution had three axes so the user could see a ‘surface’ of performance, the highest being the best performing. Via the UI, the user can explore how different sizes and combinations of lesions in the brain lead to a certain percentage of brain volume loss. The graph could also be rotated to only show two metrics. My ContributionAs the lead designer, I came up with visual concepts for representing the data, defined the filter options and also created the look and feel of the user interface. I demonstrated the app in person on the client’s stand at the European medical conference. <img width="2560" height="1660" width_o="2560" height_o="1660" data-src="https://freight.cargo.site/t/original/i/f2fe94be5bf1398c989898479a4bfb041785c871cedef118e192814c09f91d35/01-MS-App_v7sanitised-ipad-grid-web.png" data-mid="170832601" border="0" alt="View of the MS app on iPads in various interaction states" data-caption="View of the MS app on iPads in various interaction states" src="https://freight.cargo.site/w/1000/i/f2fe94be5bf1398c989898479a4bfb041785c871cedef118e192814c09f91d35/01-MS-App_v7sanitised-ipad-grid-web.png" />View of the MS app in various interaction states <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/74066b16aac19e147a34a036af14ceec67f196870dc477d5a9a2c10f5a8b3395/02-MS-App_v7sanitised-ipads-1.2-web.jpg" data-mid="170832603" border="0" alt="View showing selected plane segments" data-caption="View showing selected plane segments" src="https://freight.cargo.site/w/1000/i/74066b16aac19e147a34a036af14ceec67f196870dc477d5a9a2c10f5a8b3395/02-MS-App_v7sanitised-ipads-1.2-web.jpg" />View showing selected plane segments <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/08fdc426df6d9142f0a9322d74172662436109dda133a042986298abfcb51559/03-MS-App_v7sanitised-ipads-2.2-web.jpg" data-mid="170832604" border="0" alt="Views showing comparisons between different drugs&rsquo; performance" data-caption="Views showing comparisons between different drugs’ performance" src="https://freight.cargo.site/w/1000/i/08fdc426df6d9142f0a9322d74172662436109dda133a042986298abfcb51559/03-MS-App_v7sanitised-ipads-2.2-web.jpg" />Views showing comparisons between different drugs’ performance <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/ff7a0db809baa23d641a63ab663240f545eada81f548a83e46779a38037738b2/04-MS-App_v7sanitised-ipads-2D-web_2.jpg" data-mid="170832605" border="0" alt="View showing how the chart can be rotated to show only two dimensions instead of three" data-caption="View showing how the chart can be rotated to show only two dimensions instead of three" src="https://freight.cargo.site/w/1000/i/ff7a0db809baa23d641a63ab663240f545eada81f548a83e46779a38037738b2/04-MS-App_v7sanitised-ipads-2D-web_2.jpg" />View showing how the chart can be rotated to show only two dimensions instead of three <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/42a83013148d110017124a1633c235b9111d971cb0492701aa460b6f5ade6eef/05-MS-App-Animation-2.gif" data-mid="170832606" border="0" alt="Animation showing how interacting with the sliders allows the user to selectively compare surface plane sectors" data-caption="Animation showing how interacting with the sliders allows the user to selectively compare surface plane sectors" src="https://freight.cargo.site/w/1000/i/42a83013148d110017124a1633c235b9111d971cb0492701aa460b6f5ade6eef/05-MS-App-Animation-2.gif" />Animation showing how interacting with the sliders allows the user to selectively compare surface plane sectors <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/9297a2d0d7f50930d252073dfb866d193c3e386ff2d1e53611e1e5e580aacf1f/06-IMG_0702.jpg" data-mid="170832607" border="0" alt="The app in situ on the client&rsquo;s stand at the medical conference in Barcelona" data-caption="The app in situ on the client’s stand at the medical conference in Barcelona" src="https://freight.cargo.site/w/1000/i/9297a2d0d7f50930d252073dfb866d193c3e386ff2d1e53611e1e5e580aacf1f/06-IMG_0702.jpg" />The app in situ on the client’s stand at the medical conference in Barcelona https://calumhale.com/Bill-Gates-2019-Global-Fund-Presentation Thu, 11 May 2023 05:47:39 +0000 Calum Hale Design https://calumhale.com/Bill-Gates-2019-Global-Fund-Presentation Bill Gates’ Presentation at the Global Fund, 2019 Client: Bill &amp; Melinda Gates Foundation Design &amp; Illustration: Calum Hale Art Direction &amp; Illustration: Kate Ashton Motion Graphics: Sam Burton Data Engineer &amp; geospatial plotting: Scott Reilly Creative Director: Duncan Swain ︎ Watch the speech on YouTube ︎ Read the transcript on the GatesNotes blog Brief Speaking for the Bill &amp; Melinda Gates Foundation at ‘The Global Fund to Fight AIDS, Tuberculosis and Malaria’ replenishment conference, Bill Gates needed to tell the story of how the Fund’s investment has improved healthcare around the world. Solution We worked with the speech writer at the Foundation to identify the key story points that needed visualising. We then storyboarded the presentation alongside the script, before designing the information graphics themselves. These were then turned into animations for the final presentation. My contribution I designed the data visualisation devices and worked with an animator to translate these into motion graphics. As part of the team I helped conceptualise different device types, before executing the final solutions in Adobe Illustrator. Bill Gates speaking at the Global Fund’s Sixth Replenishment Conference <img width="2561" height="1441" width_o="2561" height_o="1441" data-src="https://freight.cargo.site/t/original/i/2716e74bcd31796019792a603a666b1c343bd756aab7145aa1f3e187de0e9dcd/02-Malaria.png" data-mid="178698027" border="0" src="https://freight.cargo.site/w/1000/i/2716e74bcd31796019792a603a666b1c343bd756aab7145aa1f3e187de0e9dcd/02-Malaria.png" /> Data visualization showing the decrease in Malaria deaths vs the increase in bed nets distributed from 2000–2019 <img width="2560" height="1441" width_o="2560" height_o="1441" data-src="https://freight.cargo.site/t/original/i/cb1bbacc7512db870ba85e6d83b6e42ec4b45f32e822abd7304c80a58fd743ce/03b-HIV.png" data-mid="178698056" border="0" src="https://freight.cargo.site/w/1000/i/cb1bbacc7512db870ba85e6d83b6e42ec4b45f32e822abd7304c80a58fd743ce/03b-HIV.png" /> <img width="2560" height="1441" width_o="2560" height_o="1441" data-src="https://freight.cargo.site/t/original/i/9b8d9bb719a308d54143affedad3fe15342ad47a076851b532cfc35154550dd3/03c-HIV.png" data-mid="178698057" border="0" src="https://freight.cargo.site/w/1000/i/9b8d9bb719a308d54143affedad3fe15342ad47a076851b532cfc35154550dd3/03c-HIV.png" /> <img width="2561" height="1441" width_o="2561" height_o="1441" data-src="https://freight.cargo.site/t/original/i/2463828d1e3781725123a10d5eb39387cbd41e4613cf08a47b31b101ec5c92d7/03d-HIV.png" data-mid="178698058" border="0" src="https://freight.cargo.site/w/1000/i/2463828d1e3781725123a10d5eb39387cbd41e4613cf08a47b31b101ec5c92d7/03d-HIV.png" /> <img width="2561" height="1441" width_o="2561" height_o="1441" data-src="https://freight.cargo.site/t/original/i/fb59a9697b9234cb818ca34592539678760dc4705fd21562168c1adb4fbf3c9b/03e-HIV.png" data-mid="178698059" border="0" src="https://freight.cargo.site/w/1000/i/fb59a9697b9234cb818ca34592539678760dc4705fd21562168c1adb4fbf3c9b/03e-HIV.png" /> Beeswarm chart showing the rate of HIV deaths decreasing as Development Assistance for Health spending on HIV increased, from 2000–2017 <img width="2560" height="1441" width_o="2560" height_o="1441" data-src="https://freight.cargo.site/t/original/i/e1a4674bdb9d29323cadb50f4a9a09d4db00c1c03f3eb698b3ea1f3ecb3b878b/04-Malaria-Map.png" data-mid="178698060" border="0" src="https://freight.cargo.site/w/1000/i/e1a4674bdb9d29323cadb50f4a9a09d4db00c1c03f3eb698b3ea1f3ecb3b878b/04-Malaria-Map.png" />Map showing the Malaria incidence rate for Zambia in 2017 <img width="2560" height="1441" width_o="2560" height_o="1441" data-src="https://freight.cargo.site/t/original/i/c2c9917c73de9e0647f94021c94b07895ec02c2eb038163abe6e46e1c55b07d0/05d-Innovations.png" data-mid="178698061" border="0" src="https://freight.cargo.site/w/1000/i/c2c9917c73de9e0647f94021c94b07895ec02c2eb038163abe6e46e1c55b07d0/05d-Innovations.png" /> Illustrations showing the innovations in preventing malaria, TB and HIV https://calumhale.com/Formula-1-Car-Positioning-Diagram Thu, 27 Apr 2023 10:52:30 +0000 Calum Hale Design https://calumhale.com/Formula-1-Car-Positioning-Diagram Formula One Car Positioning Diagram Client: Formula One Management Year: 2018 ︎ The full project is password protected.Please email calum.hale@gmail.com for more details. <img width="1200" height="750" width_o="1200" height_o="750" data-src="https://freight.cargo.site/t/original/i/04fe53c8751e541157e02ed91f3199eb7e1c1970f1424d82bd8ea817b9f95071/F1-logo-red-on-black-e1511528736760.jpeg" data-mid="177613492" border="0" src="https://freight.cargo.site/w/1000/i/04fe53c8751e541157e02ed91f3199eb7e1c1970f1424d82bd8ea817b9f95071/F1-logo-red-on-black-e1511528736760.jpeg" /> https://calumhale.com/Airport-Baggage-Targets-Visualization Sun, 11 Oct 2015 20:45:47 +0000 Calum Hale Design https://calumhale.com/Airport-Baggage-Targets-Visualization Airport Baggage Targets Visualization Designed at QuantumBlack Year: 2015 Designer: Calum Hale Creative direction: Yves Boussemart Design © QuantumBlack Visual Analytics Ltd. All data anonymised Quantumblack investigated optimising the allocation of arriving baggage from the gate to terminal for a major airport hub in Asia. I designed a way of seeing if the time for the bag to arrive at baggage reclaim was over or under target. The size of the bubble is the number of flights per year that gate receives, the size of the circle segment is the potential target improvement, the inner ring is the first bag target, and the outer ring is the lsat bag target, with the circumference of the circle being the range from 0% to 100%. <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/a7909df655059665c56f9b056a903e2896783a889aa07a14116424bb13410fc1/01-Airport-Visualisation.jpg" data-mid="170832647" border="0" alt="Final airport baggage targets visualisation" data-caption="Final airport baggage targets visualisation" src="https://freight.cargo.site/w/1000/i/a7909df655059665c56f9b056a903e2896783a889aa07a14116424bb13410fc1/01-Airport-Visualisation.jpg" />Final airport baggage targets visualisation <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/db689b059a92d01234c336860fcf7321ced0470729f15295318189ed6d016064/02-First-bag.jpg" data-mid="170832648" border="0" src="https://freight.cargo.site/w/1000/i/db689b059a92d01234c336860fcf7321ced0470729f15295318189ed6d016064/02-First-bag.jpg" /> <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/1858fa38a2749b69be12b5c2c8569eaac55ba56fb9be53eb6e9a459f1f068adc/03-Last-bag.jpg" data-mid="170832649" border="0" alt="Pie charts created by&nbsp;data scientists to help plot the values to be geographically placed" data-caption="Pie charts created by&nbsp;data scientists to help plot the values to be geographically placed" src="https://freight.cargo.site/w/1000/i/1858fa38a2749b69be12b5c2c8569eaac55ba56fb9be53eb6e9a459f1f068adc/03-Last-bag.jpg" />Pie charts created by&nbsp;data scientists to help plot the values to be geographically placed <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/b529b52f9b112241b4c42fe398320655d4a96e975bb325d66fb5f48a51d63636/04-Visualisation-Tests.jpg" data-mid="170832650" border="0" alt="Concept designs for displaying the baggage delay information" data-caption="Concept designs for displaying the baggage delay information" src="https://freight.cargo.site/w/1000/i/b529b52f9b112241b4c42fe398320655d4a96e975bb325d66fb5f48a51d63636/04-Visualisation-Tests.jpg" />Concept designs for displaying the baggage delay information <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/a0478aa013b2b5958612d87c0eeec63869e7deff45124d21448f7c95abab6b7d/05-Airport-Plan.jpg" data-mid="170832651" border="0" alt="Airport schematic created for plotting data onto" data-caption="Airport schematic created for plotting data onto" src="https://freight.cargo.site/w/1000/i/a0478aa013b2b5958612d87c0eeec63869e7deff45124d21448f7c95abab6b7d/05-Airport-Plan.jpg" /> Airport schematic created for plotting data onto https://calumhale.com/Formula-One-TV-Infographics Mon, 30 Nov 2015 14:32:20 +0000 Calum Hale Design https://calumhale.com/Formula-One-TV-Infographics Formula One 2014/15 Broadcast Information Graphics Designed at QuantumBlack Year: 2014 Lead Designer: Calum Hale Creative Direction: Yves Boussemart Design © Formula One Group &amp; QuantumBlack Visual Analytics Ltd QuantumBlack was commissioned to produce a series of information graphics to help Formula One viewers understand the new rules following an engine formula change. As lead designer and domain expert, I drove the information design aspect of the television graphics, whilst complying with the 2013/14 F1 brand guidelines. QuantumBlack partnered with a leading UK visual effects house to ensure the designs were up to broadcast standard. The new graphics package was seen by a global audience of 425m people during the 2014 season, acting as a visual aid to the commentators of global media networks throughout the races. <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/deb7c3414dc759c1ff4d38e3a124001124eac0e8ed9a2b0686a2e7c5e9e53392/151118-F1-TV-Graphics-1.jpg" data-mid="170832565" border="0" src="https://freight.cargo.site/w/1000/i/deb7c3414dc759c1ff4d38e3a124001124eac0e8ed9a2b0686a2e7c5e9e53392/151118-F1-TV-Graphics-1.jpg" /> Broadcast infographic chart showing the gap between drivers Fernando Alonso (Ferrari) and Daniel Ricciardo (Red Bull Racing) narrowing each lap <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/d276d26a37c589ed6fdeffb28d3f12683ac6b662dd1871f15182eca830f1946f/151118-F1-TV-Graphics-2.jpg" data-mid="170832567" border="0" src="https://freight.cargo.site/w/1000/i/d276d26a37c589ed6fdeffb28d3f12683ac6b662dd1871f15182eca830f1946f/151118-F1-TV-Graphics-2.jpg" />Broadcast&nbsp;infographic chart showing the change in gap from laps 40–49 between Alonso and Ricciardo <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/25c9c187de100e09ffc9680129f1174ce2f3a6adf608e5a9ed5e42a1ebeffb9b/151118-F1-TV-Graphics-3.jpg" data-mid="170832569" border="0" src="https://freight.cargo.site/w/1000/i/25c9c187de100e09ffc9680129f1174ce2f3a6adf608e5a9ed5e42a1ebeffb9b/151118-F1-TV-Graphics-3.jpg" /> Concept graphic showing a timeline of all the drivers’ positions <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/7935baf15fc53c5581e5c85b3c0b75ed278c7346e4491b99930d2ad3838bb60d/151118-F1-TV-Graphics-4.jpg" data-mid="170832570" border="0" src="https://freight.cargo.site/w/1000/i/7935baf15fc53c5581e5c85b3c0b75ed278c7346e4491b99930d2ad3838bb60d/151118-F1-TV-Graphics-4.jpg" />Expanded timeline concept graphic shows how the gaps between drivers change over the laps <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/ed422db27319b56845a7b30405368b05374b38450d6f28f7865d54c238cfc624/151118-F1-TV-Graphics-5.jpg" data-mid="170832571" border="0" src="https://freight.cargo.site/w/1000/i/ed422db27319b56845a7b30405368b05374b38450d6f28f7865d54c238cfc624/151118-F1-TV-Graphics-5.jpg" />Concept graphic showing driver position timeline and top 12 drivers’ tyre type and number of laps used <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/8155b134efb3c40d0c4a94310c031147fe0536805eaac124467cdac4eca5dfe5/151118-F1-TV-Graphics-6.jpg" data-mid="170832572" border="0" src="https://freight.cargo.site/w/1000/i/8155b134efb3c40d0c4a94310c031147fe0536805eaac124467cdac4eca5dfe5/151118-F1-TV-Graphics-6.jpg" />Concept graphic showing timeline graphic and position change markers <img width="2560" height="1707" width_o="2560" height_o="1707" data-src="https://freight.cargo.site/t/original/i/b6428df1ba78c47f69ed32306bf4d79e4f41af53203b7220289c7dfa98fb212e/151118-F1-TV-Graphics-7.jpg" data-mid="170832573" border="0" src="https://freight.cargo.site/w/1000/i/b6428df1ba78c47f69ed32306bf4d79e4f41af53203b7220289c7dfa98fb212e/151118-F1-TV-Graphics-7.jpg" /> Concept graphic displaying car metrics and details