CASE STUDY

Vegetopia

Helping home growers reach their dreams, one step at a time

This app design guides beginner (and intermediate) gardeners through the process of planning a vegetable garden all the way to harvest. This was my student capstone project at Thinkful: I conceived the project, scoped and carried it to completion. I developed four workflows, tested them at the low-fidelity prototype stage and delivered a fifth at the high-fidelity prototype stage.

Role

UX Research
Information Architecture
UI Design
Usability Testing

Tools

Figma
Google Forms
Zoom
Otter
Maze

Deliverables

Personas
Empathy map
Journey map
User Survey
User stories
User flows
Wireframes
Low-fidelity prototype
Research results
High-fidelity prototype

Timeline

3 weeks

OVERVIEW


The (initial) Problem Statement

Let’s simplify planting information for vegetable growing to make the process easier for home growers (and reduce the oft-cited 1,500 miles our food travels to our dinner plates.)


Audience

Anyone who grows vegetables, whether they do it in pots in an apartment in Boston or in a backyard in Texas.

The (presumed) Solution

To consolidate the growing instructions for vegetables into an app with standardized and easy-to-use content.

Here is part of the master planting chart from John Jeavon’s “How to Grow More Vegetables” where I learned my gardening. I am constantly flipping pages and craning my neck 90 degrees to read the column headers.

Here is part of the master planting chart from John Jeavon’s “How to Grow More Vegetables” where I learned my gardening. I am constantly flipping pages and craning my neck 90 degrees to read the column headers.

Seed packets are made of paper (that gets wet and dirty in the garden) and provide planting instructions that vary in content, organization and presentation.

Seed packets are made of paper (that gets wet and dirty in the garden) and provide planting instructions that vary in content, organization and presentation.

My Approach

I’m guided by a user-centered design philosophy to put the users of my product at the heart of all my design decisions. I pursue my solution using the double diamond process: discover the user’s needs, define what the product will solve, develop tested solutions and deliver the final product.

 

DISCOVERY


User Survey

I realized immediately that finding research subjects to interview that were knowledgeable of the biointensive method was going to be nearly impossible. So, I reached out to gardeners and those who would like to grow vegetables, recruiting from a Facebook vegetable gardening group as well as classmates in my program and personal friends. 48 people responded to my Google Form survey asking about their gardening planning and experiences.

05Survey results.png

Key Findings

Demographics: the respondents are evenly spread by decade from their 20s to their 60s. Half of them consider themselves intermediate level gardeners and a third were beginners.

Motivations: Most people marked multiple reasons. Three quarters of them cited their motivations were: enjoying time in the garden, the food is better than that of the store and enjoying the challenge; half said to save money.

Information about growing: 37 (or 77% of respondents) use websites or apps, 32 (67%) relied on people they know and 21 (44%) read the back of the seed packets. Mostly they carry this information into the garden in their head (31) but they also bring electronic devices (21) or paperwork (18).

Planning: 24 respondents (50%) do 'some' planning and have some documentation while 12 (25%) do minimal planning; 11 of 14 beginners do minimal planning. Similarly, 24 (50%) said they handwrite their plans on paper followed by 9 (19%) who type it all into a computer.

Note taking for success: Though 26 take notes, 18 of those say it's only sometimes, the notes are disorganized, and they get lost. I sense a problem here.

Support for an app concept: 34 said they'd like to have an app to have that information on their person while 10 were neutral on the matter: that’s 90% positive or neutral. 43 would want it as a mobile app.

REFLECTION: Seeing patterns is difficult given all the 'check all that apply' responses that I offered: I locked Excel columns, sorted data often. The picture that was forming in my head is that there is a mismatch of where the information is – e.g. internet, other people's heads, printouts – and being able to use it where the garden is. Paper seems problematic in that half might be handwriting plans but only a third bring that into the garden. The same might be true about note taking. I'm imagining rain, dirt, and squatting in a garden bed make for a difficult situation for paper, pens, and keeping organized. Advanced gardeners did more planning and had their information in their head compared to beginners who did less planning and varied in how they got information.


Competitive Analysis

Going onto the app store on Apple, I scanned for gardening apps and specifically for vegetable growing. I downloaded and studied the following three: Seed to Spoon, Planter, and Veggie Garden.

03 SWOT.png

My key insights are as follows:

App field is relatively thin… There are many gardening apps out there but comparatively few for vegetable growing.

Veggie apps category is ripe for a new entry… For comparison, a plant identifier app has 304K downloads yet the three veggie apps I chose to study only had 4K, 2k, and 143 downloads.

Veggie app approaches vary… One was very focused on a drag and drop feature to build a garden plot. Another was had a calendar focus with good sorting functions. Another was very robust in information — I’d argue too much so — with many layers of navigation.

A ‘beginner’s approach’ is lacking… None of the approaches quite seem approachable enough for the beginner even though they had most of the basic information needed.

Visually no one has 'won'… While no one did a terrible job (except for text being small or navs being crowded.) But there is plenty of room to explore making my app beautiful and simple.


Research Interviews

From the survey I recruited two beginner gardeners and three intermediate ones to interview. I asked about their veggie growing process to discover:

  • How they get their information to plant, tend and harvest vegetables.

  • What tools they use in planning.

  • What are their pain points.

  • How an ideal app would work.

(Erica, a beginner says...) You can go on a website and print out pages. You can follow instructions like the directions on the back of your seeds, but do I know if that’s gonna yield anything? No, I really don’t — most time it just dies. So, I think it’s just being able to know. I’m still “it’s not 100% guaranteed” that this thing is gonna, like, be harvested. But if you’re doing all the steps, I feel pretty confident, like, that this will yield something. If it hasn’t died yet – two weeks, three weeks into this – and it’s still looking good, I think that there’s something to be said for that. Eventually, you’ll move out of the beginner phase and into intermediate.

Key insights

Information complexity. Beginners have so much trouble with getting reliable information that they fail to start a garden sometimes, have low confidence even though highly motivated. Intermediate gardeners also are constantly searching for solutions on the internet but also via friends, Facebook groups, Youtube. All would welcome a rating for “ease of growing” a specific vegetable. Note: I had to research if that idea was even possible and think through USDA growing zones!

Planning is minimal. Despite the survey suggesting otherwise, no participants mentioned calendars, placement diagrams, timing, harvests etc and did not create documents. This may be related to information complexity. Note: the idea of a garden-plotting app seems out the window for an MVP.

Notes and picture taking Initial interest varied but 4/5 take photos already. 2/3 of the intermediate gardeners see value in note taking especially if it’s easy to do or have big plantings to keep track of.

Step by step The beginners’ lack of confidence leads to comments such as ‘Just tell me what to do’ and ‘Make it as easy as building Legos’.

Electronics Gardeners really rely on Google, Youtube, Facebook. They carry devices into garden or run inside to look things up. Bookmarks, forums etc. all reside in different places though, which complicates things.

Alerts / reminders At least 4/5 would welcome this feature for confidence and for success. One said ‘it would be good for a beginner’ but may not use themselves. Another wants to make sure they would apply to her zone. I propose users would want some level of control over this feature.

REFLECTION I was surprised how little planning and documentation there was among the interviewees compared to my own experience. It was thought provoking to me that advanced gardeners carried their years of experience in their head and drew on planning systems they developed over many seasons of growing.


Personas

The competitive analysis and interviews made me think that the app should cater heavily toward beginners like "Shawna" who is a composite from the interviews and survey I performed.

04 Persona Shawna.png

Shawna Tibbets
"The Beginner Gardener"

55 years old
IT Systems Manager
Rents a house in Austin, TX

Motivation: Believes in eating fresh and healthy, believes food creates community, wants to be a good example to her son regarding accountability for making things grow. But she has a black thumb.

Frustrations:

  • Googles everything yet often ends up unable to start

  • Printouts get lost (an attempt at planning?)

  • Often carries her laptop into her planting area but sometimes is lazy

  • Doesn’t know when to harvest

  • Can’t diagnose plant problems

Just tell me what to do, like Legos instructions, step by step. Put two things together and eventually you have the Millenium Falcon.

Tom Powell
"The Intermediate Gardener"

36 years old
Mechanical engineer
Owns a house in Baltimore, MD

04 Persona Tom.png

Motivation: He would happily spend all day in the garden because of the calm it provides: his day job is draining. He loves the challenges of the garden and the payoff of tastier and healthier food. During the long days of summer, he has his dog with him, invites his wife out for a cocktail to delay going inside for dinner.

Frustrations:

  • He wants to identify his bug problems and tame them faster

  • He didn’t know about the companion conflict between potatoes and onions

  • He didn’t expect such a log jam with of all his veggies ready to harvest during same three weeks

  • He doesn’t want to run in the house for a computer to answer his questions or use paper in the garden which gets wet, or lost and is hard to keep organized

I had these disgusting bugs for a month and a half. The Facebook group I’m part of helped me solve it. Next year, I might try the straw bale method from Martha Stewart.

Journey Maps

Tom, the intermediate gardener, generally has quite a positive experience, staying above the neutral baseline except when he gets an infestation. One of his biggest problems is having too much to harvest at the end!

06 Customer Journey Map - Intermediate.png

Opportunities

  • Consolidate key planting information in one place

  • Potential problem and solutions readily available

  • Social feed for people to learn and share with each other

  • Advice on processing harvest

Notice below how dramatically different Shawna’s experience is: she is consumed by information overload yet lacks the knowledge to understand what she she needs to do in most scenarios. So, she spends most of her time below baseline - it’s only her strong sense of motivation that keeps her involved over the many months of the growing season.

06 Customer Journey Map - Beginner.png

Opportunities

  • Consolidate key planting information in one place

  • Give detailed growing instructions

  • Alerts and scenario-based instructions

  • Image-based instructions to see what to do

 

DEFINE


User Stories

Based on my research and especially the interviews, I created a list of user stories to help decide what the app might do with an eye of what would constitute a good “minimum viable product” (MVP) and ruled the rest ‘out of scope’.

  • As a beginner gardener, I want to find the easiest plants to grow, so that I can have a chance at success.

  • As a beginner gardener, I want to find what I can plant today, so that I don’t have to plan in advance.

  • As an beginner gardener, I want to have alerts, so that I tend to my plants at the right time.

  • As an intermediate gardener, I want to create a plant list, so that I can see my plan in one place.

  • As an intermediate gardener, I want to ID those bugs, so that I can eradicate the problem.

  • As an intermediate gardener, I want to make notes and take pictures, so that I can track problems


Out of scope:

As an intermediate gardener, I want to use a social feed, so that I can learn and get inspired by other gardeners that are growing the plants I’m interested in.

As an intermediate gardener, I want to see a shared calendar for all the veggies I choose to grow, so I can see an overview of my year's planting.

As an intermediate gardener, I want to use a plotting feature for planning the beds, so I can plan quantities and avoid plant conflicts.

As an intermediate gardener, I want to fertilize my soil correctly for each plant, so that they produce abundantly.

As an intermediate gardener, I want to use a companion plants chart, so that my veggies don't have to compete unnecessarily.

As an intermediate gardener, I want to see varieties of each vegetable, so I can pick the tastiest ones to grow.


User Flows

At this stage I spent time trying to decide what was realistic to deliver in 3 weeks, trying to whittle down the flows to 4-5. The ‘alerts’ flow seemed like a possible sacrifice given the amount of screens it would require to produce. I wondered if there was any way to combine ‘find easy plants’ and ‘find plants I can plant today’.

07 User flows.png

Site Map

During the sketching stage, I had an insight — that I’ll tell you about shortly — which pushed me to change the structure. The yellow pages were the ones I believed I would have time to develop given the time frame available. Some of the envisioned content initially would have to be put off to a future release.

13 Site map1.png
13 Site map2.png

Sketches

During the sketching process I was working on the following questions:

  1. Do users need need to create an account? (one of my competitors didn’t require it)

  2. How can I ask for their location but protect privacy (use zip code?)

  3. What shall I name of things? (e.g. the app and the nav tabs)

  4. What sort of navigation will I use: notice I have “plant list” in the primary position

  5. Developing the My Garden area to have a “plant log” approach

  6. Exploring the creation of too many features: archiving, joint calendar, companion plant chart!

08 sketche 1.png

The numbers above correspond to the questions I was asking myself

Insight

When I showed the plant log page to a person who didn’t garden, their face was one of horror. The thought that they would have to input dates provoked a strong reaction; this sort of tracking had seemed ‘obvious’ to me coming from a biointensive background. This stunned me, forced me to step back and rethink my approach. I came up with a revised problem statement and reworked my sitemap.

sketches first my garden section .png

Revised problem statement

How can we give beginners confidence at every step of the way from planting to harvest?


This reframing propelled a new approach to the My Garden section of the app. It would now act as a time-release capsule to deliver bite-sized tasks to the gardener at the appropriate time. Using the information from the plant detail pages, how-to instructions could be developed with a visual emphasis and the step-by-step approach that Shawna craves. When each task gets marked as ‘done,’ the app handles the timing of when the user needs to do the next one.

The next round of sketches focused on the following issues:

  1. Pivot to teaching focus = My Veggie Garden is where users land

  2. Still fiddling with naming of various elements (‘My Veggie Garden’, what to call the items in the navigation bar) to make them different enough from each other to be intuitive to users

  3. Deleting “companion plants, calendar” - in order to scope the MVP appropriately

  4. Thinking for a moment of having no navigation at the bottom

  5. Integrating “Notes” into the “Task” area

  6. Developing icon ideas for secondary navigation

  7. Exploring how to integrate alerts using the onboarding and the “Account” area (though still not sure if I would have time to develop these)

08 sketches organized_bigger2.png

 

Paper prototype

In order to surface any obvious issues early, I tested the concept using a paper prototype with one person prior to investing the time to build out the wireframes. Three out of four user flows went flawlessly; the last one had a bit of confusion but only because of how I phrased the question to avoid using the exact wording in the paper prototype.

09 Paper prototype.png

Wireframes

Moving on to Figma to prepare for user testing, I was focusing on the following issues:

  1. Creating multiples of the same screen in order to mimic different scenarios for user testing multiple flows.

  2. Using components flexibly for different functions: list of chosen plants, tasks, plant cards.

  3. Focusing on the beginner, providing visuals and simple steps to follow.

  4. Resolving the hierarchy of navigation: primary (permanent tab bar with icons) and secondary navigation (contextual with highlight bar.)

  5. Focusing on accessibility features that account for sound, sight and possibly wearing gloves which complicates typing!

  6. Crafting a solution to merge the user flows of finding 'what is easy to grow' and 'what can be planted now.'

10 Wireframes A.png
10 Wireframes B.png
10 Wireframes C.png

Usability Testing

I used Maze for the first time and was able to remotely test 30 participants on four user flows.

  1. Choose a plant to grow: 93% success rate. Was it Intuitive? Positive 21 to 3 negative.

  2. Find an 'easy' and 'plant now' veggie: 79% success rate. (Direct 29%, Indirect 50%*) Was it Intuitive? Positive 11 to 5 negative.

  3. Find out whether a bug is a pest: 91% success rate 17/19. Was it Intuitive? Positive 15 to 4 negative

  4. How to create a new note: 100% success rate. Was it Intuitive? Positive 21 to 1 negative.

 * While I’m pleased with the success rates for the tasks being so high, my one concern was the ‘find easy plants to plant now’ user flow: far more people succeeded on the task by an indirect route than by a direct one. I addressed that later by:

  • Planning for the search bar to accept tags on the back end for queries such as ‘easy’ and ‘now’.

  • Trying two other icons that would be better identified as a filter.

  • Adding ‘sow now’ to certain plant cards. After doing research on the planting dates of various plants, I discovered that they vary greatly: some are able to be sown over a window of a couple of months while other can be planted at multiple times during the year.

Another thing that pleased me was that the positive feelings about the app outscored the negative by 20 to 2.

Screen_Shot_2021-04-14_at_6.00.46_PM.png

Accessibility

I considered this throughout the project in the following ways:

Color Contrast and Blindness: I downloaded and used the Stark and Color Blind plug ins for Figma to test the text elements.

Strike zones I made all the touch points to be a minimum of 44px x 44px, usually adding an invisible box larger than the target icon or text to ensure ease of navigability.

Dictation provides a choice to users for inputting information on the notes page and in the search bar.

Video on the task pages provides visual learners with a concrete example to follow.

Audio: in addition to the audio provided with the videos, I would work with developers to ensure that we have text to speech compliance for screen readers: HTML tags and ARIA labels structured correctly and named well for navigation.

Thumb reach: Given that we have a skew toward right-handedness and many use phones with one hand, I considered moving the ‘add plant’ icon to the left side; I decided against it without having real data to drive that. Also, I decided against moving the search bar to the bottom of screens lest it break too much with established conventions.

 

DEVELOP


Brand characteristics

Given that I've focused in on the beginner segment of gardeners (while still serving the intermediates), I want them to be supported as much as possible on their gardening journey so that they make it to the next level. Not killing plants is key! Here are my key brand words that will inform my design choices

  • Optmistic

  • Simple

  • Encouraging

Mood board

Here is what I was responding to when I selected images for the brand mood:

  • Looking for the simplicity of LEGO instructions.

  • Wanting the calmness of negative space.

  • Inspired by the rainbow of colors in vegetables.

  • Exploring typography that is simple vs has personality (friendly or a bit stylish or unique)

11 Mood Board.png

Brand name

I started with a word association exercise based on the stated motivations gardeners provided in the survey:

GARDEN, bounty, harvest, trowel, shovel, soil, dig, harvest, plant, seed, how, rake, water, weed, seedlings, cotyledons, pests, fertility, fertilize, dirt, gardener, hat, gloves, widger, hose, flat, transplant, tend, slug, aphid, amend, companion, marigold, sow, seed packet, start, pot, crop, cover crop, mulch, frost, till, leaves, roots, veggies

LEARN, begin, steps, train, advance, study, practice, improve, test, prove, teacher, mentor, teaching assistant, lab, graduate, exam, manual, text, quiz, book, notebook, journeyman, master, professor, tutor, novice, belt, certificate, graduation, valedictorian, honor roll, progress, thesis, paper, curriculum, 101, PhD, challenge, know how, process, lessons,

ENJOY, thrill, bask, delight, love, revel, relish, fancy, frolic, hang, fun, chill, romp, luxury, rejoice,

EAT, chomp, chew, savor, taste, ingest, chow, crunch, gnaw, stuff, serve, cooking up, plow, cook, snarf, hoover

My initial app name ideas were an attempt to create a memorable fusion those themes:

Veggie 1,2,3
Veggies 101
Grown at Home
Home Grown
Garden Grown Veggies
Garden Variety
Ready, Set, Grow!
1,2,3, grow
Veggies at Home
Harvest Hero
Home harvest
Harvest at Home

and the winner is... VEGETOPIA.
It says vegetables, implies an ideal and if the app works well, it’s an implied promise to those that use it.

17 brand development.png

Style guide

Logo

I chose a font called Grand Hotel for the logo. I had to thicken the letter strokes slightly to make it have the right amount of weight. I had considered a bunch of sans serifs but because I was already using a sans for the app itself, nothing grabbed me. Serifs seemed a little formal somehow. A script felt like a nice contrast to the 1, 2, 3, how-to approach I was using to guide beginners. It provided a flow and joy that the app needed.

Colors

I steered away from so many of the great colors I chose at the mood board stage. I had really wanted a brown to reference 'soil' but it had low energy, so I chose a trustworthy navy instead. I had really wanted a red for a call to action but the contrast checker kept making me choose a darker color and I would have ended up with a vague stars and stripes feel. I chose green as my call to action since, 'duh', gardening, and it reduced visual clutter. However, the need to increase the 'optimism' / 'encouraging' quotient led me to brighten the overall palette by adding a mustard yellow for highlight in the secondary nav and its related cream tint for the background of the nav tab.

Typography

For the main typography for the app, I researched and tested six Sans serifs. The one (Inter) that I used for the wireframe prototype was happenstance but I grew to love it and got complimented on it. I liked its heaviest weight for being simple, unapologetic and friendly to my eye, maybe it was a tad industrial but would totally have worked. Libre Franklin was very nice but I felt it was a tad retro. I really liked Lato for its a,g, and t, but the heaviest weight was lacking enough heft. PT sans had promise until I discovered it only had two weights. I almost went with Rubik because it had the weight I wanted and couldn't decide if its brutal quality was quirky, nice or harsh. I landed on Mulish: it had the weights I wanted, the simplicity matching the brand values and that capital M. At first I thought it was deal breaker - just weird - then I thought it's unique and just the right amount of 'character' to stand out.

12 Style Guide.png
 

DELIVER


Hi-fidelity prototype

Aside from tweaking Task Two (filtering for 'easy' and 'plant now'), the biggest difference between this prototype and the last is the addition of onboarding and alerts, neither of which did I originally think I had time to develop. The two are tied together in focusing on the beginners’ needs, but very significantly, they alter the app content in a fundamental way by customizing the planting dates – and therefore timing of tasks! – for each plant and determining whether a plant is viable or 'easy' in a given location. Alerts are intended to be tailored to the level of the gardener and can be customized by the user in the account area.

Conclusion

Sharing my sketches with a beginner and a non-gardener saved me from myself and changed the whole project. The look of horror on the face of one when I showed them a screen that asked them to input a sowing date was priceless, yet it threw out my entire mental model, changed my user flows and site map.

Using Otter for interview transcription was amazing for speeding up the post-interview analysis since reading is so much faster than listening. Searching the transcript helped me to affinity map and find patterns. I was able to copy and paste quotes into an excel matrix to recreate the structure I went into the interviews with, enabling easier comparisons between participants.

Becoming a daily design journaler is helping me mentally process the UX journey in real time.

Survey data: Using 'check all that apply' makes seeing patterns in the results tricky. I want to explore Survey Monkey or “pivot tables” in case they may be the ticket to seeing complex relationships (i.e. cross tabulation) between specific participants' responses in one question compared to what they say in others.

FIgma: Committing early to components, autolayout, text and color styles, greatly sped my process thereby enabling me to exceed my initial user flows.

Maze: A wonderful tool, but one can't see why tasks fail, can't clarify the task for the participant if they're confused. Therefore, results can get skewed. "Successful" tasks are best designed with only a single path but that doesn't mimic real life.

Scoping: With this project I've improved at scoping what is possible in the window of time provided: deciding the number of critical user flows and eliminating those that aren't critical for an MVP.

Testing: I'd love to test gardeners of different expertise levels using the app indoors for planning. Then, see them outdoors in the garden, possibly wearing gloves, squatting in the garden to see what their interaction with the app looks like: which hands they use, how they take notes, etc.

Previous
Previous

Device and App Connection Center

Next
Next

fffinder app