Duration: 1.5 months
Role: UX/UI Designer
Digitising paper forms into a mobile app
The problem
"How might we create a seamless mobile experience for producers transporting animal livestock?..."
Integrity Systems and Meat and Livestock Australia (MLA) wanted to transform the way meat and livestock producers completed an eNVD form (mandatory legal contract producers fill out for quality assurance). This form is traditionally quite long and can be quite tedious to fill out.
Preliminary research found that producers and transporters in the current process have faced technological difficulties in shifting the process online from traditional paper based forms. However, with issues around lack of traceability, auditing capability and slow process times, MLA made the radical decision to move the entire process online and go mobile.
My role was the lead UX/UI designer on the project. I was in charge of leading and executing the design process all the way to implementation. I worked in an agile environment in a scrum team, working closely with developers and product owners from both Servian and the client side.
Understanding the problem
How do you build a seamless experience when you are dealing with multiple complicated forms and logic...
Designing a mobile app for producers was challenging for a number of reasons. Some of these included:
-
Producers showed a cultural reluctance to move to digital. The mobile app needed to really consider accessibility for elderly users and needed to be easy to use for successful adoption
-
There are over 6 different forms with multiple overlapping dependencies in logic. Mapping these logic flows (organisation had no existing documentation on flows) and creating a simple flow experience was a challenge
-
Livestock farms don't have wifi on the yards where they exchange animals with transporters. To enable information exchange, new QR code sharing paradigms had to be explored
"If this app isn't easy to use, I can see phones flying across yards..." - Producer
How we did it
My process
Due to the tight deadline requirements, I was asked to take a lean research approach.
1. Research and consolidation
-
Secondary research into competitor apps to understand gaps in current user experience for MLA
-
Consolidating past user research conducted by MLA to understand user needs
-
Working with developer team to map out logic using paper forms
Output: Report and documentation of findings
2. Workshops:
-
Designed workshops to help understand functional requirements and gain stakeholder input
-
Worked with stakeholders to develop sketches of core features for MVP
Output: Workshop outputs for input into design
3. Research and auditing
-
Developed design system
-
Rapid design from low-fidelity to hi-fidelity prototyping
-
Conducted group feedback workshops (x4) to validate prototype and iterate on design
Outputs: Final hi-fidelity design for handover, UI-kit
Thinking behind the design
Solutions for tricky design challenges
1. Making sense of complexity
-
The logic for each type of animal can become complicated. One of the issues in the form process is that providing one particular answer can generate an entirely new set of additional follow-up questions that can add time to the process
-
It's hard to provide transparency to the user in terms of steps and time to complete when there are multiple interdepencies
-
The challenge was to come up with a design that provides transparency while still demonstrating form progress to the user and turning the complexity below into something simple
Solution
-
Create a two level navigation hierarchy providing transparency over overarching steps and substeps without providing exact details on total number of steps (which can change rapidly)
-
Use chevrons and arrows to indicate progress of moving forward through the form
-
In the final solution, to make the process of filling the form faster, all the additional questions were answered on one page. Each question auto-generated sub-questions underneath
2. Transferring large amounts of data with no wifi
-
When exploring different methods of transferring data with no wifi, after a few rounds of user testing - the stakeholders favoured using QR codes over bluetooth transfer. This was to reduce potential confusion for less technologically confident producers. The issue with static QR code transfer was that it can only fit in a certain amount of data. The form surpassed this amount resulting in the need to produce multiple QR codes to scan.
-
The major issue with multiple QR codes is that users are unable to scan one QR code at a time. This meant exploring design options for a rotating QR code paradigm
Feedback
-
Making buttons and text fields larger and more clickable for accessibility
-
Supporting design with tutorial videos to help users navigate unfamiliar design patterns (e.g. rotating QR code)
-
Give clear warnings to the user where key functionality for phase 1 was not yet available
-
The end users were happy with the logical flow and design of the app
-
The app is currently live and being used by producers
Project Outcomes
Launch
Launching the app on the app store!
-
Design of the hi-fidelity prototype was successfully completed within required deadlines
-
App will allow producers to complete an eNVD form faster and digitally audit and track their forms
-
Client was happy with work provided and I was asked to be resourced for phase 2 design of the app to add further features and functionality