Trellis:

Full Stack UX/UI and Illustration
Image of an iphone showing the home screen for the gardening app Trellis, with a flat illustration of a satsuma orange and a ladybug in the foreground. The image reads: trellis, gardening made simple

Project Overview

In November of 2020, I designed a mobile app for gardening called Trellis. I was interested in tackling a project that could draw upon the convenience and affordability of consumer technology to encourage people to engage in off-screen activities that increase well-being, connectedness, and ecological awareness. I designed Trellis to help simplify gardening for new and experienced gardeners alike.

00:

goals

Image of a plant profile for Trellis, a cream colored interface with text in black and blue detailing when and how to plant satsuma oranges. There is an iphone notification pictured next to it that reads "Keep an eye on your satsuma oranges, they'll be ready to harvest any day now!"
Through competitor research, I found that users were indeed overwhelmed by all the planning and research it takes to maintain a garden. It seemed they were interested in a product that could plan their garden chores for them based on what plants they were growing and where they were located, but that also allowed them the flexibility to edit their information to truly reflect the variation that occurs in a natural process like gardening.
preliminary REsearch

Interviews and Ideation

Expanding upon my research, I began ideating potential users and features. I began conducting informal interviews with members of my local community garden, as well as with professionals in related fields like ecology and farming. I then created a few sample user profiles to collate and personify the interests and needs that had come up through my competitor research and interviews.

01:

User Personas

Image of a user profile with a photo of a smiling Black woman wearing colorful earrings and a denim vest. To the left of her photo is a list of  information about her values and challenges as they relate to the app
With these users in mind, I decided on three main features I wanted to be a part of my design:

■ A searchable plant database that allows users to find and save information and care recommendations for the plants in their garden

■ A custom, app-generated list of daily garden chores based on the plants in a user's garden

■ An easy-to-read calendar that allows users to look over the months ahead and move chores around according to their schedules 
Features

Early Iterations

I took an iterative approach to mapping and wireframing Trellis. I started with a sitemap that listed just the content and interactions I envisioned on each screen, then spent a few minutes translating it to a paper prototype, which I quickly flipped through to catch any missing features, impossible interactions, or early pain points. After this I began my wireframing process in Figma, designing on a soft 8pt grid and making frequent trips to my sketchbook to iterate solutions for important screens or tricky interactions.

02:

Mapping and wireframing

Three screens showing the iterative design process; the first is just text, the second a rough hand drawing of a calendar, the third a high-fidelity wireframe of the calendar feature in Trellis

Efficient Testing

Using Figma’s prototyping tool, I set up an early stage user test to gather valuable information without having to spend time coding a fully functional prototype. I focused on gathering qualitative data, both to avoid over-determining my results so early in the process, and to leverage my small user sample size (5) into meaningful feedback. As I watched my users complete their testing flows, I asked open-ended questions and then performed a thematic analysis of their feedback and performance. From here I was able to identify the top three pain points in my prototype, and create solutions for them in my next iteration.

03:

user testing and solutions

Images of several wireframes representing user pain points with the corresponding solutions on their right, shown as final screens on an iphone

Finalizing the Interface

With these issues addressed, I began to define a visual direction for Trellis. Inspired by simple 1970s illustrations of vegetables (like those on the cover of Mollie Katzen’s beloved Moosewood Cookbook) and the flat and friendly illustration design of health apps like Headspace, I created a series of custom illustrations to capture some of the nostalgia of gardening while still keeping in step with contemporary digital illustration trends. The end result is an interface that is both grounding and playful, just like the act of gardening itself.

04:

Ui themes and directions

A picture of an iphone with the Trellis garden interface on its screen. The phone is surrounded by flat illustrations of fruits and vegetables
home