Consulting Training Blog Careers About Us Contact Us

Case Study

  • Client: Multi-Billion Dollar Energy and Agriculture Company
  • Project: Redesigning the User Experience of a National Commodities Contracts Platform
  • Country/Region:

A major energy and agriculture company engaged Intertech to redesign and develop their Grower Experience Portal. Farmers and co-ops use the portal to check the status of their commodities contracts. The application tracks shipments, payments, deliveries, invoices, and commodity pricing. Ultimately, the new Grower Experience Portal is an overview of all the grower’s commodities (grain, wheat, corn, etc) in one place.

As a result of our consultants’ work, the client now has an industry-leading product with intuitive user experience. The redesign allowed the client to leapfrog the competition in terms of the information provided to its users and ease of use. The Grower Experience Portal is the most recent development in a long-standing relationship between Intertech and the client.

Technologies Used

  • UI/UX
  • .NET
  • Agile / Scrum
  • Angular
  • JavaScript
  • Redux

Challenge

The client’s Grower Experience Portal is a central dashboard for commodities contracts for farmers and co-ops around the world. However, the user interface and experience for the portal was a roadblock for many users. Specifically, most growers want to be able to use their mobile devices (phone or tablet) to check the status of their data. Unfortunately, the original user interface displayed data in a table. This led to awkward zooming and horizontal scrolling issues, ultimately producing a clunky experience using the app on mobile.

Customers of the product have varying levels of technical savvy with software products. For many, the challenges of the user interface was a support issue because they couldn’t find the data they needed. For others, the poor experience could contribute to customer loss to competition. In an effort to ensure a seamless cross-browser and cross-device experience and stay ahead of the competition, the client engaged Intertech to modernize and centralize the styling and user flow.

Process

At first, Intertech’s expert consultant worked alongside the client’s development team within the existing codebase. Over the course of a typical work week, the consultant identified areas of technical debt and opportunities for improvements in developer workflow as well as user experience. Working closely with the client’s management team, the next agile sprint included a story to rewrite the existing eight separate stylesheets into a single global stylesheet for the application.

Rewriting the stylesheets enabled our consultant to also leverage the power of SCSS to add variables and imports into the stylesheet workflow. After the rewrite, colors, fonts, spacing, etc were all defined once in the main stylesheet and then used seamlessly throughout the application.

Next, the Intertech consultant addressed the creation of reusable components within the user interface. We converted the existing tabular data into responsive data cards that sit alongside each other on the dashboard. These cards are responsive using newly-rewritten CSS grid styles, so they are alongside each other when viewed on desktop, but they stack when viewed on mobile devices. The application now reuses these cards throughout the various screens, completely replacing copy-pasted code.

Finally, our consultant conducted an audit of browsers and screen sizes for the application. Giving priority to the most commonly-used browsers and devices, the team systematically resolved any display issues in the new interface.

Learn More About Intertech Consulting

Result

The results of this project are two-fold: improving the user experience for customers and decreasing technical debt and workflow barriers for the development team.

The new grid system aligns with the original intentions of the UX designer, and the improved interface has already garnered many compliments from users. As part of the feedback process, we heard:

  • "The app is much easier to use"
  • "I love the new layout and navigation system"
  • "The app looks brand new"
  • “All of my important information is right on the home screen"

This is clearly a huge win for the client, as their app has surpassed the competition in terms of usability and modern styling.

Additionally, thanks to the introduction of card-based components, the application loads faster, especially for growers with lots of data. The cards show data summaries, and then the user can tap the card to see more detail, reducing the upfront need for heavy database queries on page load.

In terms of decreasing technical debt, Intertech’s consultant helped implement the Don’t Repeat Yourself maxim of good software development. Using SCSS, we were able to use variables and imports to reduce redundancy and provide a single, global source of truth for the stylesheets. In addition, reusable components mean that elements of the user interface are no longer copy-pasted code. Instead, they’re defined in one place.

The Intertech consultant provided coaching as well. By helping with code reviews and walkthroughs on how to use the new hierarchy for any new filters, Intertech helped the client’s development team identify how to incorporate this approach in other parts of the application moving forward.

Our Story: Intertech

From the day it was founded in 1991 by local entrepreneur Tom Salonek, Intertech has been a company with an important difference: unwavering commitment to customers, employees and the broader community through excellent work, smart workplace and financial management, and creative philanthropic involvement.

Learn More About Intertech Consulting