Role: Lead UX Designer
Process: Researched, met with stakeholders, designed, tested, and iterated from February to June 2024. Met with stakeholders, iterated, and prototyped in March 2025 for MVP build.
Current state: Being built by developers
Team: Javier Urbina as PM. Additional support provided by Sierra Willenburg (UX), Olivia Rosario (UX research), Asha Eginton (Design), Marc Kelley (Design), Sarah Yost (Design)
Goal: Make a legacy tool self-serve with more customizations so customers can use the tool on their own and stop submitting tickets for custom fixes.
Before
After
A model bar is a section of the homepage that displays all models (vehicles) supported by an OEM or dealership. The Model Bar Widget 2.0 (pictured above on the left) is DealerOn’s official solution for model bars. However, dealers began wanting custom coded options that put a huge strain on our internal teams (Design and Customer Support). The lack of customization options quickly snowballed into a large number of dealers using custom model bars that deviate from what the Model Bar Widget 2.0 offers. It was not a scalable solution.
Remake a convoluted system by enabling templates and self service.
Build two portals, one for creating templates (users: Design team) and one for using templates (users: CS team, external users including agencies and dealerships).
Prototype: Design team portal
Steps: Create a new model bar. Change the title from “View Our Lineup” to “A Vehicle for Every Lifestyle.” Share the model bar with Ford. Add vehicles to the lineup by autofilling from inventory. Add two more tabs to the vehicle lineup. Rename Tab 1 to “Sedan.” Rename Tab 2 to “SUV.” Rename Tab 3 to “Pickup.” Move the Escape into the SUV tab. Rename “Mustang Mach-E” to “Mach-E.” Remove the Ford Fiesta from the lineup.
Prototype: CS team and dealership portal
Steps: Turn off automatic updates. Remove the Ford Fiesta from the vehicle lineup. Change the name of the “Pickup” tab to “Other.” Add a new vehicle to the “Other” tab. Hide the model bar subtitle. Add a primary CTA to each vehicle in the lineup.
“It didn’t take very long for me to find what I needed”
“It didn’t take very long for me to find what I needed in order to complete the requested tasks.”
“Overall it was great and self explanatory.”
“Overall it was great and self explanatory.”
Action items based on feedback:
Allow users to edit text by clicking on it and typing (ie: clicking on the title makes that text box editable. They can also edit the title from the right sidebar).
Add more visual hierarchy between elements in the vehicle details section.
Change placement of “share with OEM” step.
Explore icons for dragging vehicles.
“I think dealers are going to love this.”
“I do see there are more options than the current model bar tool. And dealers love options. I am very excited for this.”
“User friendly and easy to follow”
“Makes customization so much easier. I had to send these types of requests to Design before, with this update, we can close the case as an FCR…I think dealers are going to love this.”
“User friendly and easy to follow”
“Makes customization so much easier. I had to send these types of requests to Design before, with this update, we can close the case as an FCR…I think dealers are going to love this.”
Action items based on feedback:
Work on the visual hierarchy of the auto updates toggle to make what it does clearer.
Before
After
Later as developers began to build the MVP, I asked for more feedback from the Design Team on things like whether the vehicle details should open in a new panel (left) or in the same panel (right). The Model Bar 3.0 widget is set to launch late 2025.
Key feature: Autofill from Virtual Inventory
This feature, which I renamed to “Import Virtual Inventory,” pulls vehicles from the dealer’s virtual inventory located in the backend into the model bar. I had to consider many scenarios for this, such as: what happens when there are already vehicles in the model bar? What happens if the virtual inventory is updated? Does the Model Bar 3.0 widget know that the virtual inventory has been updated? What if a user has moved vehicles to different tabs? Can preexisting vehicles receive updates but stay in the same tab? What happens if there’s more than one make assigned to the model bar? Where do those vehicles go?
Sometimes it felt like I had more questions than answers. I talked through best and worse case scenarios with the developers and PM to arrive at a solution.
Importing just Ford is easy:
Importing Ford with one preexisting custom vehicle puts all the Ford vehicles into one new tab:
If there’s more than one make assigned, each make gets its own tab:
Deliverables
Dashboard
Assign to make: the template can’t be saved or published without an assigned make (ie: Ford).
Autofilling vehicles and adding new tabs
Dragging vehicles
Dragging tabs
Dragging collapsed tabs
All vehicle information visible
Adding tag or disclaimer to vehicle
Delete a vehicle: trying to delete anything on the template prompts a dirty check
Edit CTA: hiding an element will disable the relevant fields in the side panel.
Editing title (via clicking on element or side panel)
Editing subtitle (via clicking on element or side panel)
Testimonials
“Miles, thanks for all the work you’re doing. I’m very happy and excited about this project now that we have the Design Team fully on board and the workflows set up.” —Javier Urbina, PM
Check back for more information soon!
