Design

Research and rationale

Our call to action link is built on the research completed by the DTA (Digital Transformation Agency, 2018). However, since the CTA is primary used to assist users to navigate to key areas of the site we updated the iconography and hover colours to be consistent with other navigation and directional links.

Iconography

We’ve used arrows over chevrons with animated hover to produce greater visual prominence. In our Design System chevrons are used to indicate a state change that happens within the page that doesn't result with the user being directed to another page, because CTAs are most often used to direct users to other areas of the site an arrow icon was chosen to better communicate this action.

Appearance

Our CTA links have a larger hit area then standard text links and include an animation for the hover state of the arrow to produce greater visual prominence.

View all design

We added a different icon for consistency of view all buttons. View all is a common link used at the end of navigation panels and link lists to take users to landing pages. The view all CTA needed to look visually distinct from other navigation items that included arrow icons but still feel related to the content above it. Because we wanted the icon to still feel connected to the links above, we chose a simple arrow encased in a circle so that it was clear it was also a navigation item.