Back

Planty

Planty is a brand-new application that helps take care of indoor plants and keep them healthy with the help of AI. It diagnoses plant diseases, selects care products, creates a care schedule, sends notifications, and connects to your main calendars.
My role
UX/UI Designer
Project duration
Oct 2023 – May 2024

Problems

Identifying plant diseases and their causes
It can be tricky to figure out what disease is affecting a plant, what caused it, and if other plants will catch it too.
Remembering to care for plants on time
It's easy to forget when and how to properly care for plants, especially with a busy schedule.
Choosing the right treatments for all plants
Selecting the right treatments can be a challenge, especially when dealing with multiple plants and trying to address the same issues with just one product.

How it was done

I used design thinking framework which is a user-centered approach to problem-solving.

This 5-stages process allows for creating an enjoyable experience and identifying market opportunities to achieve our business goals.
Emphasise
Define
Ideate
Prototype
Test

1. Empathising with the users

The first stage is to empathize with our target users. The goal is to better understand our users: their problems, wants, needs, and situations to design a product that works for them and creates an enjoyable experience.

What we want to know:

1
Who are the users exactly? How do they take care of plants?
2
What do users think and feel about their current experiences with taking care of houseplants overall? What pain points and challenges do they have?
3
Do they use any helping apps? What do they say about their experiences with such apps?
4
What are their demographics, behaviours, preferences?
But first...  
Checking competitors
I checked similar apps in the App Store and Google Play store to conduct preliminary user research and learn more about the plant care sphere. I wanted to understand what features similar apps usually have and how their users speak about these apps. It gave me some insights for my survey.
Show competitive audit results

Creating Empathy Map

I selected 10 target users and conducted video interviews. Based on the information gathered, I created Empathy Maps for each person. I then combined all my findings into one comprehensive Empathy Map.

2. Defining key problems

On this stage I analyzed my research findings from the empathize phase and determine which user problems were the most important ones to solve, and why.
What did I do:
1
Wrote User Stories for all Personas
2
Generated clear JTBD which combined all the information by jobs
3
Generated User Journey Map for all Personas
4
Formulated Problem Statements

Writing User Stories

The next step involved creating User Stories for our Personas. A user story is a one-sentence narrative told from a Persona’s perspective, encapsulating who the user is, what they want to do, and why.
As a worried person, I want to cure my plants quickly so that they can stay healthy and grow.
As a worried person, I want to have one reliable source of information so that I can avoid conflicting information and reduce stress when deciding on the best course of action for my plants.
As a botanical enthusiast, I want to learn more about my plants from a reliable source of information so that my knowledges are solid.
As a busy person, I want to have a reliable source of information so that I can avoid spending time searching for tips online.
As a student without a lot of money, I want to have a reliable source of information about taking care of plants so that I will save money finding the right cure.
The Jobs to be Done framework suggests that people ‘hire’ products or services to fulfill specific tasks. It generalizes all users' needs and goals, focusing on desired outcomes.

JTBD Generation

When
Situation
I want to
Motivation
So I can
Outcome
When my plant is ill
I want to have a reliable source of information on how to care for it
So I can avoid conflicting advice and reduce stress
When my plant is ill
I want to cure it promptly
So it can remain healthy and continue growing
When my plant is ill
I want to find information quickly
So I can avoid wasting time searching for tips online
When I want to add new plants to my collection
I want recommendations based on my existing ones
So I can expand my garden effectively
When I need to purchase plant care products
I want to have help from the app
So I can make the best decision with the first attempt

Preparing User Journey Map

I created Customer Journey Maps for each Persona for main scenarios to identify key customer interactions.
The Jobs to be Done framework suggests that people ‘hire’ products or services to fulfill specific tasks. It generalizes all users' needs and goals, focusing on desired outcomes.
I identified numerous improvement opportunities, primarily related to app features and design, as well as additional deliverables such as store descriptions, store screenshots, and a landing page to enhance the overall experience.

Generation of Problem Statements

Emily
Emily is a young student and botanical enthusiast who needs to have help with taking care of her plants. She wants to see diagnoses in simple terms, get notifications with explanations of what she should do, and get a convenient schedule for maintenance of all her plants.
Brian
Brian, a busy professional, is seeking a solution to care for his plants and maintain a balanced lifestyle amidst his demanding corporate job and love for nature. He wants an app that will simplify plant care and save his limited free time. He needs a reliable source of information and a flexible schedule that allows him to change care dates without affecting the rest of the schedule.

3. Ideation of the solutions

The goal was to generate a wide range of innovative ideas, refine, and prioritize them. This process involved:
1
Generating ideas without evaluation.
2
Selecting the best ideas and determining the implementation order using the HMW (How Might We?) framework.
‘How might we?’ framework
It allows to take problem statements from the define phase and turn it into a list of questions that start with “How might we,” or HMW.  HMW questions help reframe user problems as exciting opportunities for solutions.

HMW Statements Ideation

How might we use AI technology to aggregate and curate plant care data from multiple sources into one platform?
How might we develop a personalized plant care reminder tool?
How might we integrate plant care reminders into popular digital calendars?
How might we simplify the process of finding houseplant care advice online?
How might we personalize online plant care recommendations to reduce the feeling of being overwhelmed?
How might we gamify the plant care reminder experience to make it more engaging?

I aggregated all the information I gathered during previous steps to the Design Goals

Utilizing AI
  • Use AI to identify plant problems from photos.
  • Provide fast and accurate diagnoses to users.
Setting Schedule
  • Help users efficiently schedule plant care tasks.
  • Allow changing care dates without affecting the rest of the schedule.
Choosing Products
  • Assist users in selecting the right products to treat plant issues.
  • Ensure products are compatible with as many user plants as possible.
Overall User Experience
  • Create a smooth user experience with easy navigation and an attractive interface.
  • Provide clear and concise instructions to prevent users from feeling overwhelmed.

4. Prototyping and testing the app

This stage consists of several steps. My first step was to create an App Site Map, which provides an overview of the site's areas at a glance. Then, I developed paper prototypes for the main screens. I'm not particularly fond of this framework as I struggle with drawing and handwriting, so I prefer to transition to prototypes in Figma promptly. After several iterations, I tested my prototypes with users – I will provide more details in the next stage of my case study. Upon receiving positive results from the usability study, I created mockups and a high-fidelity prototype for the entire app.
Stage steps:
1
App Site Map
2
Paper Prototypes
3
Prototypes in Figma
4
Mockups

A Site Map is a visual representation of the app’s content organization

It shows the hierarchy of screens and numerates the app sections.

I’ve designed mid-fidelity prototypes

Usually, the process starts by making paper prototypes that then progress into low-fidelity prototypes. Because I lack drawing skills and have pretty poor handwriting, I choose to create clickable prototypes in Figma immediately. Another significant benefit of this choice is that it enables me to use variables and conditionals for more complex prototypes.
Why do I use mid-fidelity instead of low-fidelity?
1
Low-fidelity prototypes confuse users who are not used to "raw" versions of products (having only seen final applications and websites).
2
Low-fidelity prototypes may not provide a clear understanding of the space required for each section.
Benefits of this approach:
•  I can organize screens precisely.
•  I can create complex prototypes.
•  I can quickly transform prototypes into high-fidelity versions by working with styles and components.
•  Participants can easily comprehend the screens.

Moreover, the results of the usability study are not influenced by the visual design itself.
I prepared usability study scenarios and conducted unmoderated usability testing online with 5 participants for each scenario.
The three main user flows tested were marking tasks as completed, scanning ill plants for diagnosis, and syncing calendars.

Insights from the usability study

With some additional improvements compared to the first version.

Completing Tasks

1. Adding sorting by room

It’s beneficial for users with large apartments/houses or multiple plants of the same type in different rooms.

2. Including a toggle between tasks and plants

It allows users to complete one task for all plants before moving to the next task, or to complete all tasks for one plant before moving to the next plant.

3. Adding tips for each action

It makes information easily accessible, so users don't have to remember details. Including helpful facts, particularly about the user's plants, can also improve the experience.

4. Adding ‘Edit reminder’ button at the end of the care schedule

It allows convenient access on both the home screen and in the Calendar view.

Scanning Plant

1. Displaying diagnosis and treatment details on the same scanning screen

Showing all information on one screen makes it easily accessible without requiring additional steps.

2. Automatically adding treatment to the care schedule

If the user already has the treatment, it will be included in the care schedule. If the user does not have the treatment, suggested products will be shown. The user will be asked if they want a reminder to buy the necessary product.

Updated prototypes

The Sync Calendar prototype stayed the same because the usability test results were positive.

5. Final Design

My goal was to create a design that would bring joy and be easy for all users to use.
1
I focused on creating a clear structure to keep the design simple and intuitive with a great visual hierarchy to guide users through the app.
2
I maintained consistency in design elements such as colors, fonts, and layout across the app, which helps users feel familiar and comfortable while using it.
3
Accessibility was a priority in the design. For more information, please refer to the Accessibility Compliance section.
Design Approach
I began by creating a UI Kit that contains all the elements used in the design. I utilized all Figma features including:
  • Components
  • Styles
  • Auto layouts
  • Conditionals and variables for clickable prototypes
This allows me to easily maintain a pixel-perfect design, make quick adjustments, and ensure responsiveness. I also ensured proper layer naming for developers to navigate through the screen and code without difficulty.

Tasks

1
There are two display modes available: ‘By task’ and ‘By plant’, which are explained in the ‘Insights’ section.
2
If the user has not added rooms to the plant’s parameters, the app will show all plants in one list. However, if rooms have been added, the app will display the room’s title in each mode.
3
The user has the option to mark all tasks of a specific type or all tasks for a particular plant as completed at the same time.
States
When scrolling begins, the app will display a smaller version of the navigation bar to allow for more content to be visible.

Calendar

1
Users can swipe dates on the main screen.
2
Users can access the full Calendar view by tapping the Calendar icon.
3
The app provides the option to sync the Planty calendar with Apple or Google calendar.
Date Indicators
The app includes date indicators for various scenarios like:
• Dates with and without tasks
• Today and other days
• Selected and unselected dates.

Reminders

1
Users can set individual reminders for each activity, with options for push notifications or alarm clocks.
2
For tasks that occur monthly or less frequently, I've included a 'Change date' feature. This allows users to adjust the date of the next action if they are unavailable on the scheduled date (e.g., during vacation or a business trip) without impacting the rest of the schedule. The app also shows the recommended maximum range for changing the date.
3
For activities that occur multiple times per week, users can set up multiple notifications for different days and times.
Group Notifications
Planty has a feature that combines notifications for the day when uncommon events happen at the same time as regular events on the same date.

Calendar

1
Users can swipe dates on the main screen.
2
Users can access the full Calendar view by tapping the Calendar icon.
3
The app provides the option to sync the Planty calendar with Apple or Google calendar.
Date Indicators
  • Dates with and without tasks
  • Today and other days
  • Selected and unselected dates.

Accessibility Compliance

1
I've used a font with good readability, eliminating the need for a separate font style for people with dyslexia.
2
I included two settings for improved accessibility:
• Increasing text size for users with visual impairments and older users to enhance readability and inclusivity.
• Reducing motion for users with cognitive or attention disorders to prevent overwhelming them.
WCAG AAA Standards
I ensured excellent color contrast throughout the app, with all color pairs meeting WCAG AAA standards for contrast ratio. Only one color pair would meet this standard after increasing the font size, which could be adjusted in the Settings screen.

Key Takeaways

Working on this project was a real pleasure. I was able to thoroughly work on the user experience using various frameworks. I really like the convenient implementation of the idea of responsible consumption: the application selects products for plant care based on the products and plants already owned by the user. I am also very pleased that we were able to meet the WCAG AAA requirements and make the design truly accessible.

Findings from the project:

1
Users want to simplify caring for all plants and minimize the number of products needed for care.
2
According to my survey, 27 out of 36 respondents are away from home an average of 20 days a year due to business trips and vacations. For them, it is important to be able to reschedule future tasks without disrupting the rest of the schedule.
3
It is important to set up analytics from the very first release in order to monitor user actions, the usefulness of features, and properly plan features for future releases.
Potential features for upcoming releases:
  • Joint Care: Linked accounts for families to care for plants together.
  • Some users also have gardens with outdoor plants. Consider adding outdoor plants and their care products to our database.
  • Use the camera to determine the brightness of the room and automatically decide whether the plants are receiving enough sunlight.
  • Think about creating a browser plugin with support for web push notifications.
  • Develop an app for Apple Watch to help users receive notifications and mark tasks as completed more easily.

Get in Touch

Back