Food Safety Redesign Overview
Highland Hub, a comprehensive software suite developed by Highland Ag Solutions, features a variety of products, including Compliance Manager (formerly known as Food Safety). A vital component of Compliance Manager is Daily Logs, which are crucial for documenting events required by regulatory agencies during food safety audits. Maintaining thorough documentation is essential, as inadequate records can result in penalties and reduced productivity. Consequently, the software must offer an intuitive interface and adaptable functionality to streamline the recording and documentation process.
The Challenge
Initially, I expected the reconstruction to be straightforward, given the clear flaws in the previous workflow. However, a deeper examination of the Daily Logs structure and its integration with other products revealed the need for careful consideration of data architecture and endpoints. With this understanding, I began documenting user flows for each of the four branches within the Daily Logs category.
One of the first issues I identified was the misuse of radio buttons, which were functioning as links to separate pages, each containing its own table. Additionally, external filters caused confusion and led to incorrect search results.
Furthermore, within each table, structural problems, such as wrapped lines in rows, resulted in unnecessarily tall tables and wasted space in adjacent columns.
Lastly, there were several inconsistencies in naming conventions; for example, the page displayed two labels (Create and Generate) that referred to the same function.
As seen above, the previous workflow caused many challenges including stacked tables.
User Interviews
Before starting on the wireframes, we conducted user interviews to validate existing challenges and uncover any potential issues that may have been overlooked.
While some feedback was ambiguous, we identified specific pain points related to user experiences, particularly with the use of external filters. Users struggled with a lack of clear guidance on how to begin a task, often selecting filters in incorrect sequences, which led to inaccurate or empty results.
For example, the unusually large expanded accordion image forced users to scroll up and down frequently to view table results after selecting checkboxes.
Overall, the customer sessions were immensely valuable. They not only highlighted user frustrations but also empowered customers by demonstrating that their feedback was acknowledged and taken into account.
A Multi-Faceted Approach
Before starting on the wireframes, we conducted user interviews to validate existing challenges and uncover any potential issues that may have been overlooked.
While some feedback was ambiguous, we identified specific pain points related to user experiences, particularly with the use of external filters. Users struggled with a lack of clear guidance on how to begin a task, often selecting filters in incorrect sequences, which led to inaccurate or empty results.
For example, the unusually large expanded accordion image forced users to scroll up and down frequently to view table results after selecting checkboxes.
Overall, the customer sessions were immensely valuable. They not only highlighted user frustrations but also empowered customers by demonstrating that their feedback was acknowledged and taken into account.
High Fidelity Wireframes
Through years of presenting to cross-functional teams and stakeholders, I’ve found that low-fidelity wireframes are most effective for brainstorming sessions. Simple boxes and placeholder text often fail to engage the audience, while high-fidelity wireframes consistently convey the intended message. With a well-established design system, the additional effort required for high-fidelity designs is minimal.
The sample images showcase numerous enhancements over the previous design, including the replacement of radio button navigation with a tabbed data table and the integration of external filters directly into the table. Additionally, the “Create Logs” radio button has been transformed into a dedicated three-step wizard page.
This approach utilizes progressive disclosure to break down complex information into manageable, focused steps. The insights gained from this project have also proven valuable in other redesign efforts.
