Introduction
National Truck League Insurance Brokers (NTL) is an insurance broker for fleets and their drivers. They have been facing a loss of clients because of the state of their current platform. Through the acquisition by Westland Insurance and with our help to redesign and streamline the platform, our goal is to retain but also attract new clients.
Key achievements
- Successfully delivered all design deliverables by the deadline
- Received positive validation through user testing
Research
Outdated systems creating roadblocks for growth
While NTL's client platform was one of the pain points, their own admin system was another. Both systems were not connected, so a lot of their processes involving generating policies or certificates were done manually.
This multi-phase project involved a discovery workshop which was conducted before I was brought on. In the discovery, they determined 3 persona types: the Client HR Manager who is the main user of the client portal, the Westland Admin who creates a client and sets up their policy and the Westland Super Admin who creates the master policies for the Admin.
As a team of 2 (plus a Design lead), I was involved in building user flows which encompassed features for all of the personas, however the actual design implementation for this first phase only consisted of the Client HR Manager and a portion of the Westland Admin.
Iterations
Dashboard
As the dashboard provides users' first impression, I included quick links to core platform features. Looking at the Client HR Manager’s needs, I chose to highlight important notifications, provide easy access to documents that would be distributed and a list of drivers with outstanding documents.
Following existing design guidelines, I kept the dark-themed side navigation for strong page contrast. To emphasize the quicklinks, I added icons and larger heading styles.
For better layout balance, I expanded the important notifications section and grouped the representative contact with the drivers list. The documents card was placed at the bottom, designed to accommodate additional uploads from the Westland Admin.
My Company
This page is the core of the client’s company profile. It displays their basic contact information along with information about their policy, drivers, invoices and a changelog. In the policy tab, the table displays their policy name and number, it’s effective date, status, whether it the policy was mandatory or optional and its policy booklet. The user also has the ability to edit their company profile as is shown on the page.
Another section I worked on was the Invoices. I displayed it in a simple list as invoices are provided monthly. As the invoice total would generally be the same amount each month, I chose to highlight the invoice date instead.
File setup, organizing components and variables
More on the file organization side of things, I had great joy in setting up the file for both wireframes and UI work. To make the progress and information of each feature clear, I created a status component that states the feature, the current status (in progress, reviewed or approved) which user this applies to, the associated ClickUp ticket and Miro user flow.
On the UI file, I set up variables and styles following Westland’s existing design system. I then updated our local components to match the Westland branding while optimizing each component with properties for maximum efficiency. While we had their design system as a foundation, there were quite a lot of custom components that we had to create to fit our platform. I made sure to make the components on brand and thankfully there was no requirement that we had to follow their design system completely.
Outcomes
Validating our solution and next steps
While a few of us were working on UI, another team member conducted user testing with the wireframes. The participants revealed that a lot of key features required for a HR Manager was missing from the current portal and what we have redesigned would undoubtely improve their workflow.
The next phase for this project will include the engineering team coming in to build the portal for the Client HR Manager. In the meanwhile, the design team will complete UI for the Westland Admin and build out the wireframes for the Westland Super Admin.
Reflection
Navigating complexity
- Not being involved in the discovery phase limited my initial understanding of the project compared to other team members.
- Understanding the policy process was challenging since we lacked access to the original system and multiple roles were involved. When I noticed confusion around the workflow during team alignment with engineering, I took initiative to create a mini service blueprint that clarified each role's journey and responsibilities.
- Adapting to their existing design system was difficult as we found challenges with the way it was set up.