Background

Berkley Technology Services (BTS) is the internal IT services provider for W.R. Berkley Corporation and its subsidiaries. At the time of my tenure at BTS, the UX team was spearheading a transition for the underwriting team’s user portal, constructing a visual and functional update.

When I joined the in-house UX team, a large portion of the work was outsourced to a third-party design firm. This is one such project where I build a new component based off an outsourced design, utilizing our in-house style guide to update the legacy user portal.

The addition of the dropdown functional would require a new component

• Improve user experience by adding a color-changing indicator to the component, visually representing different stages of the quote flow process.

• Learn how to build modular and flexible components with various functionality using Berkley UX’s Master Style Guide.

Berkley’s design system was built with Brad Frost’s Atomic Design Methodology in mind. All components were created and organized in a hierarchical structure.

The UX team’s style guide was organized into the categories of Atoms, Molecules, Organisms, and Templates.

Using the reference image, I recreated the dropdown using the Label and Progress indicator components, adding in an arrow icon. Additionally, the ability to add multiple list items within the dropdown was included utilizing the boolean properties to add up to 10 additional steps to the process.

I also took the time to update the “Progress Item'“ and “Progress Indicator” components to have various statuses aside from just “Selected” and “Unselected”, improving user clarity on what their current step is within the quote flow process.

The main challenge I found here was integrating this new component into the existing progress bar component. At the advice from my team, I was able to integrate this change in functionality utilizing Figma’s “instance swap” feature, allowing me to switch the base “Label” component with the “Label Dropdown Component”.

The final product came out to be a successful recreation of the original third-party reference image. It now followed the functionality and hierarchy of the UX team’s design system, allowing for seamless handoff to the Berkley development team and a feature optimized for our live portal.

During a check-in 3 months after my tenure at Berkley, I was informed that the component work that I had done was integrated into the Underwriting Team’s core quote workflow, seeing heavy use on the live user portal.

• The importance of a well-maintained and organized design system

  • Modular design framework made reverse-engineering larger components simple and straightforward

  • Allowed for seamless collaboration and contributions between design and development teams

  • Maintains styling consistency of W.R. Berkley and its subsidiaries

  • Promotes a more efficient workflow in creating large-scale design mock-ups

• Development of technical skills in Figma

  • Developed a cleaner workflow for component updates utilizing Figma’s features (i.e. auto-layout, instance swap, boolean properties)

  • Practice of design system maintenance and updates

The original quote flow progress indicator in the latest user portal mockup design does not adhere to the Berkley UX Team’s design system.