Sproutly End-to-End App

Role: Research, UX Design, UI Design, Prototyping
Timeline: 3 Weeks
Background
The popularity of indoor plants has grown drastically since covid reared its ugly head. Many growers are beginners and need to learn about their plants and know the best way to provide care going forward. Plants are like humans, they need to stay on a schedule for normal care which involves watering their plants, fertilizing, and repotting.
Problem
A user can't enter a plant into the app when the photo recognition doesn't find the plant and the user doesn't know the name.

Discover

📑

Research Plan

My goal from my initial research was to prioritize the features users would use most. I conducted user interviews and secondary research to learn:
  • What problems do users have to be solved?
  • What features will help users solve their problems?
  • Why will these features help them?
  • What are users most interested in learning?
🙂

User Interviews

I conducted user interviews to explore how participants buy and care for indoor plants. I wanted to use this information to create a cohesive experience for a grower from purchase through care. I interviewed a total of 5 people between the ages of 34‐54, both male and female, who considered themselves beginner to intermediate plant growers. They owned between 1 and 40 (yes 40!) plants with an average of 12.
Goals
  • Keeping plants alive with knowledge they find on the plant tag or from google
  • Finding the right information before purchasing a plant and once they get a plant home
  • Keeping a schedule for plant care
Motivations
  • All participants enjoy some sort of badge or reward system when using apps
  • Seeing a plant succeed is rewarding, makes them feel like they’re doing something right
Pain Points
  • Most common problem users had is remembering to water
  • Most participants used reminders in their phones to remember to water
  • Not having the correct information to help a plant succeed
  • Having to search on google to find information
📖

Secondary Research

My secondary research consisted of viewing plant care websites, discussion boards, and reviews for plant care apps in the Apple app store. I wanted to learn what information is currently available to users via Google since that is most people's first stop when needing information or advice for anything. From plant app reviews I wanted to learn what users' main pain points were. What I found was:

  • Apps with the photo ID feature for plant identification get frustrated with incorrect ID’s or no ID
  • The most consistent complaint are when plants aren’t in the app’s database and have no way to add your own plant
  • Users enjoyed getting scheduled reminders for plant care, being able to add pictures, notes
  • Some apps had no option to browse the app before making you create an account
  • Inconsistent water schedule advice, no ability to snooze the alerts or notifications
  • Plant databases with an A‐Z plant listing to find plant information was used on every plant care site, but also find by suggestions like, low maintenance plants, low light plants, flowering plants, etc
🙃

Interim Design Decisions

  • Reward system for completing tasks where the user can earn badges for their profile. This will help the users be more engaged, learn as they go, keep their attention throughout a plants life.
  • Have a photo ID feature but also a database to search for plant names as an alternative if photo ID can’t find the plant.
  • Water reminders / notifications for each plant with a snooze ability since this isn’t a by the book task that needs to be done
  • Plant overview information broken down into categories for each plant(ex: Amount of sun, Maintenance level, Difficulty, Fertilizing info, Pet friendly) for fast access and easy to digest information
  • General care guides for planting, repotting, fertilizing to eliminate the need for users to look elsewhere for information
📖

Back to research

While analyzing the results and putting together my design decisions the question arose - What if users can't find the plant? To eliminate this paint point and possible exit point I shifted back to researching how I can improve the experience of finding a plant. What I found was:
  • Search tips aren’t enough - users don’t read them, or if they do they may still get no results
  • Typo-tolerant searches are helpful for hard to spell words (definitely applies to plant names)
  • Next step suggestions - tell the user what they can do from here
  • Guided searches offer a way for the user to discover information by taking them down a categorized path
😎

Design Decisions

  • If a reverse image search or keyword search return no results, provide alterative next steps
  • Create a guided search where the user is asked broad categorical questions until we can provide a shorter list of results so a user can successfully find their plant (e.g. What shape are the leaves? Does it flower?)
  • Search results can be displayed as the questions are asked so a user doesn’t have to go through the entire set of questions

Define

🌄

User Journey Map

I mapped out Sam's journey using the app to explore how he'd manage each step to add his new plant to the garden. By mapping out his journey I got a better understanding of what the main ups and downs were and by doing so I thought of opportunities to solve those pain points.

User Journey Map for Sam
user journey map
🪴

User Flow

I created a user flow to explore all possible ways Sam could find a plant in the app, then add it to his garden. Creating this deliverable is helpful going forward in the sketches and wireframing.
User flow for Sam
user flow
🎞️

Wireframes

Using the rough sketches I created wireframes using Whimsical. Here I focused on the what if’s of finding a plant if the user didn’t have the name, and what if the reverse image search didn’t come back with results. What is the easiest way to give the user feedback to remove that frustration? In the camera screens I showcased instant feedback based on the quality of the photo the user is trying to take. Then I showed the flow of how the user would find that plant with the secondary search option.
Wireframes for finding a plant flow
wireframes

Develop

🌱

Branding

Here I created a logo for Sproutly. I wanted to incorporate the plant sprout to signify what Sproutly does while keeping it cute and friendly looking.
Multiple versions of company logo
logo drafts
🎨

UI Mockup

For the color palette I wanted to keep them earthy, with blues and greens to correspond with nature. I didn’t want anything bright and distracting since people look to gardening as a relaxing activity. I used Figma to create the design and laid out the pages from the wireframes. I also added more screens so the participants in the usability test would be able to test out the plant care reminders - since that is the main purpose of this app that brings the user back every day.
User interface shots - Version 1
UI mockup version 1

Deliver

🤔

Usability Tests

Participants completed an unmonitored remote test in Maze so I could observe how they interacted with the general flow and key features of the app.

Task: Imagine you just received a new plant as a gift and you don't know the name of the plant
Description: How would you identify this plant?

Task: Find the zebra plant and add it to your garden.
Description: The photo upload didn't ID your plant & you need to go through the guided search to find your plant. (The plant has pointed & striped leaves and does not flower.). Were these questions to find the plant easy to understand? Any suggestions?

Task: View the upcoming water and fertilizing tasks for your plants.
Description: How do you find these?

Task: Snooze the first watering task for your fiddle‐leaf fig.
Description: How would you do this?

Task: Examine the plant detail page for the rattlesnake plant.
Description: Is there enough info in the overview section to know if you’d want the plant?
hot spots in usability test
Findings
  • Participants knew what section in the navigation to select when they wanted to find a plant
  • Participants mis clicked at the start and end of the guided search with what to press to proceed
  • Being able to find the schedule from the homepage was very clear to participants
  • Swiping left or right is not intuitive on the schedule page to view task options
  • Participants felt enough information was provided in the plant detail overview to make a plant decision
🖌️

Iterations

After seeing the hesitations participants had I decided to redesign the UI. As shown below I eliminated the background in the non-search screens to help with color contrast and create more of a visual hierarchy with the elements on each screen. I also added elements to clarify the purpose of each section and eliminate redundancy.
Iterations for User Interface - Version 2
iterations - ui mockup
📽️

Prototype

Learnings

🤩

Conclusion

My biggest challenge with this project was the UI, I really got stuck thinking I needed to have a colorful (not black and white) background to make it more attractive for the user. While this was more of an aesthetic challenge I dealt with, the rule simple is better applies to it as well.

Besides teaching me a little about plants, the entire project taught me to think outside the box. Don’t worry how products out there now are doing something or, you can do better than them. Worried about technical limitations? Don't - there’s always a way.
Back to top arrow