Case Study: Hay Now

First Gen UI Concept

Hay Now with its marketplace and inventory tracking app that removes friction for animal owners and hay producers.

Objective

Create a marketplace app focused on finding livestock hay. Leveraging an online community to buy and sell.

Key Tools

Whimsical, Figma, XD, Material

Role

UX/UI and research design

Background

Hay is a unique product that is almost exclusively purchased in bulk (tons at a time) direct from a producer. Though this is an e-commerce app geolocation of consumers and producers plays a big role. These unique parameters required a unique system.

User Story

Research

I primarily conducted user interviews and a survey.

After talking with potential users I was able to synthesize key points and built an affinity map. Using these insights I distilled some objectives:

  • streamlined payments

  • pick-up and delivery options

  • details of the product such as up-close imagery to better ascertain quality

  • reviews

  • streamlined communication

I added a new feature to the app to track a user's estimated current amount of hay based on how many head of livestock they have and the quantity of hay reported.

This decision arose from the understanding that users would buy all their hay at once and estimate how much they would need, for say, the winter.

Feature Ideation and prioritization matrix

Number of sources users buy from in a year: 1 source 45%, 2 sources 36%, 3 sources 18%, 3+ N/A

Number of sources users buy from in a year

I learned that many people will buy hay several times in a year but from one or two sources. Considering this insight the app started to evolve into a way to make it easier to repurchase from a seller given that a third of users will purchase hay more then 12 times a year.

Alteration: Increase ease of repurchase from the same source.

Personas

One is for a buyer needing the product at a large scale for a commercial stable.

Second (shown here), for a hobby farm with small scale demand. She was the main inspiration for this app.

Third, for the owner of a hayfield looking to sell their product.

Sketches

Using a pencil and paper I started making thumbnails of screens and features. These became larger sketches with more detail but still gestural.

A favorite technique of mine is make paper wire frames on index cards and link them together with a pin and string. This shows the intended information architecture.

Wireframes ordered in a basic purchase flow

Sketches, flows, and wireframing board in progress

Wireframing & Information Architecture

Only at this point do I sit in front of my computer to make screens. created wireframes for testing purposes and to polish the interaction design.



Hay now wireframes

The beginning of the information architecture

User Testing

User testing revealed input into which design was more intuitive with version 2 winning.

I discovered places that users felt trapped and where things where unclear. For instance, icons that did have adequate labeling.

I altered the basic architecture of the app after realizing people preferred to browse listings instead of having to do a detailed query every time they wanted to purchase.

Hi-Fi Prototype & UI

Final Thoughts

Outcomes

  • Complete app for hay shopping online

  • Linked hay growers and livestock owners by leveraging technology

Future Objectives

  • Encourage users to leave reviews, it helps make the transaction more transparent

  • The review system needs to be refined regarding listing reviews and seller reviews. Safeguards should be put in place to discourage dishonest practices

  • Expand product categories to include grain

  • Wizard feature for shipping and transport calculations

  • Add a seller rating this will allow purchasers more trust

Final Product in Development