Lo-fi wireframing for an Organic Orchard

Picture paradise and you are probably thinking of someplace just like Cummins Nursery. This organic orchard and self-described “u-pick paradise” is a well established destination IRL as well as online. At the farmstand you can buy veggies, fruits, and flowers all grown on their acres of fertile land. And online you can buy saplings for your backyard orchard, cidery, or nursery business.

Cummins Nursery are in the enviable position of selling out of their complete product stock every year. Apple tree saplings are an in-demand, high quality product that takes tremendous physical labor, farming experience, the right land, technical and scientific knowledge, and a huge dash of good luck with the weather. Large nurseries buy up their available inventory quickly. Their goal with this site rebuild was to increase their per-tree profit by marketing to a different user: the backyard orchardist and small scale cider enthusiast.

Trees are a complex purchase. It is not a simple widget where you pick a color and get it shipped to you. Trees are living organisms that are subject to drought, wind damage, early frosts, pests, and other dangers of the natural world. They can only be shipped during a specific time of year, need to be ordered well in advance, and by the time shipping season comes around you may need to adjust your order depending on what thrived and what didnt survive. Ordering options are complex as well and include tree types, species, varying rootstocks, and within each of those categories up to six grades. Phew.

The UX challenge was to distill the myriad options and shipping schedule to a brand new uninitiated audience in an empowering way. They want users to leave their site feeling like they’ve interacted with a friendly expert happy share their knowledge.

After creating lean user profiles to identify their primary customers we immediately jumped into interactive wireframing. This wireframe is a fully functional website from day one, all progress is made ‘in-situ’ and retained and leveraged during future phases. Below are lo-fi product detail pages:

Though a sidebar takes up quite a lot of real estate this is the one element from their legacy site that customers reported using a lot. The complexity and number of product choices also justified its usage. We always strive to use real product data, and the most challenging and complex we can get our hands on. Hi-fi content in a lo-fi layout gives us confidence in the results of our continuous testing and analysis.

Because were building in the browser in a responsive wireframe environment we test all navigation and content layouts on multiple devices as we go. What immediately jumped out, even at this early stage, is that the phone layout needs a more condensed treatment of the notification about tree years. Applying mobile-first principles we sought a UX solution for mobile and applied it to all breakpoints. Below are the original layout and an updated version.

There are hundreds of incremental UI updates like this at each wireframing stage. We will soon be adding dynamic product content and functional checkout behaviour, still in lo-fi mode. Working in-browser lets us evaluate as close to the real experience and with as little superfluous explanation as possible. We get a tremendous amount of feedback from a lo-fi wireframe long before any discussion of fonts, colors, and other visual refinements comes up. With a real working product user testing can be easily conducted even at early stages, and per my no-handoff method all disciplines are engaged and push the project forward together testing for usability, speed, security, and accessibility as we go along.