Caterpillar Parts
Product Design, UI/UX Design, Art Direction
Caterpillar came to us with a problem: they have over 1.4 million parts and no place to sell them. Currently, when a Cat machine owner wants to purchase a part, they would have to first locate the item in Cat’s vast and complicated online catalogue, verify that it works on their particular machine, and then contact a third-party retailer to order the part. We sought to simplify the process. We built a new direct to consumer e-commerce store for Caterpillar distinguished with specific requirements and needs; ie. manage their fleet, order replacement parts and browse for products seamlessly.
The first stage of the process was identifying key personas through business insight, identifying customer needs and pain points, then creating an initial prototype. At the second stage, our goal was to develop and validate the customer personas to ensure we are building for the right customer and providing as much value as possible. With that in mind, our team conducted field testing with 5 different customer types in Richmond, VA to get initial feedback on the prototype. The data we obtained helped guide us to the third stage of refining the user flow, user experience and overall visual design of the product.
I worked as a visual designer on a team of UX strategists and designers to create this website. My responsibilities included the visual and UI/UX design of the website from the landing page to the checkout process. I also created wireframes and user flow charts, and creating supporting graphics and presentations.
Agency
AKQA
Credits
UX Director: Shannon Walters
Sr Art Director: Marina Guerra
UX Designer: Jackie Antig
Content Strategist: Thea Boodhoo
Sr Designer: Eastman Garcia
Wireframes of the initial prototype
We wanted to make this process a seamless experience for the user. From our business insights, we found that many users don’t know their machine’s serial number. We proposed allowing the user to find their machine serial number through the machine’s built-in GPS, so as long as the user knows where their machine is, we can pick up its serial number, allowing the user to easily find a part that matches their particular machine. To simplify the maintenance process, we gave them an option to buy the part along with a maintenance kit, so that the user has all the items necessary for machine repair and upkeep. At the end of the checkout process, we also included an option for account creation, so that the user can manage their fleet of machines, conveniently order new parts, and keep track of their orders.
The 7 Personas
Delivery Conscious
Machine Upgrade
Fleet Growth
New Machine Purchase
Current Owner
Auction Purchase
Current Parts Customer
Exploration – Add Equipment
Part of the initial exploration was how the “Add Equipment” module will look like and function. The module’s main goal was to get the customer to add their equipment in order to insure parts compatibility. The process has to be both unobtrusive and accessible.
Option 1: Clicking on the “Add Equipment” module will expand the module, the user can then type in the serial number to find their machine. Troubleshoot for finding the serial number will bring up a lightbox that shows where to find the serial number.
Option 2: Clicking on the “Add Equipment” module, the module will take over the page, the user can then type in the serial number to find their machine. Troubleshoot for finding the serial number will bring up a lightbox that shows where to find the serial number.
Option 3: Clicking on the “Add Equipment” module will take over the page, the user can then type in the serial number to find their machine. Troubleshoot for finding the serial number slide in a module from the right.
Exploration – Checkout
Some of the explored options for the checkout page. These were different ways to display the shopping cart on mobile. Some of the things to keep in mind while exploring these options were: ability to edit quantity, size and shipping speed/pick up. Since this design is for mobile, it was also important to make sure that the information is readable and the touch target size is reasonable.
