RACHEL GARNER

Sage Overview

Context

Sage is the the product that I developed for my first capstone project in Springboard's UI/UX bootcamp. For this assignment, we designed a product independently from start to finish to give us hands on experience with each stage of the process.

Problem

Although gardening comes with its fair share of challenges for everyone, city dwellers often face significant obstacles when due to limited space, lack of sunlight, and little to no outdoor space. How might we help people living in these types of spaces simplify the process of researching and caring for their plants?

Role

UX Designer

Tools

Figma

Photoshop

Marvel

Timeline

Oct '21-Dec '22

Solution

Help people living in small urban spaces to work around and overcome their environmental limitations and by creating a product that helps users choose the right plants for their lifestyle and learn to care for them.

Design Process

Empathize & Define

Ideate

Prototype

Validate

01. Empathize & Define

Secondary Research and Competitive Analysis

Interest in urban gardening is on the rise. As of 2020, 66% of consumers owned at least one houseplant, and gardening related sales went up 30% from 2020 to 2021.

There are tons of resources out there to ease the pains of indoor gardening, but one thing that I noticed was lacking from the plethora of available resources was an easy and concise way to answer one question: “Which plants are best suited to my circumstances and environment?”

Although there were plenty of guides and listicles to help, they were all defined by singular traits such as plants that do well in low light, etc. What if we were able to remove most of the research and decision making from the process and let users skip right to the plants that were well suited to them?

Secondary Research Sources Link

Primary Research

For my primary research, I conducted interviews with five participants. To ensure that I was engaging with the right audience, I created a screener that would help me to find people who were both interested in gardening and living in small, urban spaces. Within this group, there were four women and one man, and all participants were in their mid-late twenties.

Affinity Map

Following the user interviews, I sorted my findings into themes on an affinity map to help identify pain points, common user traits, and potential useful features.

Audience Trait Key Findings:

Sensitive to their environment
Caretakers
Find satisfaction in self sufficiency and a manual way of doing things
Nostalgic

Users want:

A better understanding of the sunlight and water requirements for specific plants
A simple way to diagnose plants that are wilting, infested with bugs, or otherwise not doing well
Informed suggestions that will inspire confidence in their plant purchases.

It seemed that participants tried to be deliberate about giving their plants the right amount of light and water, but that most didn’t know the specific needs for each plant. There was also a frequent emphasis on feeling intimidated by too much information and ending up paralyzed by indecision.

Empathy Map

I then used the insights from my affinity map to create an empathy map that would help me to further understand my users’ needs. I tried to get inside the head of the average plant owner who was doing their best but with a few obstacles and a lack of focus. I took a few direct quotes from my interviews for the Says section.

Persona

Using the empathy map as a jumping off point, I created a persona to maintain a solid idea of the type of users I would be designing for going forward. This turned out to be a pretty easy step because most of my interview subjects had very similar motivations and traits.

My persona, Lily Rivera, represents a group of people with the best of intentions, but who perhaps struggle with task initiation or completion. To make life easier for users like her, I wanted to provide tools that would facilitate accessibility while narrowing options.

How Might We...

Once my persona was solid, it became much easier to narrow down the questions I wanted to answer with my product.

How might we help users remember to water and move their plants?
How might we make it easier for users to research plant care instructions without getting overwhelmed?
How might we help users choose plants that will grow well in their living space?
How might we facilitate troubleshooting for plants that are sick or dying?

02. Ideate & Design

I thought that an app that combines care instructions with a survey and advice was the best way to address these questions. The main function of the product would be a quiz where the users fills out details about their lifestyle, living space, and goals, and then the app uses the results to show them their best plant matches. The matches come with a picture and instructions about water, sunlight, and climate needs. They also provide info about overall hardiness, toxicity for pets and kids, size, whether the plant produces fruit or flowers and if they are self pollinating. Users can save their favorite plants for future reference when buying or caring for their plants.

User Flows

After brainstorming some user stories to direct my focus, I decided that the red routes for my product would be the quiz, searching for plants, and onboarding. Although I knew that there were other features I wanted to make available in the future, such as notifications and diagnosis, I wanted to start with the routes that I considered important at the time, knowing that I could always create more later if needed.

Sketches & LoFi

With my red routes in mind, I went to work on my initial sketches. Even though I didn’t consider it an official red route at this point, I went ahead and sketched designs for the diagnosis screens since I knew that I would need to work out a way to include that path at some point.

Marvel Prototype Screenshots

These sketches were also what I used for my guerrilla usability tests. I took photos of all of my sketches individually and created a rough prototype in POP by Marvel. Above are a couple of screenshots of the process.

Low Fidelity Prototype and Guerilla Usability Tests

Key findings from guerrilla usability testing:

The onboarding process was occurring too early in the app experience and came across as aggressive. One user suggested that I move it to the end of the quiz flow so that it only prompts a user to create an account if they try to save information.
There were no back buttons on the quiz questions, which frustrated users if they changed their minds or accidentally bumped a different answer than they meant to.
At this stage, users did not feel like they were able to interact with their quiz results enough.
A lack of cohesive home page as the first screen of the app and to land on in general was generally off-putting for users, and it was clear that one would need to be designed even if it was not directly involved with any red routes.

Click for full view

Low Fidelity Wireframes and Wireflows

Following the feedback from my guerrilla usability tests, I designed low fidelity wireframes in Figma that started to look more like a functioning product.

Changes made based on user feedback:
I moved my onboarding red route to follow the quiz and only prompt the user to create an account when they tried to save their quiz results. The app was now set up so that users could take a quiz and search for plants without adding any personal information, their settings would just not be saved.
I added back and next buttons to the quiz section to give the user a clearer idea of what was happening and therefore to give them more control.
I designed a home page and added a home screen with a weather feature and a section with care reminders for plants the user had saved.
The diagnosis flow was fleshed out.
All corners on the quiz answer boxes were rounded to better indicate that they were clickable buttons and give a feeling of softness to the screens.

Moodboard

Because I was working on a product whose main purpose was to help users develop a skill, I wanted the brand to feel natural, adaptable, and relaxing. The whole point is that anyone can garden, so I wanted the product to feel as inclusive and stress-free as possible.

I wanted the header font to give off a subtle vintage mood to reflect the nostalgic aspect of users in my early interviews.
I was sure I wanted to use lots of real photography early on not just for aesthetic beauty, but also to set the product apart from competitors that more heavily used icons and illustrations.

Style Guide

I wanted to make the design feel like looking through shaded leaves, so I chose a low contrast image of leaves for the background and blurred it to the point that it wouldn’t be a distraction from the foreground.

Since my early interview subjects were on the nostalgic side, I chose Clearface Serial as the header font to give the app a slight retro feel. I made all of my body text San Francisco Pro to keep it clean and easy to read. I wanted to make sure the icons on the navigation bar flowed with the text so I made them all the same shade and used very simple designs.

I went for an analogous color scheme with multiple shades of green to keep the app feeling natural and relaxing and mimic the various shades of green in a forest or greenhouse.

Most buttons and sections are slightly transparent to fit with the theme of shadow and light through leaves, and I used drop shadows on most of the sections and imagery to add depth to the screens.

High Fidelity Mockups

04. Prototype

Interactive High Fidelity Prototype

Click for fullscreen!

05. Validate

User Testing Key Takeaways

The purpose of the diagnose button was not clear on its own, text was needed to give the user context.
- To address this, I added text above the button that said “want to diagnose your plant?” to make sure the user understands the purpose of clicking.
Users were somewhat confused by the diagnosis process in general, specifically the task of diagnosing a specific plant after choosing the disease.
- I had hoped that adding the text over the diagnose button would address all of these issues, but it didn’t end up clarifying the process for all users.

Problem

Current health status on plants before a user has made an account was confusing and unnecessary. This should only be noted if a plant has been diagnosed.

Solution

I removed all current health statuses except for ones on plants that had been diagnosed

Problem

Solution

Users could not tell at a glance which of their plants had been diagnosed with an illness.

To address this, I enlarged the sick icon, moved the current health status to the top of the text portion of the page, and added a color gradient over the plant’s photo

Problem

Solution

Users felt that the findings of the quiz sort of disappeared after they viewed their results.

I addressed this by adding a compatibility score to all plant info pages and thumbnails so that users would never have to go back to their results page for reference if they didn’t want to.

Some users were confused by the term hardiness zone so I changed it to climate zone

Problem

Solution

Search results should be in a deliberate order

I ranked the results by individual compatibility

Problem

Solution

The search button needed to be visible on more than just the navigation bar for users to quickly notice it.

Colors were a little too dark overall

I added the search bar to the home page and added more light accents to keep the page from looking too dark

Final Thoughts

All of the changes made from the first round of HiFi user testing were well received. However, there was one task that some users still found lacking:

One user was still bothered that the user has to tell the app which plant it is diagnosing in the diagnosis flow. When redesigning, I thought that clarifying the diagnose button with text would help to address this issue, and it did for most users, but it feels like an incomplete solution if any users still felt it was counter intuitive.

If I were to keep working on this product, I would spend the most time trying to rework this stage of the diagnosis process. Maybe the app just needs to ask which plant its diagnosing at the beginning of the task instead of the end, or maybe it should be able to recognize the plant it is diagnosing automatically if the user chooses the camera function. It’s possible the flow just needs to be re-worked entirely. Fortunately, four out of five users didn’t bring this up as an obstacle, so I do feel that there was a significant improvement in usability with the changes made.

Looking at the UI of the product now that all is said and done, I wish I had scaled the whole app down and made most of the text and buttons smaller. In future designs, I will test them in a high fidelity mockup with a screen frame earlier in the design process. I think that I lost perspective of what should be visible on one screen without scrolling by only looking at the frames in Figma for so long.

Although I have my regrets about some choices I made in the process, I am overall pleased with the product and all that I learned during its development.

Back to Work