Aviva is one of the largest property and casualty insurance providers in Canada, holding a 10% market share as of 2023 and ranking among the top 3 insurers nationally.
The company has a strong focus on digital transformation and innovation, investing heavily in technologies like telematics, artificial intelligence, and data analytics to improve its products and customer experience.
As a Senior UX/UI Designer, I am proud to work at Aviva and to be responsible for creating user-friendly and visually appealing interfaces for various projects, including mobile applications, public websites, and internal platforms.
Branding & Accessibility
Here I am going to share the branding guide, design elements, and accessibility standards that I followed and helped to develop.
Why Accessibility is important? 16% of the global population – experience a significant disability today. Accessibility standards are removing barriers and ensuring that all users, regardless of their physical or cognitive abilities, can effectively engage with a product.
All colours, typography, and CTAs were created in compliance with AODA (Accessibility for Ontarians with Disabilities Act) standards in Ontario.
Buttons and links are developed in several states to meet accessibility standards and to be eye-catching visually. For example, a hover state changes the font colour and background of the button to indicate interactivity. As well as focus state where users can navigate through the page using the tab key on their keyboard, and the focus state will be applied to each element as they tab through. This not only makes the CTA more accessible but also visually appealing, which can increase the chances of conversion.
Pills are created in light pastel colours to serve as additional interactive design elements. Additionally, the UI design was developed to overcome specific technical limitations when placing a cross button (X) inside the main pill button. The Delete Hover state is designed as a child of the Hover state (parent), where the Hover state is highlighted first, followed by the Delete Hover state. This design makes both areas interactive, each with a different purpose.
