BoltShift
A B2B Customer Intelligence platform that helps customer-facing teams answer three questions fast: which accounts need attention, why they changed, and what to do next.
ROLE
UX/UI & Product Designer
DOMAIN
B2B SaaS · Customer Success
PROJECT TYPE
Concept · Design brief
TOOLS
Figma
Scroll to explore
Scroll to explore
Interactive prototype: open Present mode, scroll the page and click Dashboard, Accounts or Segments in the header.
5
UI states
Error, loading, empty, success
3
Surfaces
Desktop, mobile web, native app
5
Overlays
Filters, sort, segment, plan
1
Design system
Tokens and components
2
Themes
Light and dark
01 / OVERVIEW
OVERVIEW
One screen, three questions: which accounts need attention, why they changed, and what to do next.
BoltShift is a concept B2B Customer Intelligence platform that I designed end to end for a UI/UX design assessment. Customer-facing teams do not need more charts; they need to know where to look first and what to do about it. The work covers desktop, responsive mobile web and a native mobile app, backed by a documented design system.
01
Which accounts need attention?
A prioritised, filterable list with health, trend and revenue at stake, so the riskiest accounts rise to the top.
02
Why did they change?
Account detail explains the movement: usage, support and billing signals behind a health drop, in one place.
03
What should we do next?
Create Plan turns an insight into an owned, dated action without leaving the account.
02 / THE BRIEF AND MY ROLE
BRIEF & ROLE
A broad brief with a short list of hard constraints: clarity first, three surfaces, and a system that scales.
WHAT WAS ASKED
- Design a customer intelligence product for customer-facing teams
- Deliver desktop, responsive mobile web and a native app
- Cover states, overlays and the key user flow, not just the happy path
- Document the foundations and components behind the screens
WHAT I OWNED
- Framing the problem and the three core questions
- Information architecture and the risk-response user flow
- All UI in light and dark, across three surfaces
- Design tokens, component library, states and overlays
03 / DESIGN PRINCIPLES
PRINCIPLES
Four decisions that shaped every screen.
01
Answer first, explore second
The overview leads with what needs attention; detail is one click deeper, never in the way.
02
Show why, not only what
A number without a cause is a dead end. Every change links to the signals behind it.
03
Every insight ends in an action
Plans, segments and follow-ups are reachable from where the problem is spotted.
04
One system, three surfaces
Desktop, mobile web and app share tokens and components so behaviour stays consistent.
04 / USER FLOW
USER FLOW
Designing the path from “this account is at risk” to “a plan is in motion”.
Before drawing screens I mapped the risk-response journey: spot a drop on the dashboard, open the account, understand the cause, then create a plan and confirm it. Each step was checked against the states it can fail in, so error, loading and empty states were designed from the start, not added at the end.
Customer risk response flow
06 / LIGHT AND DARK
LIGHT & DARK
Both themes come from the same tokens, so dark mode is a mode switch, not a second design.
Light
Dark
07 / RESPONSIVE MOBILE WEB
RESPONSIVE
The same three screens rebuilt for 393px: tables become cards, filters move into overlays, and actions stay within thumb reach.
TRY IT
Use the switcher under the phone to change screens.
Dashboard
Health, ARR and engagement as stacked cards; the accounts list becomes tappable cards.
Account detail
Why the health changed, with Contact and Create Action within thumb reach.
Segments
Saved groups with one-tap access to the accounts inside them.
Interactive prototype: open Present mode to scroll and tap. Screens reset each time you switch.
08 / NATIVE MOBILE APP
NATIVE APP
A dedicated app layout with native patterns instead of a shrunken website.
TRY IT
Scroll the screen, then tap the tab bar to change screens.
Dashboard
Personal greeting, key metrics and the trend, with a fixed bottom tab bar.
Account detail
The same story as web, redesigned with native spacing and patterns.
Segments
Group cards sized for one-handed use.
Interactive prototype: open Present mode to scroll and tap. Screens reset each time you switch.
09 / OVERLAYS
OVERLAYS
Filtering, sorting, segment creation and plan creation live in overlays, keeping people in context.
Create Plan: the step that turns insight into action (desktop and mobile versions)
10 / EDGE CASES AND STATES
EDGE STATES
The unhappy paths are designed too: error, loading, empty and success.
Error, loading, empty (segments and accounts) and success states
11 / DESIGN SYSTEM
THE SYSTEM
Every token is extracted from the dashboard itself, so the system documents the product rather than decorating it.
Colour, type, spacing, radius and elevation are documented as foundations, then assembled into components that all three surfaces share.
Foundations: colour, typography, spacing, radius and elevation
12 / COMPONENT LIBRARY
COMPONENTS
A documented library, not a pile of one-off frames.
Buttons, inputs, tables, cards, charts, badges, overlays and navigation are built once with variants and states, and reused across desktop, mobile web and the native app.
Component library with variants and states
13 / WHAT THIS PROJECT DEMONSTRATES
OUTCOMES
Scope and rigour I would bring to a real product team.
Product thinking
A problem framed as three questions, with each screen answering one of them.
Systems thinking
Tokens and components shared across light, dark, web and app.
Responsive depth
Three surfaces designed intentionally, not scaled.
Attention to detail
Error, loading, empty and success states plus overlays, all designed.
What I would do next: validate the risk signals and plan flow with real customer-success users, then test the health-score logic against live data. This concept has not been user-tested.
