Designing a Role-Based Client Portal for Automotive SaaS Management
Role: UX/UI Designer
Focus: B2B SaaS Design, User Role Mapping & Permissions, Responsive Design, Content Management (CMS).
Tools: Figma, Jira, User Research.
Company: Automotive Services Platform (under NDA), a client at Innovate Group
The Challenge
The client, a provider of automotive services (warranty, dealer advisory), needed a cohesive digital platform to serve its B2B customers. The challenge was to design a single, responsive portal that could cater to two fundamentally different user roles:
-
Client Users: Needed a streamlined view to consume critical information (reports, training videos, announcements).
-
Admin Users: Required a powerful Content Management System (CMS) to manage organizations, users, and content (videos/announcements).
The Goal
Create a secure, intuitive, and responsive client portal that uses role-based access to deliver highly tailored experiences, enhancing user engagement and operational efficiency.
Solution and Key Features
The solution was a unified platform featuring dynamic interfaces that adapt based on the user's role, ensuring role-based access to information. For the Client View, the design prioritizes Information Consumption: users receive a personalized dashboard with organization-specific data and streamlined access to performance reports, along with embedded video tutorials and announcements. Their access is strictly Read-Only (no management control). In sharp contrast, the Admin Mode focuses on Content Management (CMS) and Administration: Admins use a robust panel for managing content and users, utilizing a Structured Content Editor to create/edit announcements and update training videos. Furthermore, the Admin role includes comprehensive tools to manage organizations and users, allowing them to edit details, add/remove users, and assign permissions.
Design Process Highlights
-
The design process prioritized the technical complexity of roles and responsiveness:
-
User Role Mapping: Defined access levels in collaboration with the team, ensuring permissions correctly affected the visibility and interaction of the UI.
-
Responsive Design: Utilized a mobile-first mindset to ensure components scaled, reflowed, or collapsed intuitively across desktop and mobile devices, making usability a key priority.
-
Component Reusability: Built scalable design patterns in Figma to allow rapid adjustments and facilitate future feature expansion.
-
Prototyping: Used low-to-high-fidelity prototyping to effectively test the layout responsiveness and the underlying access logic before final mockups.