Icons
Adds a contextual flourish and visual weight to elements such as alerts, menu items, navigation elements, unordered list items, and more.
Icons come from the 'Windows 10' set form Icons8. It is maintained by the Individual Marketplace UX Team.
These icons are used by applying one of many classes to a base HTML element; namely, <span class="icon"> tag.
Functional Icons
Use these icons to reinforce an action that the user can — or you otherwise need them to — take.
Examples
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
An icon used in an alert to convey that it's an error message, with additional .sr-only text to convey this hint to users of assistive technologies.
Non-Functional Icons
Non-Functional Icons come from the "Pastel" set of the Icons8 suite, and can be used for decorative purposes, such as those that reinforce information architecture. Non-Functional icons are not packaged in a typeface, but are implemented on an individual basis as SVGs.
Considerations when using icons
Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.
If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.
If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.
<span class="icon search" aria-hidden="true"></span>Images
Retina images
Now that Exchange Solutions has dropped support for all browsers can't handle the background-size CSS property, it is recommendded that all raster images be retina-compatible. This essentially means raster images should be output at at least twice their client-rendered dimensions, and then contstrained using the height and/or width CSS properties — or background-size property for background-images.
Here is a sample carrier logo, at its native resolution:
Here is the same image, constrained to 50% of its native dimensions:
If you're on a Retina (or device of similarly high pixel density) device, you should see an appreciable difference in image quality between the two examples above.
Responsive images
"Responsive" means that the image scales to the size (height, width, or both) of its parent container. Images should be rendered responsively where appropriate.
SVG images and IE 8-10
In Internet Explorer 8-10, SVG images using the .img-responsive class are disproportionately sized. To fix this, add width: 100% \9; where necessary. The framework doesn't apply this automatically, as it causes complications to other image formats.
Image shapes
Add classes to an <img> tag to quickly and easily style images.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Data Visualization
Health care and finances are both data-heavy aspects of modern life. Put them together, and ... ? Hoo, boy—that's a lot of data! Visualizations to the rescue!
The most common form of data visualization has been around for a looong time: charts!
We recommend using colors from the WTW Tertiary color palette, as they are bold and stand out well in chunks, like those you would see in several types of charts.
Bar Charts
A bar chart is a way of showing data as bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
Line Charts
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets.
Pie & Doughnut Charts
Pie charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. Doughnut charts are identical to pie charts, but have a cutout in the canter, rendring the data segments as arcs.
They are excellent at showing the relational proportions between data.
Additionally, doughnut charts offer the benefit of space to include meta information pertaining to the data set, such as an aggregate total. Example: total monthly expenditure in the center, and a breakdown of proportions by type in the surrounding arcs.
Radar Charts
A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.
Polar Area Charts
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
After much research and careful scrutiny, we have decided to use Chart.js for demonstration purposes. It is fully featured, and comes with delightful animations right out of the box. Check it out, but if it doesn't suit your needs, no worries—use what best suits your needs! Just remember to follow the visual representations depicted in these documents.