BTP Underwriting

calendar When: 2023-2024

calendar Team:Design Mgr, 2 Designers (1 Prototyper 🤓)

calendar My Role: Sr. Product Designer - (prototyping)

calendar Tools: Figma

Background

Underwriting is the process of evaluating, assessing, and assuming risk in financial or insurance transactions. It involves determining whether a particular application or transaction is acceptable based on certain criteria, and if so, under what terms and conditions. This process is critical in industries like insurance, banking, and securities.

Project Details

A new Business Technology Platform (BTP) product for underwriting was needed to create a new workspace within the platform and update the existing product currently in use.

I contributed by prototyping interactive screens to help engineering assess feasibility, provide product owners with tangible designs, and gather feedback from a small focus group of users, ensuring the solution addressed key challenges effectively.

Prototyping figma

For prototyping, I leveraged Figma's new "variables" features to enhance interactivity and realism, utilizing Boolean variables for toggling states and String variables for dynamic text inputs.

Cleaning up CSV uploaded files

Data table editing

Data Manipulation Interaction

Component Library figma

My Role: Designer
Project: ( Component Library - Product Design System )

As part of the design system team, I was responsible for building and maintaining Figma components, ensuring they aligned with the current branding and design needs of products in production. This involved:

  • Building and Maintaining Figma Components: I created and managed reusable UI components within Figma, ensuring they were consistent, efficient, and scalable across various product needs.
  • Alignment with Product Branding: I ensured that all components adhered to the product’s branding and design guidelines, helping maintain a cohesive visual experience across all platforms.
  • Ensuring Consistency with Storybook and Tailwind: I worked to ensure that Figma components were aligned with the established Storybook and Tailwind frameworks, helping facilitate smooth development handoff and maintaining design consistency throughout.

Sort

Usage & Guidelines

Purpose & Use

Sort components let users organize data by criteria like alphabetical order, price, or date, offering quick control over how information is displayed without needing to refresh or navigate away.

Best Practices
  • Provide clear options (e.g., ascending/descending, or multi-criteria sorting).
  • Indicate the current sorting state with a visual cue (e.g., arrows or icons).
  • Use logical defaults (e.g., sorting by “most recent” or “highest rated”).
  • Allow easy toggling between options (e.g., clicking on the header to change sort order).
When NOT to Use
  • For data that doesn’t need sorting (e.g., if the order is fixed or doesn’t make sense to sort).
  • If the sorting options are irrelevant to the user's task.
  • When the data is too large and sorting could take significant time (consider filters or pagination instead).

Sort components can greatly enhance usability by giving users control over their data, but they can backfire if options are unclear or misused. Stick to logical defaults, and always keep the user informed about what’s happening.

Progress Bar

Usage & Guidelines

Purpose & Use

Progress bars display the completion percentage of a task, offering a visual representation of how long the task will take. They are ideal for tasks with a predictable duration, like file uploads, downloads, or multi-step forms.

Best Practices
  • Show progress in real-time to keep users informed as tasks proceed.
  • Ensure accuracy—do not fake progress, as this can lead to user distrust.
  • Consider adding an ETA (Estimated Time of Arrival) or a completion milestone for longer tasks.
When NOT to Use
  • For tasks with very short durations (use a spinner instead).
  • When the task's duration is unpredictable or indeterminate (e.g., waiting for a response from an external server).
  • If the task requires user input or interaction that could delay progress, as it might cause confusion.

Progress bars help manage expectations by showing real progress, but they must be accurate and informative to avoid frustration. Use them only when task duration is predictable.

Progress Circle

Usage & Guidelines

Purpose & Use

Progress circles visually represent task completion as a percentage, often used in places where space is limited. They work well for tracking goals, uploads, or system statuses in a more compact format than traditional progress bars.

Best Practices
  • Keep the percentage visible within or near the circle for clarity.
  • Use smooth animations to make progress feel dynamic and responsive.
  • Ensure proper contrast so the progress is easily distinguishable.
  • Match the style to the UI—thicker strokes for bold emphasis, thinner for subtle indicators.
  • Consider using color cues (e.g., green for completion, red for errors) to reinforce meaning.
When NOT to Use
  • If precise progress tracking is needed—bars often provide clearer readability.
  • When space is not a constraint—bars are generally more intuitive for horizontal tracking.
  • For very short or indeterminate tasks—use a spinner instead.

Progress circles are a great way to display progress in a compact and visually appealing way, but they should be used when space is limited and the progress percentage remains clear.

Spinner

Usage & Guidelines

Purpose & Use

Spinners indicate that a system is working on a task without a known duration, such as loading search results, submitting a form, or processing data. They reassure users that something is happening without providing a specific time estimate..

Best Practices
  • Show immediately after an action to provide instant feedback.
  • Use localized spinners instead of full-page blocking when possible.
  • Pair with contextual text (e.g., "Loading…") for better clarity.
  • Keep animations smooth and lightweight to avoid unnecessary distraction.
  • Ensure accessibility by using ARIA attributes or alternative indicators for screen readers.
When NOT to Use
  • For long processes—use a progress bar to show estimated time instead.
  • If the task is too fast (<1 second) or runs in the background.
  • When it blocks user interaction unnecessarily, leading to frustration.

Spinners are useful for short wait times but can be frustrating if misused. Keep them visible, contextual, and non-blocking—when in doubt, consider a progress bar instead.

A well-designed component library enhances consistency, usability, and efficiency across a product's UI. By following best practices for each component—whether it's a spinner, progress indicator, or sorting control—you create intuitive experiences that keep users informed and engaged. Prioritize clarity, accessibility, and responsiveness to ensure seamless interactions across all touchpoints.