T&G Global

T&G Global

Orchard Hand

Orchard Hand

Orchard Hand

T&G-banner

Overview

T&G Global is a business working alongside a global team of growers, marketers and distributors to produce some of the world’s safest fresh fruit and vegetables.

In 2017, T&G released Orchard Hand, an orchard companion application which enables the accurate and timely collection of information from within the orchards across many locations for reporting, improved orchard outputs and data-driven decision-making. The app has been valuable for data collection but the users of the app who work on the orchards are growing increasingly frustrated with the app due to navigation and usability issues among other things.

My team and I redefined and improved the user experience of Orchard Hand through a one-week long design workshop and continue to work with the development team to build, test and iterate.

Overview

T&G Global is a business working alongside a global team of growers, marketers and distributors to produce some of the world’s safest fresh fruit and vegetables.

In 2017, T&G released Orchard Hand, an orchard companion application which enables the accurate and timely collection of information from within the orchards across many locations for reporting, improved orchard outputs and data-driven decision-making. The app has been valuable for data collection but the users of the app who work on the orchards are growing increasingly frustrated with the app due to navigation and usability issues among other things.

My team and I redefined and improved the user experience of Orchard Hand through a one-week long design workshop.

Overview

T&G Global is a business working alongside a global team of growers, marketers and distributors to produce some of the world’s safest fresh fruit and vegetables.

In 2017, T&G released Orchard Hand, an orchard companion application which enables the accurate and timely collection of information from within the orchards across many locations for reporting, improved orchard outputs and data-driven decision-making. The app has been valuable for data collection but the users of the app who work on the orchards are growing increasingly frustrated with the app due to navigation and usability issues among other things.

My team and I redefined and improved the user experience of Orchard Hand through a one-week long design workshop.

Overview

T&G Global is a business working alongside a global team of growers, marketers and distributors to produce some of the world’s safest fresh fruit and vegetables.

In 2017, T&G released Orchard Hand, an orchard companion application which enables the accurate and timely collection of information from within the orchards across many locations for reporting, improved orchard outputs and data-driven decision-making. The app has been valuable for data collection but the users of the app who work on the orchards are growing increasingly frustrated with the app due to navigation and usability issues among other things.

My team and I redefined and improved the user experience of Orchard Hand through a one-week long design workshop.

My Role

UX design, Interaction Design, UI Design, User research synthesis, Prototyping, Workshop facilitation and participation 

 

Year

2018

 

My Role

UX design, Interaction Design, Prototyping

 

Duration

On-going (currently working with the development team)

 

My Role

UX design, Interaction Design, UI Design, User research synthesis, Prototyping, Workshop facilitation and participation 

 

Duration

On-going (currently working with the development team)

 

My Role

UX design, Interaction Design, UI Design, User research synthesis, Prototyping, Workshop facilitation and participation 

 

Duration

On-going (currently working with the development team)

My Role

UX design, Interaction Design, UI Design, User research synthesis, Prototyping, Workshop facilitation and participation 

 

Duration

On-going (currently working with the development team)

The Challenge

Orchard Hand is a grower application that facilitates data capture in the orchard in real-time. The application provides excellent data for the business, however, there has been a number of usability issues and pain points described by end-users through a research activity. T&G have synthesised these insights and identified where a subsequent UX Design process can add value by lifting the user experience of the app.

Our challenge is to help T&G redesign and evolve the user experience of Orchard Hand to be more suitable for staff members that use the app on a daily basis to record data as they complete tasks in the orchard. The UX design will inform a development iteration of the application.

The Challenge

Orchard Hand is a grower application that facilitates data capture in the orchard in real-time. The application provides excellent data for the business, however, there has been a number of usability issues and pain points described by end-users through a research activity. T&G have synthesised these insights and identified where a subsequent UX Design process can add value by lifting the user experience of the app.

Our challenge is to help T&G redesign and evolve the user experience of Orchard Hand to be more suitable for staff members that use the app on a daily basis to record data as they complete tasks in the orchard. The UX design will inform a development iteration of the application.

Approach

We had a kick-off meeting with the client to get an understanding of their business goals, challenges, delivery timeline and budget. We learned that a couple of Orchard Hand users (SMEs or subject matter experts working at the orchards) and the T&G product development team were available to collaborate for a week. We proposed to hold an intensive one-week design workshop with the whole team.

Momentum and focus: The workshop will give us the momentum and focus needed to resolve the core user experience challenges.

Collaboration: The workshop allows for co-location and collaborative design for alignment and to reduce miscommunication or decision lag. 

Leveraging knowledge: We will be able to engage and utilise business understanding by designing with users, SMEs and the development team during the workshop.

Prioritised for value: The workshop will help us define a design backlog that is prioritised to the areas that will deliver the most value and are the most feasible to then build. 

Discover

Pre-workshop: We reviewed the existing user journeys and insights of the priority users as well as the videos that were recorded, showing users doing their daily activities in the orchards while using Orchard Hand to record data.

I created profiles for the three user roles that we agreed to prioritise: QA, QC and Sector Manager.

Kate, another user experience designer and I also mapped out the pre, in-app and post journey of the priority users and the screen flow of the current app to get a better understanding of the where the issues lie and find opportunities to improve the user experience. By mapping out the current situation, we developed a better understanding of how users currently complete tasks in the app, recorded data and the differences between the online and offline mode of the app.

QA-video

Screenshot examples from the videos: Users were struggling to see what was on the screen under the bright sunlight down in the Hawke's Bay. Data is continuously synced and stored as the app needs to be able to work offline since users may lose connection out in the orchards.

Prioritised roles 

Orchard Hand - Current flow and screen mapping (done in Mural)

Orchard-hand-screen-flow

Click on the image to enlarge it and view the detail.

Focus areas for the redesign based on findings from the discovery phase

  • General navigation and language
  • Knowing where you are within the app
  • Surfacing only relevant tasks and data
  • Providing positive feedback for completed in-app tasks

Focus areas for the redesign based on findings from the discovery phase

  • General navigation and language
  • Knowing where you are within the app
  • Surfacing only relevant tasks and data
  • Providing positive feedback for completed in-app tasks

The Workshop

For the full one-week workshop, our team (1 UX Strategist, 2 UX Designers and Managing Director) worked together with our stakeholders, end-users (1 Sector Manager, 1 QC and 1 QA) and the development team (2 Front-end Developers and 1 Back-end Developer).

Workshop T&G

Workshop Day 1: Immerse and Discover

Focus: Develop a deep understanding of the problem, the users and prioritised scenarios. 

Activities: 

  • Kick-off workshop with the team to uncover existing knowledge, align business goals, prioritise scenarios and tasks.
  • Map journeys and high-level, low-fidelity models and flows.
  • Review benchmarks
IMG_3935

Workshop Day 2: Map and Model

Focus: Develop and validate key journeys, flows and possible interaction and IA models. I focused mainly on fleshing out the QA's 2 core journeys in the app (Harvest Quality assessment and Pruning assessment).

Activities: 

  • Iterate and test journey flows with users and create early paper concept screens.

  • Identify core interaction and IA models. 

  • Have a working session with the digital product team to align on tech constraints.

  • Begin to develop a language glossary & early design principles.

37586970_10213934660653200_6160984260871192576_n

QA: Harvest Quality assessment flow

37616078_10213934661293216_5946910107152416768_n

QA: Pruning assessment flow

Workshop Day 3 and 4: Design

Focus: Develop high-level wireframes or prototypes. Continuing from day 2, I refined the Harvest Quality and Pruning assessment in-app journeys by creating wireframes and quick interactive prototypes to test out with the QA during the workshop. We picked out any missing information or functionality and made sure that the flow made sense.

Activities: 

  • Refine paper-based concepts and create wireframes and prototypes to test.

  • Identify patterns and begin to refine the key screens.

Workshop Day 3 and 4: Design

Focus: Develop high-level wireframes or prototypes. Continuing from day 2, I refined the Harvest Quality and Pruning assessment in-app journeys by creating wireframes and quick interactive prototypes to test out with the QA during the workshop. We picked out any missing information or functionality and made sure that the flow made sense.

Activities: 

  • Refine paper-based concepts and create wireframes and prototypes to test.

  • Identify patterns and begin to refine the key screens.

Post-workshop: Iterate and deliver

After the workshop, my team and I refined the core flows, key screens and design principles that address the needs of users in preparation for hand-over. I worked with the design team from the workshop to develop a UI ’component library’ that helped us set up a style guide and identify principles for ongoing delivery e.g. language, interaction patterns, and usability heuristics. We also provided the client with an invision prototype for them to test on-site in the Hawkes Bay orchards.

As a follow-up to the workshop, I worked on creating the final screen designs for the QA journeys while the other two members of the design team worked on the screen designs for the QC and Sector Manager journeys. Together, we also designed a new landing page, a new navigation system and a jobs page to make the app more personalised for each user. 


Design principles

T&G principle 1
T&G principle 4
T&G principle 7
T&G principle 2
T&G principle 5
T&G principle 3
T&G principle 6

Screen Designs and Flows

Screen Designs and Flows

Screen Designs and Flows

T&G – UI changes
  1. A darker green (brand colour) is used to create better contrast for outdoor viewing.
  2. Size 15 OpenSans is used as the minimum font size in order to improve legibility.
  3. Drop shadows on information cards help create better contrast
  4. Buttons are more prominent due to placement, colour contrast and size.


T&G – landing and jobs

QA: Harvest Quality Assessment screen flow

T&G – HQ flow

QA: Pruning Assessment screen flow

T&G – Pruning flow

Results

Our stakeholders travelled down to Hawke’s Bay to present and test the prototype with 3 groups across a broad range of roles. Overall the reception was really positive and the T&G development team are happy to start implementing using React Native. My team and I started working with the development team to build, test and iterate on Orchard Hand, as well as a new web portal.

Results

After we handed over, our stakeholders travelled down to the Hawke’s Bay to present and test the prototype with 3 groups across a broad range of roles. Overall the reception was really positive and the T&G development team are happy to start implementing using React Native. My team and I are currently working with the development team to build, test and iterate on Orchard Hand, as well as a new web portal.

Results

After we handed over, our stakeholders travelled down to the Hawke’s Bay to present and test the prototype with 3 groups across a broad range of roles. Overall the reception was really positive and the T&G development team are happy to start implementing using React Native. My team and I are currently working with the development team to build, test and iterate on Orchard Hand, as well as a new web portal.

Results

After we handed over, our stakeholders travelled down to the Hawke’s Bay to present and test the prototype with 3 groups across a broad range of roles. Overall the reception was really positive and the T&G development team are happy to start implementing using React Native. My team and I are currently working with the development team to build, test and iterate on Orchard Hand, as well as a new web portal.

“Spending the week with you guys was the shot in the arm we needed. We’ve had a challenging year, and to be able to step out of it all for a week and just work on something creative and productive was a boost for all of us…everyone involved was impressed with how quickly you grasped what we do.”

- Vicki McRae, Head of Customer Experience at T&G

“Spending the week with you guys was the shot in the arm we needed. We’ve had a challenging year, and to be able to step out of it all for a week and just work on something creative and productive was a boost for all of us…everyone involved was impressed with how quickly you grasped what we do.”

- Vicki McRae, Head of Customer Experience at T&G

“Spending the week with you guys was the shot in the arm we needed. We’ve had a challenging year, and to be able to step out of it all for a week and just work on something creative and productive was a boost for all of us…everyone involved was impressed with how quickly you grasped what we do.”

- Vicki McRae, Head of Customer Experience at T&G

 

“Spending the week with you guys was the shot in the arm we needed. We’ve had a challenging year, and to be able to step out of it all for a week and just work on something creative and productive was a boost for all of us…everyone involved was impressed with how quickly you grasped what we do.”


- Vicki McRae, Head of Customer Experience at T&G

Reflection

The collaboration and open communication between everyone on the team was a definite highlight for me. Despite the time and budget constraints, we were able to work with what we had. In one week, we leveraged each other's knowledge and helped each other identify any missing information to design a better user experience. This stood out to me as it shows the value cross-functional teams bring to the table.

Viv Wu

vivian_wu9572@hotmail.com