ViveLaCar
B2B Dealer Portal Redesign
Modernizing an enterprise car subscription portal by transitioning from a rigid Salesforce setup to a custom, high-performance 56-screen B2B management platform.
Role
Lead UX/UI Designer (in IT Engineering Team)
Context
In-House B2B Product Design
Timeline
05.2024 – 08.2024 (4 months)
Tools
Figma, Corporate Design System, Salesforce Experience Cloud
Deliverables
56 Responsive Desktop & Mobile Screens, B2B Portal Architecture, Atomic Design Library
Challenge
Problem
The legacy portal, built on Salesforce Experience Cloud, was clunky, slow, and visually outdated. Dealership staff struggled with counter-intuitive navigation, confusing form structures, and poor performance when attempting to list vehicles or manage active contracts.
Objective
Redesign and replace the entire B2B dealer portal from scratch. The goal was to simplify operational workflows, elevate the existing corporate design into a modern SaaS aesthetic, and deliver a fully responsive 56-screen platform tailored to daily dealership needs.
Research
Applied Methods
Workflow & Task Mapping • Stakeholder & Developer Interviews • Information Architecture Overhaul • Atomic Design System
Insights
Overwhelmed by Nested Menus
Dealership managers needed immediate status clarity (e.g., pending requests, active inventory) on the dashboard rather than digging through deep Salesforce sub-menus.
On-the-Lot Mobile Needs
Staff often inspect or assign vehicles directly on the dealership lot, making seamless mobile usability critical for fast vehicle updates and handovers.
Developer Overhead
Working directly with IT engineers required a clear design handoff to ensure custom backend implementation remained fast and bug-free.
Design Process
UX Decisions
Modernized Corporate Design
Preserved required corporate brand identity while upgrading typography, spatial grids, and contrast ratios to give the portal a sleek, modern B2B SaaS feel.
Scalable Atomic Design System
Engineered a comprehensive Figma component library structured into atoms, molecules, and organisms to guarantee visual consistency across all 56 desktop and mobile screens.
Iterative Wireframing to High-Fi
Mapped out complex business logic in low-fidelity wireframes first, followed by high-fidelity mockup screens that underwent multiple feedback and validation rounds with stakeholders and engineering leads.
Structured Flow Mapping
Logical cleanup and restructuring of all key portal paths including registration, login, appointment booking, vehicle uploads, and fleet management.
Solution
Key Features
Interactive Operations Dashboard
A centralized home screen presenting dealership managers with real-time fleet metrics, urgent task alerts, and quick actions at a glance.
Guided Vehicle Upload Wizard
Replaced complex single-page forms with a step-by-step vehicle creation flow featuring smart input helpers and clear image upload states.
"My Vehicles" Inventory Overview
A high-efficiency management hub allowing dealers to search, filter, and track their entire uploaded fleet with dynamic status badges.
Streamlined Appointment & Confirmation Flows
End-to-end request management for customer handovers, test drives, and return confirmations with intuitive calendar views and automated step confirmations.
Cross-Device Responsive Parity
Fully responsive layout optimization allowing lot managers to seamlessly handle vehicle check-ins, photo uploads, and status updates directly on smartphones or tablets.
Retrospective
Outcome & Impact
Successfully replaced a legacy enterprise system with a custom 56-screen B2B portal that significantly accelerated task completion speeds, simplified dealer onboarding, and provided engineering with a maintainable component architecture.
Personal Reflection
Serving as the sole UX Designer directly embedded in an IT engineering team underscored the importance of smooth Developer Handoffs. It taught me how to advocate for user clarity while designing pragmatic, developer-friendly UI systems that scale smoothly in production.