Tackling UX on a tight budget

How I turned 2 web flows into mobile with no reaserch budget

About

FarmPortal is a digital platform developed by AgriSolutions about 10y ago. It is aiming to help small-scale farmers and large agribusinesses manage their farms.

Challenge

As the sole UX designer with zero budget for research, I was tasked with designing the mobile version of company's 10y old flagship web app.

Impact

We reduced estimated onboarding time by 60% which enabled faster user activation & lowered the dropout risk.

My role

UX research, guerilla testing, UX design, UI design

Team

PO, CTO, Me as a Designer, FE Developer, BE Developer

Timeline

March 2024 - May 2024

March 2024 - April 2024

Some context

πŸ‘©β€πŸ’»Do we have any data at all?

I was tasked with designing the mobile version of company's 10y old flagship web app - FarmPortal. The twist? No user data collected & no research budget available.

🌱 User onboarding as a starting point

We decided to start developing the mobile version with the "My Fields" - the platforms onboarding feature. By allowing users to register their farm plots, it unlocked all other functionalities and revealed the product’s true value.

"My fields" previous logic

πŸ”ƒ Step 1: Adding new field

πŸ”ƒ Step 2: Assigning a crop to the field

Secondary research

🧠 Heuristics evaluation findings

Once I got to know the golden path's steps, I ran a heuristic analysis to determine key pain points of the onboarding solution.

Visibility of a status

Visibility of a status

Add visual markers for field mapping process.

User control & freedom

User control & freedom

Enable clear editing of already mapped areas.

Aesthetic design

Aesthetic design

Declutter UI, let go of 2-colummn layout.

Error prevention

Error prevention

Get rid of unnecesary input fields.

Help & documentation

Help & documentation

Add tooltips with area mapping instructions.

Flexibility of use

Flexibility of use

Flexibility of use

Turn long form (13 fields!) into a wizard.

πŸ“‰ Idea extracted from market analysis

As we still lacked direction, I proposed we run some market analysis. It revealed that competitors split map-engaging processes into two steps: define the field area, then fill a short form. This gave us our path forward.

Pattern sketch.

Pattern sketch.

Pattern sketch.

Design explorations & guerilla testing

😡 Sketches & UX writing block

From IDIs with company lidership I knew that we had 2 user segments: tech-savvy big farm owners & more tech-reluctant smaller farmers. Concise and adjustable copy was crucial to adress those 2 very different contexts.

My messy notes overview.

My messy notes overview.

My messy notes overview.

πŸ“‹ Guerilla testing preparation

Ideally at this point I would have run some screening and then a proper usability testing. But with no research budget I turned to guerrilla testing with two internal testers.

Tester A:

Tester A:

Our agri-expert and sales rep – represented tech-savvy users from large enterprises.

Tester B:

Tester B:

A developer with a family-farm background – represented less tech-literate small/medium farm owners.

πŸ•΅οΈβ€β™‚οΈ Task 1: Add a field

Tester A (agri-expert):

Tester A (agri-expert):

  • found the map interaction intuitive

  • moved through the flow without confusion

Tester B (dev with family farm):

Tester B (dev with family farm):

  • initially struggled but completed the task successfully after reading th helper text

Lo-fi wireframes of adding a field.

Lo-fi wireframes of adding a field.

Lo-fi wireframes of adding a field.

πŸ•΅οΈβ€β™‚οΈ Task 2: Assign a crop

Tester A (agri-expert):

Tester A (agri-expert):

  • found the instructional text unclear and withdrew from the processπŸ€·β€β™‚οΈ

  • found both labels too vague & suggested more contextual names

Tester B (dev with family farm):

Tester B (dev with family farm):

  • found the instructional text unclear and withdrew from the processπŸ€·β€β™‚οΈ

  • suggested using illustrations to demostrate logic of "manual" mode

Lo-fi wireframes of crop assigmenent.

Lo-fi wireframes of crop assigmenent.

Lo-fi wireframes of crop assigmenent.

πŸ› οΈ Implementing guerilla insights

Field creation:

Field creation:

It did not need any changes.

The expandable help text seemed to work for less experienced users & could be collapsed by those tech-savvy ones.

Crop assignment:

Crop assignment:

The flow was adjusted in 3 steps:

  1. Rewriting instructional text to reduce dropout risk. ❌

  2. Renaming crop assignment modes.

  3. Adding illustrations.

Crop assignement improval sketch.

Crop assignement improval sketch.

Crop assignement improval sketch.

Final design & learnings

πŸ”ƒ Step 1: Adding new field

πŸ”ƒ Step 2: Assigning a crop to the field

πŸ’‘ Key takeaways

  • Guerilla tests can do the job


    Even two test sessions gave us early signals on wording issues and interaction clarity. Sure it’s not hard-core data, but it helped us make some small adjustments.

More projects

Check out some more

AgriSolutions

SaaS

Empowering consistency

How I unified a vast UI library in a multi-service product

Tech debt down by 83%

Design system

AgriSolutions

SaaS

Empowering consistency

How I unified a vast UI library in a multi-service product

Tech debt down by 83%

Design system

AgriSolutions

SaaS

Empowering consistency

How I unified a vast UI library in a multi-service product

Tech debt down by 83%

Design system

Create a free website with Framer, the website builder loved by startups, designers and agencies.