Plantopia
Daniel Keller
Interaction Designer
Made with

Plantopia

A UX/UI Case Study to help plantkillers keep their plants alive

Introduction

The first step in this project was to look for a project idea, after that I defined my target audience and how this product would solve their problem.

The reason why I decided to make a plant care app, was because I realized that some of my friends have problems keeping their plants alive, and I wanted to make their life easier. While others are plant experts, both were useful sources to make, test and improve my iterations. If you continue reading, you will learn more about my process.

  • This is a fictive project, but User Research & User Testing was done with real users
  • The app concept was made with IoT sensor devices in mind
  • My roles were UX Researcher, UX Designer & Visual Designer, I made everything from start to finish

Methods

Research: Screener Survey, Interview
Analysis: Empathy Map / Persona, User Stories, Card Sorting, User Flow
Design & Testing: Sketches, Wireframes, 
Moderated Usability Testing, Visual Design

Research

Screener Survey

The main focus of the survey was to screen people for a later more in-depth interview. I also wanted to know how many people have trouble with their plants and get an impression of their interest in an app. From the survey I learned that 60% have trouble keeping their plants alive. While 79% would you use a plant care app, 97% have not used plant care apps before.

Interviews

In these in-depth interviews I wanted to get more insight into how my users think and behave. Main takeaways were:
  • Implementing gamification will motivate more users to take care of their plants in a playful way without giving it too much space.
  • All participants buy plants based on their looks, in which they sometimes end up with plants that are hard to take care of.
  • The app would spare the need to google for symptoms or relying on lucky experiments.

Analysis

Plantopia

Heuristic Analysis

This competitive analysis is focusing on NNG's Heuristic Principles, I reviewed 3 apps that have similar features. I focused on 5 principles that make the most sense for the plant care apps I found on the app store, I rated each principle accordingly from 1 - 5 stars. I used this methodology because it made me understand how the competitor apps work, it helped me see the strengths and weaknesses of them.

Plantopia

Empathy Map & Persona

To create a Persona, I started with creating an Empathy Map, that helped me organizing the insights of the previous interviews. The Empathy Map is about what the persona thinks & feels, hears, sees, says & does, that helped me figure out what the Frustrations and Goals of my persona Roxy are.

The persona worked in my favor, to focus on the essentials for the app and keeping it simple.

Plantopia

User Stories

For the MVP I noted down what's essential for a first product release: 

  1. Add specific plants and organize them
  2. Monitor your plants health and see what they need
  3. Get notifications if a plant needs attention

With that in mind I created user stories alongside user activities and user tasks. I wrote down requirements that are needed in order to implement all those user stories (which are not visible in the image).

Plantopia

Card Sorting

I created an open card sort that was conducted remotely and completed by 8 people

I learned that some users grouped things quite differently: like activities they like or not like to do, what they find useful, but also between managing/monitoring or grouping, growing and adding plants. Another participant grouped tasks for a singular plant and tasks for multiple plants, which made the most sense for the app. I also did one card sort in person, asking questions really helped me understand why a certain card was placed in a group.

With this information in mind I build another version of the sitemap, where I broke down the sections into a structure that made sense, as seen on the left.

Plantopia

User Flow

I made an user flow with draw.io for three different scenarios with a legend that explains the key elements. User 2 wants to search and add a specific plant, user 3 wants to set up a watering interval for a plant. Everything is explained step-by-step, I split the user & system activity because they act independently.

Design & Testing

Plantopia

Sketches

First Draft

With the user flows in mind I started visualizing the design by sketching some low fidelity sketches, this way I could quickly brainstorm and see what works and what doesn't.

Second Draft

After user testing I realized that the home screen and detail screen are too confusing for the users, so I went back to my sketchbook to sketch down some more drafts.

3rd iteration of the wireframes
3rd iteration of the wireframes

Wireframe Iterations

I made high fidelity wireframes with Adobe Xd. 
It was useful for usability testing so the testers wouldn't be influenced by the visual design and I could iterate the screens faster.

Through regular remote meetings with the my mentor, I received continously feedback on things to improve on. We established that the search function doesn’t make sense because it is the same as adding a plant, also that a “master edit” button would make sense in the app.

I made 4 iterations total, with the fourth iteration I implemented the new home and detail screen from the second sketch draft.

Moderated Usability Testing

I made a testing script for my moderated usability testing sessions, the users used Loom to record their screen. I tested 3 users and found out that it wasn't clear enough on how to rearrange or rename plants. The user flow to add a plant felt very simple and natural for all of them, the amount of information was short and to the point but more information was available by scrolling down. Checking the water level was easy to understand, but when it came to the plants’ other needs it was not clear enough as to what the different colors mean. It needs a clearer way to display their current states, and according to the testers the plants’ needs should be one section and not be seperate. One user was confused by the smiley faces and wished for a section to add personal notes for that specific plant.

Quick overview of the user tasks:

  1. Add a specific plant to your homescreen
  2. If you had more plants on this screen, what action would you do to rearrange them?
  3. Check your water level
  4. Check your plants other needs

Overview with added plants
Overview with added plants

User Interface

I decided to go for a mobile web app, because if it would get build this way, it would be available on all platforms and I would save a lot on development costs. If it was successful, native apps could be built later.

Since I didn't have to follow any guidelines, I was able to design a unique user interface that was different but still visually appealing.

Like previously mentioned in the interviews and seen in the wireframes, I implemented the idea of individual levels for plants with the purpose of motivating the user additionally and make the chore of watering more playful.

Learnings

With this project I learned the ux process and how to structure my project. I learned various new UX methodologies like User Stories and Empathy Map. I learned a lot about plants, plant care and how people take care of their plants, which helped me creating this study. Next time I would explore more with sketches from the get go. I got to use different UX tools like Optimal Worksop, Realtimeboard & draw.io for the first time, they are all useful tools.

33
Survey Participants
3
Interviews
4
Iterations
3
User Testings