← Back to work Next case →
UI Design Design System AI-Assisted Design Figma

Cemantica Insights

Modernizing an acquired product while preserving a familiar experience.

Role Product Designer
Scope UI Redesign, Design System, Handoff
Status Handed off to development
Redesigned Cemantica Insights hub: highlights, dashboard widgets, and volume views
01 Overview

A new look for an acquired product

After Cemantica acquired Luminoso, its analytics software became Cemantica Insights. Its active users knew the system well and didn't want major changes.

I redesigned the UI in Cemantica's visual language, built a components and foundations kit, and used AI tools throughout. The challenge was to improve the interface while respecting existing habits.

My contribution

  1. Design system
  2. UI redesign
  3. Design review
  4. Figma design
  5. Developer handoff

Tools

  • Claude Design Design system and UI
  • Stitch Quick demos and ideas
  • Figma Team files and handoff
  • Figma agent Variables and component states

System foundations

  • Ant Design Components
  • Tailwind CSS Color palette
02 The Challenge

Change with continuity

Luminoso came with an older UI and an established user base. Bringing the product into Cemantica required a visual update, but familiar ways of working were an important constraint.

I created a components and foundations kit based on the same components and colors already used across Cemantica, and applied it with targeted interface improvements. The kit gave Insights a consistent look without asking existing users to relearn the product.

Before
Original Luminoso Daylight projects list

The Luminoso projects list.

After
Redesigned Cemantica Insights projects page with project cards and status tags

The Cemantica projects page, with status tags, search, and sorting.

Before
Original Luminoso project highlights page

The Luminoso project highlights.

After
Redesigned project highlights page with tab navigation

The same highlights in Cemantica styling, with tabs for related views.

03 Stakeholder Alignment

Aligning with Luminoso's CSM

I held two design meetings with Luminoso's Customer Success Manager (CSM) to ground the redesign in the existing product and its priorities.

Meeting 1

Understand the product, propose a direction

I focused on understanding the important areas of the product and presented an initial design concept centered on colors and Cemantica's existing components. This gave us a concrete direction to discuss while keeping the scope focused on the visual update.

Meeting 2

Present the requested pages

I presented the designed pages based on her requests. These conversations connected the design work to input from someone on the acquired company's team who knew the product.

Projects page with project cards, each showing status, records, and an Add Data link
Project cards. Add Data, the most-used action, sits directly on every card, one click away.
Create project page with data upload status, column types, and dataset preview
Create project. As the CSM requested, the flow stays the same, with a cleaner layout and no major changes.
Volume view with the configure visualization panel and concept table
Configuration panel. The same controls, grouped into a more structured, easier-to-scan panel.
Dashboard with the Helios AI Assistant panel opened from the floating button
AI assistant. The same floating button for the AI agent, redesigned in Cemantica's style.
04 Navigation

Targeted navigation improvements

One example was using tabs for navigation instead of adding more buttons to the sidebar. This gave related views a navigation pattern of their own while limiting additions to the sidebar.

Project page with the tab bar highlighted: Highlights, Volume, Galaxy, Drivers, Sentiment, Dashboard, and Project Settings
Tabs switch between the project's views (Highlights, Volume, Galaxy, Drivers, Sentiment, Dashboard, and Project Settings) while the sidebar stays minimal.

That decision reflects the approach across the project: preserve the existing experience where familiarity mattered, and refine individual patterns where a focused change could improve the UI.

05 Design System

Building the visual foundation

I used Claude Design to create a components and foundations kit in Cemantica's style, based on Ant Design components and Tailwind colors. It provided a shared foundation for applying the redesign across the product.

The exported foundations document brings together semantic colors, Manrope typography, spacing, corner radius, and elevation. These reusable decisions connected individual screen designs to a common visual language.

Color

12 semantic tokens on the Tailwind palette

  • primary
  • fg
  • fg-muted
  • fg-subtle
  • bg
  • bg-subtle
  • bg-muted
  • border
  • border-strong
  • success
  • warning
  • danger
Typography

Manrope, 48px display to 12px caption

  • 48Display
  • 36Heading 1
  • 30Heading 2
  • 24Heading 3
  • 20Heading 4
  • 18Large body
  • 16Body large
  • 14Body, the quick brown fox
  • 13Small text
  • 12CAPTION
Spacing

Four-pixel rhythm, 4 to 64px

  • 4
  • 8
  • 12
  • 16
  • 20
  • 24
  • 32
  • 40
  • 48
  • 64
Radius

8px base, from 2px to full

  • xs2px
  • sm4px
  • md6px
  • lg8px
  • xl12px
  • 2xl16px
  • full∞
Elevation

Five soft, neutral shadow levels

  • shadow-xs
  • shadow-sm
  • shadow-md
  • shadow-lg
  • shadow-xl
06 The UI Kit

Every component, one system

The kit covers the components Insights needs day to day, built on Ant Design components and Tailwind colors in Cemantica's style. Each page documents variants, sizes and states.

Lumen UI kit, Buttons page: primary, default, dashed, text, link and danger variants, sizes, states and button group
Primary, default, dashed, text, link and danger variants in three sizes, with hover, disabled and loading states.
07 The Product

Insights hub, redesigned

Each view keeps its familiar content and workflow. The redesign focused on clarity, more room for the data, and a canvas users can make their own.

Highlights view with prevalent concepts, conversation clusters and issues affecting scores
Highlights. The same content, in a cleaner view that's easier to scan.
Volume view with filters collapsed so the concept table uses the full width
Volume. The same clean view, with collapsible filters so the data can use the full screen.
Dashboard view with a widget library, filter panel and dotted canvas
Dashboard. The same collapsible side panels, with a more visual canvas that users can customize themselves.
Handed off to development

I handed off the designs from Claude Design together with the Figma files, for the development team to implement using the Claude Code extension in Visual Studio Code.

More case studies

01 · Feature redesign

KPI Tracking Feature

A scalable KPI system that helps teams connect business metrics, NPS, satisfaction scores, and financial impact directly to the journey stages.

View case study →
02 · Feature redesign

Persona Management Feature

Redesigning an existing feature to balance customer documentation with product presentation.

View case study →