Heirloom

Summary

High fidelity prototype of Heirloom

Restaurant owners and chefs who grow their own food for their restaurants need an app to help automate their most tedious gardening tasks.

Heirloom is a company that installs aeroponic and hydroponic technologies for indoor or outdoor use. I translated a set of UX deliverables into High Fidelity designs for a web-app by completing a competitive analysis, testing and prototyping.

Brief
As part of the project, I was given a set of UX wireframes and a persona with a list of their wants, needs and frustrations. These wireframes gave me a solid foundation to apply a visual language that communicated the users' needs.

Visual Competitive Analysis

Before creating designs, I considered the visual construction of websites that sell gardening tools like Gardener's Supply Company and Eden Brothers as well as nature exploring apps like iNaturalist. This helped my understanding of Heirloom's competitive market and how they could stand out. I learned that Heirloom could follow market trends and also stand out by:

Divergent Concepts

Drawing inspiration from the competitors and the UX Wireframes I landed on four design principles for this product: Natural, Simple, Clear and Friendly. I created three mood boards with corresponding screens to reflect their design. These three divergent concepts were used for testing.

First Concept

By using colors found in nature, the interface would feel more natural. I wanted to use a lot of whitespace so that it still felt clear. In the table I included an image of the produce so the user can easily process the information. I also thought a progress bar to represent the produce growth would be easier to understand for the user so I included them in the table.

Second Concept

Because the persona is very busy, I wanted their produce to be visible and recognizable so I used a grid layout. I was inspired by some of the competitors so I used watercolor illustrations to represent the produce. This would make it feel more friendly for the user.

Third Concept

A lot of the competitors used green and orange, which made it feel very friendly and welcoming. I was inspired by the competitors to use a grid layout with big icons to represent their produce that they are growing. This would make it very simple for the user to find what they are looking for, and make it a faster process for them.

Desirability Testing

Once I had my three different design concepts, I had to test them with users to see which one would be most effective and where I could converge ideas. I conducted a Five Second Test and a Product Reaction Card exercise with three participants.

Five Second Test

I showed each screen to the participants for five seconds and then asked them a series of questions. I learned that:

The grid layout with images/icons were very obvious, and easy to read
"The icons from Screen Three felt incomplete and looked like a coloring book"
Screen One & Three felt the most welcoming and friendly
"Screen Two feels like a grocery store website"
The progress bar in the table from Screen One was most effective
Participants preferred a side bar navigation
Two participants wished the navigation bar on Screen One was a darker color

Product Reaction Cards

I gave each participant a list of adjectives to describe each screen. Of those twenty-four adjectives, four of them were the design principles I had chosen before: natural, clear, simple and friendly. I wanted to see which screen represented those principles the best. I learned that:

Style Tile

After receiving this feedback I decided to converge concepts One and Three. Because the participants preferred the grid layout I continued with that, but changed the icons and added the progress bar to each card. By using an icon that was filled in with a solid color I had hoped it would not give off that ‘coloring book’ feel. I used the navigation bar from Screen One, but changing the color because that is what the participants preferred.

The final style tile for Heirloom

High Fidelity Wireframes

The Home or 'Harvest' page shows all of the produce the user is growing in their garden. When the user clicks on one of the items a page slides open where they can see the plant's growth phases, and other statistics. They can also upload a photo of their plant.

The home page of Heirloom, and the details page of their basil plant

When the user wants to add a new sensor to their garden they will go to the 'Controls' page and click 'Sensors'. They can see all of the different sensors they have in their autonomous garden. The user can click 'Add Product', pick the type of sensor that they want to add and then enter the corresponding key. For this step, I wanted to include what it would look like if the user entered the wrong key. Once it is entered correctly, they have the option for it to be automatically detected. If the sensor could not be found perhaps due to poor connectivity they can rescan. When the sensor is detected, it is added to their list of sensors.

Walkthrough of how to add a new sensor to your garden

Usability Testing

Once I created the wireframes, I wanted to know if the participants found it easy to navigate so I conducted a usability test. To better understand the user's journey I asked the four participants to complete three tasks:

All four of the participants were successful in completing the tasks. I asked them to click through screens again and verbalize what they were thinking as they did it. I learned that:

The placement of the search bar and sort/filter buttons felt disconnected from the rest of the content
The 'Sensors' page felt overwhelming and disorganized
Some of the information in the graphs was unclear and could have more feedback to the user like 'Good', 'Poor', etc.

Reflection

This project was a great exercise in data visualization and testing. From the UX wireframes that were given to me, there was a lot of data that needed to be shown in the best way for the persona. Keeping that persona in mind made me put myself in their shoes and think about how they would want to use this product.

Conducting desirability and usability testing was really valuable in my design process. Getting feedback from my instructors and peers is great, but I found that testing my designs to users with no prior knowledge of the project was really beneficial. Through this project, I learned that I really enjoy conducting user testing. I like to hear their thought process as they click through a prototype and seeing what may confuse them along the way.

If I were to continue working on this project I would apply the feedback I got from the testing, and then test it again!

Want to see more?

Private School Locator

A mobile app that helps parents find the right private school for their children. I utilized user interviews to create mid-fidelity wireframes.

Creatron

An artificial intelligence web app that allows the user to discover trending topics to create content about. I navigated the entire design process from research to the final designs.