CYLO by IAG

Web Platform
Project Overview
CYLO is a web platform by IAG that enables Insurance Brokers to quickly and seamlessly obtain cyber insurance on behalf of their small to medium sized business (SMB) clients. CYLO caters for the end-to-end insurance journey from quote to bind and offers Brokers a one-stop shop to manage all of their SMB clients’ cyber insurance needs. With a cyber insurance policy, their clients know they're supported when cyber security incidents occur.
Project Details
Duration: 10 months

Team structure:
• 1 x Product Designer
• 1 x Service Designer (at the start of project)
• 8 x Software Engineers
• 2 x DevOps Engineers
• 1 x Product Manager
• 1 x Delivery Lead/Scrum Master

My role: For this project I led the product design & worked within a cross-functional agile scrum team. The stages that I was responsible for were:
• User flows
• User stories & backlog prioritisation
• Ideation
• Wireframing
• Prototyping
• Usability testing
• UI design
• Design system creation
• Branding
• Client management
Small to medium-sized businesses are seen as easy targets by cyber attackers due to their lack of resources, knowledge and protection against cyber attacks - in fact, 43% of all cyber attacks targeted SMBs. But, getting the right type of cyber insurance could be complex for SMBs and this is why they engage Brokers to do this on their behalf.

However the process for Brokers to obtain these quotes and manage their clients was frustrating as it involved multiple tools, outdated systems and lots of manual work.
The Problem
THE SEEDS OF THE IDEA
Before my involvement in the project, IAG were experimenting with a customer-facing product selling cyber insurance & assurance products to the Singapore market.

IAG wanted to retrofit this product for the Australian market, but after some validation of the B2C concept it was discovered that end customers find the process to get cyber insurance quite complex as the questions asked during the application needed specialist knowledge in order to get the right type of cyber insurance.

So a pivot was made to a B2B product offering to insurance brokers, as this would offer more value to the business and customer. This laid the foundations for the CYLO product.
Project Background
ANALYSING THE RESEARCH
We were approached by IAG to help design, build and launch the MVP for CYLO. I worked together with a service designer to analyse their research insights and business requirements. During this time we also conducted an alignment workshop with stakeholders to define the scope for MVP.

Throughout the project it was a challenge to engage with real end users, due to a combination of the business not seeing value in it and user recruitment challenges. The research that I used to define the product were based on internal SME insights from stakeholders with broker experience as well as stakeholder workshops. This was still valuable in shaping what was needed for an MVP.

Some of the key insights were:
• Users were frustrated with time being wasted by manual systems
• Poor user experience of systems made it hard to complete their tasks
• Inflexible quoting platforms not meeting user needs
• Systems were unable to support management of client information‍‍
Understand
Based on business and user needs, the MVP would:
• Offer a streamlined quote process with simpler questionnaire
• Make it easy to bind a quote and convert it to an active insurance policy
• Allow Brokers to manage their client's quotes and policies in one place

Using the insights and high-level overview of what the MVP and key user tasks needed to be, I was able to start mapping out user flows to identify design & system needs, and define how users could navigate through tasks in the most optimal way.

User flows were initially created for these key tasks:
• Create a new quote
• Continuing draft quotes
• Binding a quote
Define
STARTING WITH LO-FIDELITY
After feedback sessions with the client to align on the user flows, I wanted to quickly get an idea of the design and interactions of the product for frequent and quick client feedback, so I set about putting together lo-fidelity designs of the screens identified in the quote & buy flows.

I firstly focused on the screens that were the most important to the development of a valuable MVP, which were:
• Dashboard - where the Broker can quickly access their most important actions and get a snapshot of timely information that needs their attention
• Risk assessment form - this is the questionnaire the Broker completes to get a quote
• Quote options that the Broker is provided after completing the questionnaire
• My quotes - where the Broker can manage all of the quotes they've started, completed or have expired

Below are some of the initial wireframes:
Design
The biggest change was to the risk assessment form, as through reviews with engineers it was determined that the questions in the form were dynamic and conditional - so the Broker would only see certain questions depending on how they answered earlier sections of the questionnaire.

Based on this feedback, I made the switch from a single page form to a multi-page form to allow the backend time to load the appropriate conditional questions.

After several rounds of client feedback and design iterations, we felt confident that all designs for the Broker portal were meeting business and user needs, and I proceeded to take them to high-fidelity UI.
Design
ENTER THE UNDERWRITER
During the wireframe phase for the Broker portal, requirements changed and the MVP scope increased to include a portal for a new user - the insurance Underwriter. As the flows of key Broker tasks were fleshed out and visualised through the wireframes, it was discovered that for certain Broker tasks to be completed, there would need to be handover to an Underwriter.

The Underwriter would be needed to make adjustments to quotes and approve high-risk customers. So in parallel with designing the Broker portal and preparing the first key flow for release, I went back to the beginning to understand the Underwriter user and their needs from the CYLO platform.

NO MORE DESIGNING IN THE DARK
The bright spot of including the Underwriter user was that it opened up the opportunity to speak to real underwriters to help inform the designs. I firstly spoke to an SME in underwriting to get a sense of how they worked, which informed my user flows. Regular sessions were arranged with the SME to get feedback on initial wireframes, helping build confidence that we were building the right thing.

Below are some of the wireframes for the Underwriter portal:
Design
USABILITY TESTING & VALIDATION
Underwriters were also easier to recruit, so I was able to conduct usability testing of my wireframes to validate them and observe how Underwriters would use them.

I tested 3 key tasks with Underwriters:
• Comprehension of the portal's Dashboard
• Finding a quote that had been referred to them by a Broker
• Making changes to referred quotes
‍
Some of the key insights from the testing were:
• Working on referred quotes would be their most used action in the portal
• It was hard to notice what the requested changes were to the quote
• The process to send the quote back to a Broker was clunky and not what was expected

With these valuable insights captured, I was able to iterate and then move the Underwriter portal designs into high-fidelity.

Below are some of the initial hi-fi UI designs:‍
Validate
BRAND REFRESH
Early in the project, there was name change for the product to CYLO. Because of this, the initial branding for the previous product name wasn't suitable for the future growth and direction of CYLO, so I was tasked with a brand refresh that would then be applied to the high-fidelity UI design.

After discussions with CYLO's PM and Marketing reps, I got an idea of what they wanted and set out to freshen up the brand and have the UI more strongly reflect this rebranding. It wasn't a hard rebrand, as key brand colours remained, but it was an opportunity to introduce some different accent colours, as well as better fonts and illustrative style.

Below are some of the refreshed elements that better reflected the brand:
UI Design
DESIGN SYSTEM CREATION
As the product grew in size and scope, a robust design system was needed to support its future growth for the client. Throughout the project, I was working on the design system to use as a source of truth for myself and the engineers. The design system would also foster consistency in a continually growing product.

I defined foundational style guidelines, and created components that could be leveraged in the most efficient way possible to speed up UI design.

Below are some of the design system foundations and components:
UI Design
INCREMENTAL RELEASES
As we validated the features for both the Broker and Underwriter portals, and got sign-off from key stakeholders, our development team were able to incrementally release features based on our backlog prioritisation.

We firstly released an end-to-end quote flow, followed by the binding of a quote to convert to a policy. We then focused on the referral to an Underwriter flow for a Broker, and finally the Underwriter portal, where the referrals could be actioned.

CYLO, as a startup product is ever evolving and scaling, adding more and more features incrementally along its product lifecycle. I was thrilled to get to work on this product at its infancy and help define its (rather large) MVP iteration and set it up for future success. CYLO is due for commercial release in 2024.

Below are some of the final designs of the CYLO MVP we released:
Wrap-up
• Successful and on-time handover and release of end to end broker platform
• Fostered a better collaborative way of working with engineers to enable smoother iterative handoff
• Helped client see the value in end user engagement through valuable user testing insights
• Successful refresh of CYLO brand, giving client a brand they can move forward with for future growth and scalability of product
HOME
BT SMSF
Key Achievements
Powered by Webflow
EMAILLINKEDINInstagram