Building a Better Buying Experience at Agworld

One of the major projects I worked on at Agworld in 2019 was to improve the subscription purchasing experience. The aim was to simplify the Agworld subscription offering so customers were provided with a tailored experience, and to create a consistent message that the business could align to globally.

An Ambitious Target

Working with the Head of Product; I was tasked with some ambitious goals to work towards:

Over the course of 5 months, my focus was on research and helping remote members of the team in that capacity. I then shifted my focus to UI design and prototyping in collaboration with other developers, before finally moving into executing on front-end development and usability testing with the rest of the team.

Research and Why Assumptions are Bad

I made some assumptions at the start of the project. I assumed that there were clearly defined patterns and best practices for how to build a shopping experience in a SaaS business. I thought surely, we can look at something like Amazon or Dropbox, - or any business that sells software - to see what they do.

It turns out, despite there being some generalised patterns involved, almost every different example I found was bespoke in some way; almost every experience was tailored to the specific needs of their audiences. It's certainly not as simple just taking a shopping cart, or a purchase flow and then plugging it into the product.

Some specific patterns are largely proven to have higher conversion rates, or at least be part of higher-converting checkout experiences, but they may not be suitable for our specific audience. The only way to know for sure would be to prototype different solutions and test them with Agworld's target audience.

Concepts and First Steps

For this project, I started my process with research: trends, patterns, discovery and deep exploration. Understanding a broad array of potential aesthetic directions and patterns is very important at this stage of a project.

An array images used for inspiration
A rough moodboard

Sketching and wireframing plays a huge part in exploring basic flows and patterns. These can then be taken through to higher-fidelity prototypes.

Some sketched layout explorations
Exploring basic layout options
Some more sketched layout explorations
Deeper dive into payment forms

Prototyping and Getting Things Wrong

I had a lot of questions that I wanted to ground from that initial exploration; so I built a prototype inside the Agworld web app to test. I planned to test with internal stakeholders first, and then expand the test to customers depending on feedback.

The original shopping experience
The original experience

A rapidly-developed prototype of a new shopping experience with prices obfuscated
A rapidly-developed prototype with prices obfuscated

Overall the first prototype did not test well at all. I observed frustration, anxiety, and confusion; all derived from some key insights:

That last point I think is one of the most important insights to have uncovered from this process. The people that tested the prototype were all familiar with Agworld's products, familiar with agronomy and the industry in general, but were still not confident that they could make a decision based on what was shown.

Prototype iterations with prices obfuscated
Choosing a subscription with prices obfuscated

The clear direction to move on from here was to:

Iterations

Taking the insights uncovered from the initial set of prototypes as a base, I created further, more refined iterations in the context of Agworld's product environment. Doing this allowed me to rapidly iterate, apply feedback and test at any point during the project.

A summary view of the refined shopping experience and a detail view of a subscription card with prices obfuscated
Refining and iterating on a theme and aesthetic with prices obfuscated

An array of iterations of the refined shopping experience with prices obfuscated
Some of the many iterations and tests on prototypes with prices obfuscated

Sliced images of different layout options for subscription cards with prices obfuscated
Trying to find a balance in layout with prices obfuscated

Refined shopping experience with subscription cards
Balancing hierarchy

Final shipped experience with subscription cards
The final, polished experience

Changing Priorities

As we were finishing this project, the marketing team had started to finalise a new visual identity for Agworld's homepage in parallel; so the priority changed from shipping this experience, to joining forces to adapt the subscription flow design to suit what they had developed.

Unfortunately there was a timeline restriction which didn't allow for us to continue the iterative approach that we had taken throughout the project at that point. It wasn't something that we had prepared for, but it's a real credit to the team to be able to shift focus so dramatically and make these changes.

The redesigned experience

Overall, I'm really proud of the final implementation: it's accessible, responsive and performant; all built using design system primitives. Our established design system held up exceptionally well given the vastly different aesthetic of marketing's redesigned visual identity.

Success in Different Forms

Despite the changing priorities towards the end of the project, it was a success:

I'm really greatful to have worked with an excellent team on this highly impactful project. There were some challenging aspects to it, but we were able to overcome them for a great result.

Editor's Notes

Aspects of this project are sensitive; so parts of this article have been edited: