Project Overview

The Bold Platform is our subscription-based SaaS tool designed for users to independently filter, configure, and export global business data. While our main company website functions as the lead-generation funnel (built on Next.js for performance and SEO), the Bold Platform serves as the core product where clients execute their data selections.

Our goal was to transition users toward a self-service model. While our data experts offer premium, guided support for complex queries, the Bold Platform allows customers to build lists faster and at a lower cost. However, the initial tool was an MVP that proved daunting to non-experts, creating a high barrier to entry and a disconnect from our brand identity.

The Challenge

The platform faced three critical friction points:

  1. Usability: The data selection process was complex, requiring a level of expertise that discouraged casual users.
  2. Design Debt: The original MVP interface lacked a professional aesthetic, which undermined user trust and felt misaligned with our market position.
  3. Scalability: The legacy layout was difficult to iterate upon, making it slow to implement new features or data filters.
Before interface Bold Platform MVP

My Role

I led the UX and partly the frontend development overhaul of the platform:

  • Conducted competitor research to understand industry-standard UX patterns for data selection.
  • Defined the functional design and mapped user flows for different data selection scenarios.
  • Led the visual redesign by migrating all assets from Sketch to Figma, establishing a robust design system.
  • Refactored the core layout and component architecture to ensure a responsive, high-end user experience.
  • Managed stakeholder expectations, bridging technical constraints with business requirements.

The Approach

The focus was on creating a modern, intuitive interface that simplified the selection process.

  1. Functional Design & Research: I analyzed competitor tools to identify common mental models. We prioritized "progressive disclosure," where users are guided through complex filter steps without feeling overwhelmed.
  2. Design System Implementation: Moving to Figma allowed us to standardize components. This ensured consistency across the application and drastically reduced the time needed for front-end implementation.
  3. Development Refactor: Using Next.js and our Design System, I refactored the base layout. This improved modularity, allowing us to build and ship new features—such as new API connectors or data filters—significantly faster than before.
Wireframe Current Filter Selection Figma Design System Color Palette

The Impact

By prioritizing UX and a modern development architecture, we transformed the platform from a functional necessity into a competitive SaaS product.

  1. Improved Self-Service Adoption: By simplifying the UX, we successfully moved a larger percentage of users away from manual expert-led processes to the automated self-service flow, reducing operational overhead.
  2. Brand Consistency: The new visual language aligned the platform with our premium public-facing brand, increasing user confidence.
  3. Development Efficiency: The move to a modular component-based system (Next.js/Design System BFS, Bold Foundation System) enabled our team to scale the tool with new features more reliably and quickly.
Figma Visual Design of Main Data Table Bold Platform - Company Detail Sidebar

Technical Stack

  1. Frameworks & Libraries: Next.js, Tailwind CSS, Prisma
  2. Database & Search: MySQL, Elastic Search
  3. Infrastructure: PM2, Vercel
  4. Design & Workflow: Figma, Bitbucket
Bold Platform - Active Filters

Website: Bold Platform