In the summer of 2024, I had the honor to work as a UX intern at Caterpillar, as a part of their CAT Digital team. During this internship, I had numerous experiences and opportunities that I would love to share.
This internship took place over the span of 3 months in the summer before my Senior year, May - August, 2024. As a part of CAT Digital, I was under the supervision of Sarah Kennedy, my supervisor, and Brandon D’Adam, my mentor, and was placed as an intern UX Designer under two different teams, VisionLink and Electrification. Team VisionLink (VL) manages the VisionLink site, a website designed for asset fleet managers to easily keep track of their assets, including charge, location, speed, issues, etc. It is a useful tool that can make any asset owner’s life easier. On the other hand, team Electrification manages all of the digital analytics of CAT’s electrical powered machines and provides data to customers who own electric powered mechanical equipment.
As an intern for these two teams, my job was primarily to design concepts in Figma and communicate with the programming team that then bring these concepts to life. In the overall structure, I served as a good middleman between the idea designer and the programmer, making highly detailed concepts that programmers had to make my concepts properly function.
VisionLink Survey
This was the first project I was a part of while at CAT. In the CAT Digital site, VisionLink (VL), a survey would pop up for a user to fill out and give feedback on the site. The problem was that the visual design of the survey was very out of date, and did not match VisionLink’s branding or visual style.
My task was to redesign the survey to better fit the look VL, while using CAT’s Blocks 2.0 design system, for both desktop and mobile. With this being my first project of the internship, I had yet to fully master and understand the Blocks Design system, let alone the hallmarks of a VL design. I was nervous that I was woefully unprepared.
My first step of action was to begin researching. I scoured through the VL site, taking screenshots and notes on anything that looked like it could be useful or serve as reference. I then delved deep into the Blocks 2.0 system, going through each page and taking copies of assets that looked like they could be functional for my goal. Once my reference material and assets were collected, I began designing different versions, both as a way to test and play with Blocks 2.0, but also as a way to make different types of questions that could be asked on the survey. Obviously, I didn’t know for sure what questions would be asked on this new survey, but using the original as an example, I created various types of questions from fill in answers, to rankings, to sliders, to steppers, etc. While developing these different types of surveys, I also was practicing learning Auto-Layouts, an advanced Figma tool that CAT uses for all their products. Once the desktop version was complete, I then had to then port its design to mobile, which meant resizing and reformatting everything to properly fit the smaller screen space.
Once initial development was complete, I made sure to clean up the file for future developers and sent it over to my contact for the project, Kristy. Each time Kristy and I reviewed the survey, I made sure to question her thoroughly on what aspects need improvement. The survey went through many different iterations to nail the sizing, question types, spacing, and so much more. By the end, Kristy thanked me for my work, with the new survey entering proper development and programming!
Release Notes Guidelines
Anytime VL releases an update, new information on what has changed is released, either by email or on the site’s Help Center page. While these update emails are already fully developed, including callout graphics for VL Mobile, the Help Center Release Notes on the site itself still lacked the detail of these updates.
My role for this project was to create a mockup on how the Release Notes on the Help Center Page of the VL site should include pictures of the update, as well as how to bring attention to a certain part of the image. The images couldn’t require heavy editing, boiling down to just screenshots with a call out on top, and needed to be easy to implement and add effects to.
I first began with proper research, studying how callouts were executed on both the normal VL site, as well as the email version. I then drafted several different versions of the screen shot, testing borders vs no borders, shadows vs no shadows, various different types of call outs with various different types of colors and thicknesses. I wanted to make and organize the many different versions I saw possible, so I could then send it to my contact for the project, Kristy.
Slowly but surely, Kristy and I whittled down the possibilities, making certain tweaks and mixing aspects of different options along the way. By the end of the project, I had created a sleek and simple design for how these images in the Help Center Release Notes can be presented. I have set the standard for how this aspect of the VL site will be presented, as well as created the guidelines by which others in the future can follow and develop. It feels really good to have left a mark like that!
Relative vs Absolute Time
This work was for a research project within VL to test if users had a better time understanding relative timestamps vs absolute timestamps, or even a mix of both. This test would be conducted using VL screens, specifically “Needs Review”, “Assets”, and “Asset Operation”.
My role was to create these screens then prototype them, so that when a user hovers over a relative timestamp, an absolute timestamp would appear above it. This was my first big prototype made for CAT, and it required me learning a prototype technique I was largely unfamiliar with - overlays.
My first step was to collect my references and screens that I would be altering for this prototype. Unfortunately, when I found the screens, they were old mock ups and extremely outdated, so I had to then reformat them using auto-layout, size them appropriately, and update to the modern icons and terms. Once my screens were prepared, I investigated the kind of dates my contact, TJ, was looking for, so I understood what he would want represented and where, so it could be realistic and not distract the tester. I created a reference date that I would base all of my timestamps off of. For example, if a timestamp needed to be labeled “15 minutes ago”, I knew that the time would be 06/18/2024; 9:15 CDT, 15 minutes before my reference time of 06/18/2024; 9:30 CDT. With all of the set-up work complete, I began prototyping. I created a section to store my overlay tabs in the file for ease of access, then went through one by one attaching them to their matching labels on the screen. Learning how to prototype the overlay was a breeze once I learned how to place the section where the overlay should appear. For the screens with solely absolute time, or a mix of the two listed, only timestamps listed for 2 weeks ago or sooner would receive an absolute time overlay. If the timestamp was already in absolute time, it would get no overlay and would not be underlined like the relative timestamps to indicate that it can’t be interacted with.
With the project set up, I delivered it to TJ, as he sent it off to research! It was cool working on a prototype that will be vital to a research project, as it really required me to think on an extra level. I had to make sure that my data was accurate, that there were no inconspicuous distractions that would skew the data one way or another. I look forward to hearing the results of the project in the future!
CAT Hack
As part of CAT Digital’s internship program, for one week, the company sends their interns to Chicago, IL, where they are placed into groups and develop a concept and a pitch for a solution to a problem they present at the event. Interns have that whole week to work together in their groups and make the best possible concept. At the end of the week, teams had to make their pitch, with teams being eliminated one by one. This year’s project was for CAT Rental and tasked interns to make a “pizza delivery” like service for rental vehicles that can track them throughout their delivery. There cannot be any login screen, and it needs to be usable on two fronts: the customer/owner ordering or returning the vehicle and the driver delivering it. All of this had to be made using the Blocks 3.0 design system for both the designers and the developers.
I was the sole UI designer on my team and was responsible for developing our concept in Figma. At the top of the week, I was quite nervous. I had never worked within CAT Rental before, meaning I didn’t know their design systems very well. Plus, I had little experience in designing a rental/delivery service. To top it off, I had a nasty cold for that entire week.
Despite my fears, my biggest strength in this project was my teammates. Even when I felt terrible, their enthusiasm and determination pulled me through and kept me motivated. I began by discussing with my teammates how we wanted the software to function. Learning about what we wanted from the design was a massive help and it gave me a great springboard to jump off from. I began designing concepts by hand on a whiteboard with my teammates there to give feedback. Once my concepts were done, I began researching. I researched CAT Rental, both their public site as well as their Figma files, to learn more about them, their color pallet, and commonly used fonts. I then took copies of assets to use as reference. I also researched common delivery apps like Amazon and Etsy to see how they format their pages and what information they typically supply. With my research and preparations ready I began designing. With our limited time of only a few days we were constantly in “go mode”, meaning screens would be made at a rapid-fire pace with little time to deliberate and edit. Thankfully, due to my experience in game jams, I had experience with this kind of work pace. Over those short days, I created icons, made layouts, formatted text, prototyped screens, utilized animations, and so much more. It was no coincidence; everything I was doing for this project was using skills from my previous projects with CAT, as if they were subtly preparing me for this.
By the end of the time limit, judges circled the tables and we all gathered in the presentation room and presented our work. In our final product, the user would hypothetically receive an email giving them their order number; they could then enter into the site to see a list of all their orders, which ones have arrived or in transit, as well as the asset’s delivery date, its delivery route, how far away is it from delivery, and the stops it has taken. We even set up a hypothetical system for a driver authentication where instead of login in with an account, the driver would enter in his valid work credentials and would be presented with the list of assets they are scheduled to deliver, where they can confirm receipt, sending an order number to the customer or owner. While we did not place first, my team did make it to the second round of judges, with most of the praise being given to the prototype that I developed in Figma. It was a fun experience that I’m glad I was able to persevere through and create something that I hope can help, even if just a little, the future devs at CAT Rental.
Unfortunately, due to NDA, I am unable to show screenshots of the project; however, I can talk about my work. I apologize for the inconvenience.
Electrification Project Overview Phase 2
As part of my work with the Electrification Team, I was brought on to help assist with developing screens for their newly revamped Electrification site that is in development. This site would allow users who owned electrically charged vehicles to track their information including charging times, sankey diagrams, energy charts, and network diagrams. To prepare for the site, the Electrification team began developing screens in Figma.
I was brought on to help complete the work a coworker of mine was unable to finish due an excused absence. My role was to go into the Figma and create screens to demonstrate switching projects: the Historical Data screens, one with an active reading, and the other with a non-responsive reading.
Since this file was a part of a project that had already started that I was picking up, my first plan of action was to run though the file to understand the project and how it was set up. I worked with my project contact, Abhishek, to understand what he wanted out of these screens and what I should be focusing on. The project switching screens were simple, only needing a dropdown under the header, but the Historical Data screen needed a bit more work. Thankfully, it seemed that whoever was in the file previously had already made an iteration of the Historical Data screen, so it was a great springboard to bounce off of. Per Abhishek’s request, I reformatted the previously made screen, adjusting the legend, the total charge / total discharge column, the state of charge reader, and the visual representation of the charge states. I even set the stage for future designers to come in and continue by laying out a framework for the sankey diagram screen.
With my work done, I presented it to Abhishek, who thanked me for my help covering for my coworker and finishing off the work by its due date. It felt really good to be able to help out both Abhishek as well as my coworker who needed the hand getting it done in time. I have had a hand in a brand-new site coming soon, and helped develop both these screens, as well as the framework for future designs for the site.
Unfortunately, due to NDA, I am unable to show screenshots of the project, however, I can talk about my work. I apologize for the inconvenience.
Electrification Simulator
The head of the Electrification department was interested in developing a simulator for their electric vehicles at construction sites. It was pitched to me as a “SimCity” like tool that would be an “interactive based site creator experience for electric construction / quarry site.” This project was relatively new and was at the very beginning of its development.
Because of my knowledge and experience with game design, this project was given to me near the very beginning of my internship and was pitched to me as my primary project for my time at CAT. I had all 3 months to complete it and take it from a simple idea, to a fully developed prototype in Figma. I was given a user persona to start with and a point man, Brandon Pickett, in case I had questions. Everything else - from the research, the journey map, the design, the functionality - was on me to figure out. This would be my major challenge of this project: understanding everything needed for a simulation of electric vehicles and a worksite.
My first course of action was to begin researching. I researched various simulators, from games like the Sims, to other electric vehicle simulations, as well as Electrification as a whole, seeing what were the primary metrics that these electric vehicles measured. With data in hand, I developed a journey map to measure the experience my hypothetical persona would go through, and the various mechanics that it could imply. This was a great tool for initial brainstorming on what this simulator would both look like, as well as how it would function, when these mechanics could occur, and how they tie into each other. With my journey map complete, I ran through it and drafted a features list, labeling the various sections of the simulation, what mechanics they might have, as well as what they would measure.
Now that I knew what I wanted out of the simulator, I then began hand drawing sketches of potential layouts to later use as reference when digitizing. I had a white board in one hand, serving as an infinite playground where I could test anything I wanted, then when I landed on a design I liked, sketched it in pencil in my sketchbook. Thanks to my years of experience in game design, this stage of concept sketches of layouts was nothing new to me, and by the end of the process I had a hearty list of screens sketched and planned out.
With a solid plan in my head, I shifted to Figma and began the greyboxing stage. This stage was relatively simple and primarily consisted of key points of the simulation as well as some early plans of animations I wanted to incorporate. However, this stage came with a problem that wouldn’t rear its head until later. While I had the set-up stage of the simulator relatively figured out, the screens used for the simulation itself when running were very up in the air, with little details figured out. This issue primarily stemmed from my own lack of experience and knowledge on electric vehicles at the time. I didn’t fully grasp what the simulation was actually for and what the user would really want out of it.
Desperate to impress on my first meeting for the project since it was pitched, I persevered and moved on to the high-quality mockups for the screens I had figured out more than the simulation. I scoured the internet and CAT files to set up my screens for the login system, the location selection, images for animation, the set-up stages, etc. By the end of this stage, I had 11 high quality mockups ready to present and to get feedback on.
After receiving the feedback though, it was clear that my ideas needed more time to develop, sending me back to the metaphorical drawing board to iterate on my ideas. It was clear to me that I needed more information on electric vehicles and what our users would really want out of a simulator like this.
I got in contact with my mentor, Brandon D’Adam, and together we worked on brainstorming ways to develop the simulator section of the experience even further. In this new version, the simulator would function more like Figma, with a similar layout and tools. While this stage was a far better improvement to my previous work, something still felt off;. I knew it could be improved.
After a couple of brief online meetings, I was finally able to work in person with my contact, Brandon Pickett, an expert in the Electrification team. Brandon and I went through the whole design file that I had created to that point, as I asked him all the burning questions I had about the project and what a user would really want out of it. With his help, I had a newfound sense of direction.
With his guidance, I was able to move on to what would end up being my final version of the screens. This version of the simulator felt like a combination of all the differences that I had developed to that point, including both new ideas, as well as ones that were dropped at one point.
In this new version, the user would start out at a sign in screen where they would log into their CAT account. From there they would be brought to a screen listing all of their past site simulations, where they can either open an old sim, or make a new one. Selecting a new project would transition the user to an animated view of the globe where they could input their desired site location and name of the simulator. Upon hitting ”Next”, the UI would move off screen as the globe animates, zooming in through the clouds and to the user's entered location using Google Maps. With the location on screen, the user could then set up the boundaries of their worksite, including vital information on details of the simulation they want to run. After completing the setup of the worksite, the user will then have the option to establish the various chargers they plan on bringing to the site for their vehicles. The number of chargers can be as many as the user needs, simply requiring some minor details for each charger. With the chargers for the vehicles in place, the user then moves onto establishing their vehicles. The user can include any number of vehicles already tied to their CAT account, or they can add a brand new one. When establishing a vehicle, the user has to fill out vital information for the simulation like how much power it has, if it is still or moving, what its route is, how fast it should move, and so on. Once the user is satisfied and all the setup has been completed, they are free to start their simulation! In the simulation itself the user can manipulate various things from weather, to editing vehicle information, to the view of the geography, etc. This all leads to the most important aspect of the simulation, the data screen. This screen records and predicts all the data calculated based off of the information the user had put in throughout the experience. Here, the user can see how long the vehicles charged for, what were their peak hours, the total energy used, how much it would cost, and so much more. All of this data can be compared to previous versions as well if the user is altering an already established simulation. Once ready they can even export this data by either emailing it to fellow employees or even to the vehicle drivers, helping them know their route and vehicle information for the day.
All of this was tied together within a high-quality prototype containing animations, transitions, animated components, variants, and overlays. It really felt like the culmination of everything that I had learned while at CAT and is by far the biggest and best piece I had the honor to work on while there this summer.
Unfortunately, due to NDA, I am unable to show screenshots of the project, however, I can talk about my work. I apologize for the inconvenience.
Final Thoughts
My time at CAT this summer has been absolute delight. It has taught me so much about not just the industry I’m going towards, but also about myself and how I operate best as a designer. That is why I am so honored to say that I will be continuing my internship into my Senior year of college, balancing work and classes throughout the fall semester! I am so pumped to be able to continue my career journey and I cannot wait to get right back to it! Here’s to Fall 2024 and to CAT; thank you!
