OPI Systems Site Redesign
Product
Background
OPI Systems is grain management company that offers both hardware and software products which allow customers to track and manage the condition of their stored grain. This includes monitoring temperature, moisture, and weather metrics as well as automatically or manually running fans and heaters to maintain specific parameters.
The value this product provides is in allowing customers to maximize the amount of time that grain can be stored and to keep the grain at a specific moisture and temperature so that when it is sold it brings a higher price.
Understanding The User
The OPI site is used by users of differing technical abilities on multiple device sizes.
This includes farmers who monitor their grain once a day on a mobile device, tech savvy farmers who use a tablet or mobile device to monitor and adjust moisture and temp goals multiple times per day, and grain management service technicians who constantly monitor grain on a desktop for multiple large customers.
Users have the same goal when using the site. The goal is to quickly see if there are errors or problems within any specific grain bin and to resolve those problems as efficiently as possible.
The Problem
OPI's grain management system is web based and faces several challenges.
The site is used by users of differing technical abilities on multiple device sizes and is not responsive to smaller devices which creates usability challenges for the 60% of users who use a mobile or tablet device.
Additionally, the site was originally designed with a limited feature set and additional features were added throughout the years. This resulted in a disjointed user experience as many features were related to each other but there was no link between the features to allow the user to follow a natural flow to solving a problem that they had detected.
One final issue is that the site was designed several years ago and was in need of a visual restyling. Many of the colors and fonts were not consistent with the brand or with other areas of the site.
HIGH LEVEL TIMELINE
Eight months to conduct research, develop requirements, refine information architecture, create a style guide, create a responsive component library, redesign specific screens, and create and revise mockups.
THE TEAM
The team consisted of an engineering lead, a PM, and myself as the UX/UI designer.
.
KEY GOAL
To design a restyled, responsive site with improved usability for all identified types of users.
My Role
UX design for the OPI Systems management site.
My responsibilities on this project were to identify the specific types of users of the site and their specific goals when accessing it.
I worked with the PM to write a requirements document based on the prioritized issue list.
Additional responsibilities were to create and revise user flows and design a revised site map to address the product requirements.
I created a visual style guide based on collaboration with development using the TailWindsUI framework. I modified several existing components within the TailWinds UI kit to comply with my style guide and created new responsive components as needed. I created mockups at varying fidelities and continuously revised the design.
Once I had a complete toolkit created, I applied the new styling to every screen in the site and redesigned several targeted screens to increase usability on all devices. These mockups of the revised site were done with three specific breakpoints.
All of this work was presented and reviewed with the development team and product manager every two weeks throughout the project.
Monthly reviews of concept designs were conducted with multiple customers throughout this process to ensure that the redesigned screens were solving the issues that users had identified.
Defining The Solution
The solution for this project consisted of changes to the information architecture of the site, revision of several screens to be more usable on multiple devices, creation of a visual style guide, creation of a UI kit with several custom components, and mockups of the entire site which incorporated all of these items. several changes to the structure of the league, which made changes to the user interface necessary.
The first step in this solution was to create a site map which included the revised navigation as well as proposed relationships between sections to increase the efficiency of user flows.
Below is an initial site map that was created to illustrate the relationships.
A visual style guide and UI kit was then created which aligned with the brand guidelines. All components are responsive and specific mobile versions were created for most components.
With a defined style and components created, I was then able to redesign specific screens to improve usability in all screen sizes.
One example of this is a screen called Fan Control. This screen allows a user to see all of their bins that have fans installed and to see the status of each fan as well as additional information about the bin. This screen previously presented data to the user in a table view with many different columns with cells that contained buttons. It was difficult to use even on a desktop machine and nearly impossible to use on a mobile device.
Below is a screenshot of the original Fan Control screen.
The redesign does away with the table view and uses a list of tiles with each tile representing a bin. The most important information is shown on the tile and the user can select a tile to see details of that specific bin. This design is much more readable to the user and eliminates the constant side scrolling that was previously required to view the details of a bin.
The design meets the goal of making this screen usable for all device formats.
After redesigning the crucial screens to address usability concerns, I then captured every version of every screen in the system and applied the new styling to each screen. I created mockups in mobile, tablet, and desktop views for each screen.
Some examples of these are shown below.
Learnings
Time spent building components is well spent
Creating responsive components for every element can seem time consuming, but the time saved when mocking up and redesigning a large number of screens makes every minute spent worth it. Additionally, this pays off every time new design work is to be done in the future.
Mapping out a strategy for completing work in a specific order is crucial
I had not previously created a design system before and mapping out the order that work should be completed was very helpful for this project. I wanted to ensure that the changes being made were needed by the user, but also to ensure that I completed steps toward the goal in the most efficient way possible. This meant creating a design system before diving into what changes I wanted to make to my screens. This meant speaking with users to find out what was working and what was not working. Creating a strategy for this project ultimately made it successful.