NovaSaaS Dashboard Redesign
A complete UI/UX overhaul of a complex analytics platform used by 12,000+ B2B users — reducing cognitive load, improving feature discoverability, and cutting churn by 34% within 90 days post-launch.
Project Overview
From Data Overload to Clarity by Design
NovaSaaS approached mkamil with a critical problem: their analytics platform was feature-rich but practically unusable. Users were abandoning key workflows mid-session, support tickets were rising, and churn was accelerating. The dashboard, originally built by engineers without a design system, had accumulated years of visual debt.
The goal wasn't just to make things prettier. It was to redesign information architecture, establish a coherent component library, and create a UI that guided users through complex data without friction. Every pixel needed a purpose.
Through mkamil's structured design process — discovery, competitive audit, user journey mapping, wireframing, prototyping, and iterative testing — the product was rebuilt from the inside out. The new interface shipped in 11 weeks and outperformed all pre-launch targets.
Project Details
CLIENT
NovaSaaS (B2B Analytics)
CATEGORY
SaaS Web App / Dashboard Design
TIMELINE
11 Weeks
DELIVERABLES
Figma Design System, Responsive UI, Prototype, Dev Handoff
TOOLS
Measured Impact
Results That Speak for Themselves
Churn Reduction
Within 90 days post-launch
Feature Adoption
Previously underused features now active
Less Support Tickets
Clearer UI = fewer confusion-based issues
App Store Rating
Up from 3.2★ pre-redesign
Delivery Time
Discovery through production handoff
The Challenge
- →No design system — inconsistent components across 40+ screens
- →Dense data tables with no visual hierarchy or scannability
- →Navigation buried under 4-level deep menus
- →Mobile experience was completely broken on tablets
- →No visual feedback for loading states, errors, or success
The Solution
- ✓Built a full atomic design system with 120+ reusable components
- ✓Redesigned information architecture with user journey mapping
- ✓Introduced progressive disclosure — complexity hidden until needed
- ✓Responsive-first rebuild optimised for 768px–2560px viewports
- ✓Micro-interaction library for loading, error, and empty states
How It Was Built
The Design Process
Discovery & Audit
Stakeholder interviews, user session recordings, heatmap analysis, and a comprehensive UX audit of all 40+ existing screens. Pain points were documented and prioritised by user impact.
Information Architecture
Card sorting exercises with 18 real users to rebuild the navigation model. The result: a 3-level nav structure replacing the original 5-level hierarchy, reducing click depth by 60%.
Wireframes & Prototyping
Low-fidelity wireframes for all core flows, followed by interactive Figma prototypes tested with 12 users across 3 rounds of usability testing. Each round informed the next iteration.
Visual Design System
A full design system built in Figma: typography scale, colour tokens, spacing system, and 120+ components (buttons, inputs, charts, cards, modals, toasts, skeletons). All components documented for dev handoff.
Dev Handoff & QA
Full Zeplin + Figma annotated handoff, weekly developer syncs, and a 3-week QA phase with bug bashing across 6 devices. Launched on schedule with zero critical post-launch issues.