Aligning Agworld's Platform Experiences

One of my first projects at Agworld was to improve their existing web product based off the success of the company's highly rated and widely-adopted mobile apps. The aim was to bring the web app up to the same level of engagement as the mobile apps, unify the user experience across both platforms, and help define and implement processes to improve future efforts in design and development.

Hypothesis

If we create closer alignment between the experiences on web and mobile, more farmers will engage with data that will improve their position and performance during the season.

More specifically, we wanted to increase engagement for trial users. One key engagement metric we wanted to optimise was the proportion of trial users who created an activity - a concept referring to any job to be done on a farm; like planting seed, or spraying crops - which sat at 3%.

As part of this exercise, we also wanted to achieve the following goals:

Improve performance for a key experience
Improve accessibility of the experience
Improve the consistency of experience with clear, systemic design direction
Develop and implement a design system as a proof-of-concept exercise, with the hope that we could roll out the system to other products

10 Years of Legacy

Agworld's web app has been around since 2009, and during that time, the company has grown from 3 to almost 60 employees. Like many mature products that have achieved market fit, the Agworld web app horboured significant technical and design debt - an understandable result of moving quickly to respond to user needs as rapidly as possible. This presented a difficult landscape to work in, but also gave a fascinating glimpse into the legacy and genesis of the product.

When working in a legacy codebase, I believe it's really important to ensure that you respect the decisions that were made, while enabling and inspiring a path forward; and this was no exception. Any design, architecture and development decisions have to be forward-thinking, and clear to follow; while making sure they integrate well into existing features and experiences.

The Process

We started by researching and investigating Agworld's web and mobile apps. We found some strong patterns in the mobile apps that we felt would translate really well to the web app and create a consistent theme between the platform experiences. During qualitative research, we discovered just how important the Farm / Field metaphor was, so it was important to reference this throughout the project.

Farmers know what their farm and fields look like

To develop the initial proof of concept, we started by sketching on paper, then moved to low-fidelity, high-level UI wireframes on the whiteboard. I worked closely with product managers and development teams to further develop these concepts and explore the new architecture.

Paddock selector exploration and layout — Initial explorations and high-level sketches on paper

Paddock inspector exploration — Initial explorations and high-level sketches on paper

Paddock inspector mockup — Working through initial concepts with product managers and structural elements with developers on whiteboard

Whiteboard concepts — Working through initial concepts with product managers and structural elements with developers on whiteboard

As someone with a background in both design and development, I really enjoy being able to produce working prototypes and designs with code, rather than just static mockups. I think this helps to better demonstrate the potential in a design, but also quickly demonstrate the capability of a solution. This helps to facilitate conversation in a team, as well as improve usability testing.

I spent the next phase building and iterating on these prototypes, which meant that concepts were realised quickly and were able to be tested as soon as was possible. Once the prototypes had been tested and approved, I collaborated closely with development and quality assurance teams to produce production-quality results.

Jobs on maps — Some early, in-context work that shipped incrementally as part of the process

Financial snapshot — Some early, in-context work that shipped incrementally as part of the process

Once these initial changes were completed, the final phase saw us refactoring and implementing the core design using components and architecture from Signal, a new design system that I am actively developing.

We were able to achieve drastic improvement to the actual and perceived performance of the experience, as well as dramatically improved accessibility via screen-readability, keyboard-navigation, and improved contrast for different scenarios.

I created a subtle aesthetic shift for the experience; paying respect to existing styles to ensure consistency, but also creating a pathway forward with a more modern, contemporary aesthetic; emphasising a clear hierarchy and improving white-space.

Original Agworld on web — The original web app experience

Redesigned Agworld on web — The redesigned web app experience

Detail of the paddock selector — Insetting the panels, so they don't attach to the extremities of the map gives the illusion of space. Even though the panels are actually larger, they appear to float, reducing their impact on the overall experience

Detail of the paddock inspector — Insetting the panels, so they don't attach to the extremities of the map gives the illusion of space. Even though the panels are actually larger, they appear to float, reducing their impact on the overall experience

Scaling and My Design Philosophy

I've always felt that producing static artefacts as part of a software design and development process can create a handoff culture: one that reduces collaboration, creates bottlenecks and encourages siloing.

So, it was really important to me to ensure that this project produced systems, processes, and artefacts that specifically can scale; as well as provide mentoring to others to help bridge the gap between design and development; between project and engineering.

I believe that everyone can build beautiful, accessible, performant designs with the right guidance and systems, and it's not simple the realm of designers.

Results and Improving how we Measure

Overall, this project was successful in increasing the visibility of jobs to be done on a farm, and aligning the experience between web and mobile products.

One of the key highlights from this project was that we need to improve and codefy how we measure, record and distribute qualitative and quantitative data. This has been taken on as a major focus in all product delivery projects from this point.

Quantitatively, we had a number of great successes:

Increased the number of trial users who successfully create an activity by ~ 30%
Increased the amount of time that farmers spend creating and converting activities from the map screen by ~ 100%
Improving the site's time to first interactive from 10-30s in some scenarios to < 3s

From a systems perspective, a clear proof-of-concept and early embedding of a design system that is still scaling and improving almost 18 months later with excellent adoption across the development team.