JOHN DEERE
I was contracted at John Deere in 2022 to 2023 develop the future technology of the Operations Center. One of the missions of this experimental team was to allow farmers and farming operations managers to have more insight into their fields. To do this, I wanted to create an experience using 3D browser engines to integrate with their map and fill it with visual representations of their farm equipment data, weather, and soil data. With this task, I had to first dream of how the user will orientate and navigate their field. One thing was that the average farm owner was in their late 60s. This means having complex video game like 3d controls would not be easy for them to use. I looked to Google 3d and Google earth as inspiration.
3D UX Design Babylon 3D Map View
Let me explain a bit about the core technology. We used Babylon 3D as a in browser gaming engine to emulate the work we did on Unity Project the team worked on prior. What we wanted to do was is to bring the Unity game engine version of the farm data but to not burden the farmer/user with installations of an executable and give them a simpler, easier UI but a more powerful and useful way to visualize their data.
In this test branch of Operations Center, I put an icon for 3D View using the design guidelines that already exist in Operations Center. Believe it or not, there was plenty stakeholders and interested parties to get the approval to get that branch and icon setup. The ultimate vision was to have the 3D view switch over while the side panel and lower 3D panel was still visible so it looked just like the same view, however in this branch, we made a loading screen and opened a 3D tab or popup that we tested in both Safari and Chrome.
Screens for 3D View Tutorial of First time User
The Loading screen is to hide that the shaders are compiling. My background as a 3D artist is what really gave me insight on how to understand the engineering and development terminology. I used the John Deere modal components for a new feature but I also had to have lots of compliance meetings to add the annotations to the design library system. I had to find examples of it being done in other similar tools and how it could look as a new modal variant in Figma.
After showing one feature, the user will acknowledge they understand or hit next triggering the mask to lift. You can see that mask will. only obscure parts of the UI that is not part of the subject. For example this image is showcasing the Season Timeline.
I had the developers create a spotlight to the coachmarks to show the specific areas that tutorial was trying to highlight.
When complete, these coachmarks will not show up again unless the user requests for it again in the help section. On the backend, the USER is marked completing the NEW FEATURE path.
After the 3D mode is closed, we give the user a chance to comment on this new feature and how we as designers can improve the experience.
3D UX Design Layer Selection
Using a lot of the the same techniques, I have to get creative on how to show the developers how I want users to highlight layers under the soil from soil moisture at various levels, where there is an irrigation system, what does the pesticide spray information looks, ect.
Once the developers made a working 3D map with Google map api images being textured on to the farm, I can position our test farm to create the ideal scenarios.
Here i used photoshop to remove the background and imported my alpha layer into Figma. Now I can render concepts of how I want to do depth selection.
In retrospect, I wish I strengthened the ghosted layers but I think it worked regardless.
Creating new components to look like our existing components
AR PROJECT INTEGRATION
Simultaneously I was also tasked to visualize an augmented reality experience tied to the same project. Here I am depicting how AR glasses can show areas sprayed by pesticides and tank mix. I was pitching for having event playbacks of the tractor/sprayers covering the field at specific events. This was a very hard project to do as getting accurate GPS data to match our tablets/goggles was extremely buggy.