CPR – Vehicle list and detail

When it comes to specialty car dealers, these pages are your bread and butter. They need to be packed with intuitive features that help the user seamlessly browse inventory, without being bogged down by cognitive load.

For the list page, CPR suggested we bucket the inventory into four categories (356, 911, other models, other makes). This made it easy for users to quickly check out specific models without needing to get too specific. In addition to the quick filters, the filter bar could also expand down which exposed more filter options. Lastly, I went ahead and designed various states that the listings could be in at any time (sold, pending, active, CPR restored).

Since I knew that CPR had gorgeous photography, I wanted to highlight that on the vehicle detail page. Once you scroll down to see more, the layout splits into two columns. The left column (vehicle images) would infinitely scroll, while the right column (vehicle info) would stay in view for ease of reference. If you wanted to read more of the description, a full-screen modal would appear displaying the entire write-up.

The gallery was another opportunity where I felt it was necessary to take advantage of the full screen. The experience would act as a layer, in front of the detail page, where images would be displayed in various heights and widths.

We designed the mobile experiences to be simple and approachable so that users felt comfortable browsing the inventory. The filters were now nested within an off-screen sheet—keeping the primary focus on the listings. In the detail page, we abandoned the two-column layout for a more concise presentation of the vehicle and specs.