Nissan-Infiniti Shopping Tools

Building a seamless interactive vehicle configuration and dealer connection tool for a leading auto manufacturer

Role
UX/UI Developer
Clients
Nissan-Infiniti USA
Critical Mass
NIssan specs
Frontier home
Nissan vehicle grid

Project overview

Nissan-Infiniti USA worked with Critical Mass to develop new Shopping Tools that would allow prospective customers to configure any Nissan/Infiniti model, then be connected with nearby dealers with corresponding stock.

As a UX/UI developer on the project, my role was to write scalable HTML/CSS that translated the Design team's clear vision into functional and fluid workflows.

0px tolerances

Comprehensive, fully-annotated designs/specs were produced by the Critical Mass (CM) Design team collaborating with Nissan-Infiniti USA's marketing teams.

Attention to detail for this project was critical, and tolerance to deviation from comprehensive and atomically-detailed specifications was very low.

Nissan navigation specs
Detailed, annotated mockups provided comprehensive specs for all elements and their various states

Coding a design system

Critical Mass designers worked closely with dev leads to strategize the building of a front end that maximized code reusability between the distinctively-styled Nissan/Infiniti versions of the tool.

As part of the front-end development team—working in a Groovy/Grails environment—I coded (HTML/CSS) various layouts, components, and interactions as per pixel-perfect detailed designs.

Consistent user experience—in all major browsers, operating systems, and devices—was mandatory.

Additionally, the site was built fully ADA compliant.

Nissan specs
Detailed style guides provided specs for all page elements

Product screenshots

Nissan gridNissan style guideNissan gridNissan grid
Nissan builder screen
Nissan gridNissan gridNissan builder screen

What I learned

Details matter

This project was very focused on attention to detail. Aesthetics and visuals played a key role in this product's success. This was a project where "good enough" was definitely not good enough.

It's very possible to build a design system that's flexible and extensible, while remaining faithful to detailed and prescriptive designs/interactions.

So much happens at the intersection of Design & Development

I gained an appreciation for the importance of the relationship between design and code, and understanding how the dependencies between the two impact product durability and quality of user experience.

Conceptual alignment between these two teams seems critical to successfully deploying a product that works the way it was designed to.

The importance of a shared vision

A shared vision, internalized by all teams—particularly Product, Design, and Development—can significantly mitigate the risk of overlapping, divergent, or incongruent team strategies, the untangling of which can result in wasted resources.

Back to top