General Motors UX/UI Prototyping
The white-label style guide project was designed to include a library of web components for the GM family of brands. It was an opportunity to play, explore and build out static wireframes and UI comps for internal use between MRM and GMIT. We had the opportunity to design and build out hundreds of separate web components that ended up on Buick, GMC, Chevrolet and Cadillac brand websites. There was a tremendous amount of consideration for each component, multiple versions, revisions and the opportunity to add web accessibility, css animations, advanced functionality and mock json data to replicate what would go live. Please note, that all prototype examples shown have already gone live in the last few years.
Build Your Own - Trims
The ‘Build Your Own’ Trims section was designed to allow users to filter by drive type, and utilizing custom vehicle cards to select various trim pricing. Each card animates in with a CSS Animation Delay, the data is fed from a custom json file. Within each card there’s the option to compare vehicles, which opens up a modal with a large vehicle compare table. There’s also a details modal which opens up to reveal more info for each trim the user wishes to select.
Build Your Own - Exterior Colorizer
The ‘Build Your Own’ Exterior Colorizer allows users to visually change the color of the exterior of the vehicle. This step appears after the user has selected their specific trim. We added custom transitions, delay animations and a nice easing effect as the users changes the vehicle color. The end result is both fun and satisfying.
Build Your Own - Package Options
‘Build Your Own’ Package Options allows users to add or remove various additional packages to their vehicle during the configuration process. Selecting a package adds it to the total price, while hovering and selecting over it again toggles to remove the package from the total price. It was also set up to include duplicate scenarios where a modal prompts users if 2 conflicting packages are selected.
Vehicle Search Results
Vehicle Search Results returns a list of vehicle cards that match a users filtering preferences. The example provided includes the ability to compare multiple vehicles. When a user selects ‘compare’ at the top, we have an animated popup reveal a thumbnail which allows the user select multiple options and compare all in a compare table modal that pops up when prompted. The users also have the ability to save vehicles.
Model Selector
The model selector was created as a simple way to filter vehicle types used within a large dropdown menu used across the GM brands. In the sample provided, we’re pulling data from a custom json file and filtering each model type into it’s own category. From there, users can select various vehicle options at the top. On mobile, the menu options turns into a small scroller with arrow buttons.
EV Savings Calculator
The EV Savings Calculator prototype was designed as an easy way for users to select their vehicle, and compare to gas vehicles by entering their zip code, miles driven daily, vehicle mileage and savings options for monthly, 1 year and 5 years. The prototype also includes multiple ‘states’ empty, populated and service down alerts to indicate all scenarios. Keyboard accessibility was also taken into consideration, as the entire prototype component allows the user to tab between the various input fields and buttons in a particular order / flow.