.png)
Nexus Dealer Portal
UX/UI DESIGN CASE STUDY
Overview
The Nexus Dealer Portal offers a comprehensive suite of services tailored for car dealership professionals across the USA. This all-inclusive portal features tools for car purchasing, market trend analysis, shipping calculations, and complete shipping management.
Goals & Tasks
The main goal was to streamline dealership operations by providing a one-stop solution for inventory and shipping management. My initial tasks included enhancing existing sections, redesigning the UI, improving usability, and adding new features and sections.
Client: Nexus Dealer Portal (USA)
My Role: UX Designer, UI Designer
Date: 2023 / 2024
Project Scope:
• redesign the existing portal;
• add new sections and user flows;
• creating new visual style;
• creating a UI design library;
• adjusting for responsive layouts;
• redesign the landing page.
6 Featured Action Points
#1 - Captivating Landing Page
How to create a compelling landing page that attracts dealers to join the portal?
#2 - Onboarding & Guiding Through
How to simplify onboarding to reduce the need for recalling instructions?
#3 - Locked Trial & Unlocked
How to design a trial version that generates interest in unlocking?
#4 - Transport Calculator
How to design an effective user flow and layout for the shipping calculator?
#5 - Creating a UI Kit
How to create an efficient UI kit for consistent, time-saving use?
#6 - Color Palette
How to expand brand colors into a full, UI-compliant palette?
#1 - Captivating Landing Page Design
To create a clean and strong look that enhances the professional use, bold contrasts, vivid color accents, and elements that add a lively dimension have been used.
To grab users' attention in crucial sections, such as services and their descriptions, subtle microanimations have been incorporated.
Bold statements and clear formulation, vivid elements.
Clear CTA.
Animated services bar.
Light background for longer texts for better readability.
Using content animations to engage interest.
High contrast to highlight the demo form, with input fields in light shades for better readability and a more inviting feel.
Carefully curated asymmetry for a more attention-grabbing look.
High color contrast from the rest of the webpage to highlight the final CTA.
#2 - Onboarding & Guiding Through
Although traditional onboarding is available at the start, extra effort has been put into providing on-the-go guidance throughout the portal sections to minimize user stress from recalling onboarding instructions.
On-the-go guidance is provided in several ways: through informative banners and as well after action steps, offering multiple choices to guide users to the next sections.
#3 - Locked Trial & Unlocked Mode
The challenge was to design a locked trial version that sparks interest in unlocking the profile without revealing too much information. It was resolved by using similar UI components as in the unlocked versions, but with specific information blurred, and by adding explanatory banners.
To make users aware that they are logged in but still in a trial version, “Unlock Full Access” CTA buttons were strategically placed in several spots, if specially where users could get confused why they can’t see all the information.
To prevent confusion with trial mode blurred images being misinterpreted as loading issues, hovering or clicking reveals an overlay with an unlock offer.
#4 - Transport Calculator
To prevent confusion from too many CTA buttons and to avoid that the tool looks too complicated, the flow was divided into steps, revealing only the first step with limited buttons. Following steps appear as users progress.
It also reduced vertical space, which is even more important for the mobile version.
To make the calculator distinct from the portal, it now has a colorful look with zoned sections. Iterating dozens of color version revealed, that it worked best when a darker informative heading with tabs for different vehicle types were combined with a lighter work area. It gave better readability, less eye strain and looked more inviting to fill.
#5 - Creating a UI Kit
A new UI kit was created for portal-wide consistency. I audited existing elements, categorized them by function and application, and refined the set by reducing and adding elements for an optimal toolkit.
Reducing element quantity was challenging due to the portal's wide functionality. To maintain visual zoning, I used different backgrounds, but this increased the variations in components, which needed to be balanced to avoid over-complication.
Investing in the UI library paid off significantly, saving time during major updates. Moreover, the scalable, well-developed elements—tables, UI cards, buttons, and components—streamlined design decisions and boosted efficiency.
#6 - Color Palette Challenge
To maintain consistent brand look, the brand main colors - navy blue and lime green, were used for the base of palette.
To add depth to the blue shades, lighter and more vivid blues were included, considering contrasts and UI design requirements.
An accent color, reddish-orange, was chosen for highlights based on the color wheel's triad to complement blue and green shades effectively.
For the professional car dealer audience, large solid backgrounds were used for a strong, bold impression.
Information was zoned by color for intuitive use: dark backgrounds for important calls to action, light blue for support information, and light backgrounds for larger text and input areas to enhance readability and reduce eye strain.
Colors and contrasts were checked with contrast checkers to ensure compliance with WCAG guidelines for optimal usability.
Final Result
