Nissan-Infiniti USA
Building a seamless interactive vehicle configuration and dealer connection tool for a leading auto manufacturer
Overview
Translating detailed brand-driven design into production code
As a UI Developer at Critical Mass, developing a vehicle configuration tool for Nissan-Infiniti USA, I worked on a vehicle configuration tool that allowed users to build and customize a vehicle then connect with nearby dealers that had matching inventory.
My primary focus was writing HTML/CSS for the Build Summary view, a printable aggregation of all the selections a prospective buyer had made. This view played a key role in dealership visits, bridging the online configuration experience with the real-world purchase process.
Challenges
High fidelity implementation and brand precision
- →Extremely tight tolerances—design fidelity expectations were pixel-perfect
- →Summary sheet needed to render accurately across browsers and in print
- →Two-brand implementation (Nissan and Infiniti) required modular styling
- →ADA compliance and print-readiness added extra technical constraints
Summary view
A printable, shareable recap of user selections
- →Displayed all selected vehicle options and packages in a clean, scannable format
- →Required layout precision and strict adherence to typographic hierarchy
- →Designed to be printed or downloaded and brought to a dealership
- →Served as a handoff between online research and offline purchase
Build summary view
The final step in the build process was a printable build summary
Building from design
Custom system, detailed specs, and no margin for error
- →Developed HTML and CSS in a Groovy/Grails environment
- →Implemented fully custom layouts based on proprietary design system
- →Followed atomically annotated mockups provided by the Critical Mass design team
- →Ensured consistency across browsers and operating systems with handcrafted code
- →Delivered a visually refined experience that respected the aesthetics of a premium brand
Pixel-perfect reproductions
Fidelity to detailed design specs was critical
ADA compliance
Building with accessibility in mind
- →Code adhered to ADA web standards as defined at the time
- →Print styles ensured legibility, contrast, and screen reader compatibility
Learnings
Lessons in fidelity, collaboration, and system thinking
- ✓Details matter. Precision isn't polish, it's trust-building with premium brands
- ✓Code and design are inseparable. Good design fails without solid implementation
- ✓Shared vision across teams helps reduce churn and prevent misalignment
- ✓Working from spec helps clarify design intent and implementation constraints
Galleries
Visual references from implementation and specs
Screenshots of completed project
Vehicle configuration tool for Nissan USA
Style guide
Screenshots of the detailed style guide for Nissan USA
