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:
- Where do I see Agworld - aesthetically - in 5 years?
- Could I design something new; utilising an established design system?
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.
Sketching and wireframing plays a huge part in exploring basic flows and patterns. These can then be taken through to higher-fidelity prototypes.
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.
Overall the first prototype did not test well at all. I observed frustration
, anxiety
, and confusion
; all derived from some key insights:
- There is far too much information to parse
- Confusion about where in the customer journey this experience appears
- There's no clear direction about what the plans offered, or who they're for
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.
The clear direction to move on from here was to:
- Simplify the message
- Give the experience its own space, and make it accessible without having to sign in
- Improve how we describe each subscription, and really hone in on who it's for
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.
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.
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:
- Sales and support reported
fewer blocking issues
in the new shopping experience compared to the original - Working as a cross-functional team was
received extremely positively
, and it's now integrated into how we work
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:
- Screenshots and videos have been edited from their original state
- Content was removed that referenced sensitive aspects of this project