Our Work

UI redesign improves workflow for insurance companies

OneShield Software provides software solutions to the global insurance and financial services industry. OneShield wanted a modern UI design that could provide a more intuitive workflow for customer service rep…

Case Study Featured Image

Industry and practice areas

  • Private equity
  • Financial
  • Design
  • Digital transformation

UI redesign: before & after

The new UI, below, uses color contrasts of texts and components to provide a more intuitive user journey. Note the graphical images in the new interface, which help guide the user around the screen. Graphic elements help users distinguish between different types of navigation within the menu and can help users predict links and orient themselves.

Before After

Our approach to the UI redesign

To best serve the OneShield team, we approached the UI redesign in two phases.

First, we mapped out ways to help users more intuitively navigate the platform’s web pages. For example, to help users distinguish between navigation and action buttons, we proposed colors and drop shadows to visually reinforce different types of content.

Once we finalized the overall UI design, we then applied these new elements to more than 500 web pages across multiple products.

Ongoing product design support

In the second phase of the project, we transitioned to an advisory role to help OneShield implement the new standards. During the handoff and implementation phase, we continued to advise and provide design support to OneShield stakeholders, while also recommending future UX improvements.

Wireframes

To kick off the ideation process and ensure alignment on user goals, we created wireframes for the OneShield team. A wireframe is a simple skeletal visual layout that focuses on the user journey. Wireframes help stakeholders visualize high-level functionality and user workflow in an application. More specifically, wireframes help to:

  • Connect the site’s information architecture to workflows using placeholders in text elements
  • Clarify consistent ways for displaying particular types of information on the UI
  • Determine intended functionality in the interface through rapid iterations, feedback, and revisions
OneShield wireframes

What we did

  • UI redesign
  • UI recommendations that wouldn’t impact back-end development
  • Development-friendly patterns & treatments
  • Advisory role during implementation

UI focus areas

  • Main host application (navigation & sub-nav menus)
  • Landing page (focus on Agent view)
  • Details page (focus on Customer Detail page)
  • Search page
  • Wizard/Workflow screens (multi-step functions)

Deliverables

  • Alignment workshop report
  • UI design sprint reviews with stakeholders
  • Design style guide with development specifications
health quotes

Style Guide

Style guides are important to a brand’s identity and play a critical role in managing perceptions of a company. OneShield has many software products, so it was particularly important to apply consistent style elements that could help unify the OneShield brand across those products.

To help OneShield apply consistent style changes now and into the future, we developed a full style guide with UI elements, including:

  • Buttons
  • Toast messages
  • Badges
  • Kebabs
  • Menus
  • Filtering modals
  • Pop-up search & menus
  • Column modals
  • Forms with error states
  • Tables
  • Navigation elements
  • Color palette
  • Typography
  • Iconography
OneShield Style Guide

Results

Through carefully chosen design decisions and advisory services, we were able to help OneShield Software enhance their efforts to modernize their products. This collaborative effort enabled the client to provide a much needed modern update to its popular software, and improve workflow and efficiencies for sales reps.