SHA Specialist Underwriters approached New Media Labs to build the Pocket Underwriter as a website on New Media Labs’ custom Content Management System (CMS) platform. Subsequently it was moved to a modern flat file CMS, using Strapi.
Build the Pocket Underwriter as a website on the Strapi (CMS) platform. The ability to generate quotes, put the quote on-risk once the client has approved the quote, as well as to renew policies that are reaching their annual renewal date.
SHA's idea to create the Pocket Underwriter came about with insurance brokers in mind. Discussing legal liability issues with new and prospective clients has always been a tricky issue for brokers.
- The ability to generate quotes
- Put the quote on-risk once the client has approved the quote, as well as
- To renew policies that are reaching their annual renewal date.
The application
The Pocket Underwriter is designed to be a “specialist” that helps brokers explain complex insurance covers to their clients, identify risk areas, identify appropriate covers, and keep a record of each client(s) session.
Architecture
The website was built on top of the Strapi CMS which uses a tiered architecture and object oriented design:
- Data Access Layer
- SQL Database
- Entity Framework
- Business Layer - NML CMS
- Content Manager to create, store and edit content, and also allows moving content between states such as draft, published and archived.
- Media Manager to upload and delete images and documents.
- User Manager to create, remove and modify users as well as their roles in the application.
- Menu Manager to view and edit menus.
- Custom CMS functionality on the SHA system:
- Reporting to download reports regarding quotes, policies and CPD information.
- Quoting Engine Data to upload files and data can be imported if needed.
- Broker management to view broker information and bulk import broker users.
Design
The site was designed to communicate crucial yet relatively bland information in a captivating fashion. The design needed to aid the consultants in closing more sales and was thus created to be aesthetically pleasing, user friendly and deliver information as effectively as possible.
User activity was also optimised for analytics tracking, reporting and documentation purposes. A unique breadcrumb system was created to aid navigation across devices whilst remaining consistent in user experience and appearance.
NextJs is used on the the front end, enabling session control and user guidance as well as for interactive calculation. Iconography and other visual resources are rendered via SVG to ensure lightness, crispness and re-usability. CSS animations and transitions are used for interaction, leading to smooth, delightful use. The system code was meticulously implemented and has undergone rigorous device and browser testing.
Due to the wide range of industries covered by the application, an icon library of over 50 icons was created. All icons were created to be easily readable on a constrained screen size, and simultaneously also look good on larger screen sizes. Visual consistency across all the icons was also of great importance.
The site was created to support a wide variety of devices and browsers mainly due to consultants using their own devices, and to provide clients with ease of access to information.
Tools
- Technology
- Asp.net MVC 4
- Entity Framework
- Microsoft SQL Server
- Unity
- NextJs/React
- Hangfire
- Redis
- HiQPdf
- Responsible for the communication between the application layer and the data layer
- Content Manager to create, store and edit content. Also allows moving content between states such as draft, published and archived.
- Media Manager
- To upload and delete images and documents.
- User Manager
- To create, remove and modify users as well as their roles in the application.
- Custom CMS functionality on the SHA system
- Reporting to download reports regarding quotes, policies and CPD information. Quoting Engine Data to upload files and data can be imported if needed. Broker management to view broker information and bulk import broker users.
.webp)
.png)