The Figma screenshots below are based on a set of sections that show the different breakpoints for each screen size, from largest to smallest ( 1600-951 / 950-701 / 700-501 / 500-351 / 350-320 ).
All the components on the page are taken from the component library and are a combination of Typography, form elements and CTA buttons. modals etc. each frame uses variables to set the modes for each device size:
Summary: My initial role at Suncorp was to collaborate with different parts of the Digital Insurance team (PO’s and lead UX Designer) to analyse the existing customer flow and apply the updated branding treatment to those sections. This involved working directly with AA Insurance brand.
This work involved a deep dive into the existing styleguide and design system, understanding the processes and applying design rationale for design decisions.
