The original application had been built in 2013, and the codebase had to be rebuilt. There was an opportunity to talk to the users and capture some of the issues they’d like resolved, as well as update the user interface.
“How might we help orchardists record and manage their spray applications?”
I ran usability testing with 3 orchardists to gain a better understanding of the application. I observed that they were primarily using the spray diary to administer and record spray applications and use the reporting to check when and what they were administering. Inside these forms, key areas of improvement became apparent.
I took a deeper look at the tasks highlighted from usability testing, taking a better look at the UI. The existing application had inefficiencies in the design and little consistency across the pages. By mapping the findings from the research to UI changes, I had a clear direction of where to begin building out the user interface.
A design system involves styling, and to do this effectively the application needs to have an identity. Logo, type and colour are the foundational parts of a visual identity. I started by creating a logo for the spray diary which aligned with the parent company Johnny Appleseeds branding. From there, I selected a typeface and colours which aligned with the identity of the Spray Diary.
Using Figma, I prototyped the UI library. This consisted of a complete overhaul of the UI components inside the application. This library took into consideration the research findings which included UX changes such as feedback from form fields.
The result is a UI library which creates greater consistency and communication. This has been used, alongside the CSS framework Bootstrap to update the Spray Diary application user interface. It has created more consistency, leading to less confusion inside the application. This has allowed for more alignment with design decisions and helped with development times.
A big learning from this project was utilising usability testing to drive foundational UI decisions. Building empathy with the users at the start of the project ensured I felt confident when including more intensive changes, such as field feedback, to the user interface.
