When General Motors came to our agency, they wanted our help in creating an eCommerce and Account Management experience for their four brand websites: Chevrolet, Buick, GMC, and Cadillac. The idea was to begin selling car accessories then eventually scaling to tires and vehicles.
My agency had already created a robust design system for the brand websites. Since the new eCommerce experience was going to live on the brand websites, we were tasked with both utilizing and evolving the design system to support the new eCommerce experience.
The brand websites and their external accessories' websites varied deeply. From page formatting, design conventions, and styling, very little was consistent between the websites. This created unpredictability and degraded brand perception. Additionally, the external website was losing out on the vast amount of traffic directed to the brand websites daily.
The old accessories website was extremely unintuitive and did not match the mental model of a typical shopping experience. Before users could even begin browsing, they were forced to either enter their VIN or the entire specs of their car, neither of which most owners could provide. No wonder most users bounced directly after seeing the home page.
First, we examined our existing design system to see what components could be reused for the new eCommerce experience. We were able to reuse components like the carousel, progress tracker, filter tags, etc. We also examined the existing accessories website to identify components we did not have but knew we would need to create.
In order to understand best practices and industry standards around eCommerce experiences, we relied on benchmarking. Baymard Institute and Nielsen Norman Group were particularly helpful resources as they had done extensive research and usability testing on common eCommerce conventions and patterns.
Our experience required multiple new pages and domains: a shopping experience with product pages, a search results page, a cart, etc., a checkout experience, and an account experience. The information displayed on these pages also varied based on whether the user was authenticated and if they were enrolled in rewards.
My team created responsive wireframes for each page, breakpoint, and state of the experience.
We created dozens of new eCommerce components for the design system. Since we were working with an external development team, we spent a lot of time documenting the functionality and interaction patterns of our components and thinking through all of the breakpoints and edge cases.
One of the most complex components I worked on was called the Fitment component. The Fitment component essentially helped users identify whether the products they were looking at actually fit their vehicle.
We validated our experiences by conducting usability tests on usertesting.com and iterated based on their feedback. My team did not have a dedicated UX Researcher, so I was responsible for writing test scripts, creating the prototypes, and analyzing the results.
For the new shopping experience, users can narrow results by entering their year and model or their VIN, but this is purely optional can browse products regardless. Once the user selected a product, if that product only fit specific vehicle configurations we require users to enter the remaining details before adding the item to their cart. We made this decision because we wanted to ensure that users weren’t making large purchases that ultimately did not fit their vehicle.
In an effort to decrease cognitive load, we broke the checkout process into small steps instead of showing all of the form fields up front. We split our steps into the following: Contact Information and Delivery Method, Billing Address, Payment Information, and Review. On the Review page, users are able to edit their information inline so they aren't forced backward in the flow.
