A team of two; Myself and a developer.
This project is a re-design of GSI's internal and dealer-facing software tool, AirPic.
Airpic is a quote-generating software offered by GSI for internal and dealer use to generate quotes and data on grain bin systems and fans. It offers the user a variety of options to pitch to their client. It is also an air-stream simulator for the user's already existing system. This is what AirPic has looked like for over 25 years. After inputting the customer's fan and bin information, the software generates a list of possible fan model combinations along with the resulting data if these fans were installed at the client's site.
It's almost like you can hear the Windows XP boot-up in this jpeg.
A grain bin is a large storage unit that can hold corn, wheat, and other grains after they have been dried and prepped for selling. Grain bins need to be able to keep adequate ventilation, as any excess or lack of humidity and temperature can ruin thousands upon thousands of dollars worth of crop.
Grain bins are cylindrical and come to a point at the top. They're shaped to a point because of the shape the grain takes when you pile in grains at the same spot; imagine pouring sand from your hand to a set location on a surface - the sand begins to form a point. The first diagram below shows a form of drying system GSI sells, but most importantly, take note of the fan in the lower right corner of the diagrams. It helps draw in air to ventilate the large bin.
The machinery depicted below the diagram are two different types of fans. The smaller ones as shown on the left are used for more local, smaller type farms, as the giant fan on the right are essentially stacked upon each other and are used for large-scale commercial farming. These fans have a variety of different models and power for many different use cases, depending on the farmer's budget, land plotting, and any existing fans.
Since GSI keeps a tight and friendly relationship with many of our partnered dealers, I had some colleagues reach out to numerous dealers that often utilize AirPic and tell us about their experience with the software. There were plenty of stories of frustration and confusion, along with a couple of stories where sometimes their secretary was the one that had to operate AirPic and send over the data to dealers later, which led to issues because their secretaries had trouble understanding certain concepts due to their unfamiliarity with the equipment.
Responding to the gathered user stories, I had established two personas to keep focus on the end-user for this product:
In order to make educated decisions, it's crucial to understand the form. I had watched and analyzed this video to understand how each category worked, in case it needed editing. In addition to the video, the user stories gathered before along with an in-depth interview with two AirPic specialists resulted in the next section.
I began to analyze AirPic's UI/UX, with some need for clarification and guidance from an engineer who works with AirPic.
Organization and Formatting, The Aeration Slider, and Ambiguity. (Here's a page I used to organize my thoughts as interviews and user stories were given).
The AirPic has two main functions: air stream simulation and quote generation, and collects data for two types of equipment, fans and grain bins-- didn't know that? It's because the organization of the original screen piled all questions for both functions and equipment all together in one page, ungrouped and unorganized. This was a formatting and organization problem. In the upper right corner of the page of the image above, you can see I had begun to brainstorm on how to organize that information; two tabs for the two main functions, and grouping for questions on a respective piece of equipment. The AirPic Engineer (Brad Lott) also had informed me of needing to make it a web application, instead of a downloadable software.
The Aeration Slider was also a huge problem for users, as sliding it somehow changed a category, then within that category you used the slider to choose an item within that category (it already doesn't make sense to explain it, so I included the graphic below to help). I needed to come up with a solution that dealt with organizing information in this sense.
Think of the information this way: I needed to create an interactive question that allowed me to organize the information, as in the image below. The big bucket is, generally, the topic: Aeration, in this case. The orange buckets are the separate categories within Aeration, i.e. cooling, drying, natural air drying, etc. Once a category is selected, you can then select an item to finally answer the question of "how is my grain bin aerated?". This process of thinking is represented by the lower left corner of the page I had sketched above, as well as visualized in the graphic below.
Especially in the user case of "Madeline Fischer", our second persona, looking at AirPic posed a lot of questions on what the "question" meant. "Frequency"? Are we talking about the fan, or the grain bin running the fans? "Peak Angle"? What's the difference between Peaked and Leveled, and where does that happen? Are they talking about the roof? Brad Lott had told me,
"We get more IT calls per month about AirPic and what the heck it meant, than people actually successfully using it!"
Around 70% of the participants immediately commented about the ambiguity of the questions asked in the original version of AirPic upon interview.
Create an interface where the user will clearly be able to notice the web app comes with two main functions: being an air stream simulator and being a quote generator. Other goals include being able to differentiate information input for fans vs. bins, transform the Aeration slider to become more understandable, and to minimize or completely remove ambiguity, if possible.
Keeping that "Bucket" organization in mind, what are ways to express conditional options in a contained way? I came up with two options: a dropdown + selection option, and an accordion menu-type option. You can explore these prototypes by clicking on the images below. I've replaced the technical terms with "types of animals" and "animal breeds" to have a fair, easy-to-understand prototype focused on just testing the usability, and not the content.
The ultimate result of this test was that the drop-down + selection option (option 1) was overwhelmingly the preferred interaction among our target user volunteers.
How do you make a question less ambiguous? 100% of those who had participated in the user study had said that they were visual people upon being asked. During the debriefing for this project, I was given many supplemental images to help me understand different concepts. The image below explains what "Peak Angle" was asking for.
This gave me the idea to use visual options for the questions that could be depicted with a graphic. You can see an example of that, below.
I had also come up with a solution to allow the user to hover over the text to allow a callout to explain what the question is asking. This allows for first time users to have a backup plan before needing to call IT, while leaving the seasoned AirPic users with the ability to quickly fill out the form with only minimal UI design. This concept is also shown in the image below.
After also reviewing this decision with my test group, it was also recieved with very positive feedback.
Since it is essential I change AirPic from a software application to a web app, along with addressing the formatting issues and utilizing GSI's branding language, I had created two forms of the survey for the volunteers to choose from. The tabs are meant to show the user that there are two separate functions of the application: Air simulation and Quote Generation. The fan and bin input sections are now differentiable, addressing organization and formatting. As requested, more visual graphic options were offered for the more ambiguous questions, like bin shape, and Peak Angle. Ultimately, the favorite was Option 2 with the static left sidebar.
Option 1: Two Tabs, Scrolling.
Option 2: Fixed side, right section interaction.
Creating the final interface was just a matter of rebranding after receiving user feedback from all possible changes to the main problems, and applying those design decisions to the final layout. The colors are high contrast; soft black, white, and ochre, following GSI's brand. Now a dealer can access their secure and private web app, AirPic, and be able to input their client's data with ease.