Planter
A smart plant care app that includes care schedules, common plant issues, and a searchable plant catalog.
Overview
Brief: Ideate and design an app of your own, pitching the app idea and then prototyping the app with creation of a component library that can be passed off to a classmate to use for a future project.
I decided to create a plant care app based on my experiences as a novice plant parent, struggling alongside my sister to keep our plants alive and figure out what they need. This app provides care instructions, reminders, solutions for common issues, and a catalog of plants that is searchable by appropriate filters such as experience level and environmental conditions.
Feature development was done through pen-and-paper sketching while the component library and high-fidelity prototyping were done using Figma. Each stage of prototyping went through design critiques from the professor and in class.
Initial Pitch
The initial app pitch consisted of sketches of the main horizontal screens.
Care Reminders: a list of today’s reminders, past reminders, and upcoming reminders. Users can easily "check off" that they've done a task, and can use the settings button to edit, add, and remove reminders.
Your Home: pictures (cards) of all of the user’s registered plants, grouped by room they are in. Clicking on the plant brings up plant information, such as type, care schedule, and any notes from the user. The user can also add a plant from this screen.
Plant Catalog: searchable through a generic search bar or a selection of filters (hidden in a tab on the side). I ended up building out a “plant finder wizard”, which recommends plants based on a series of questions to the user.
Plant Issues (not pictured): common issues for each of the user's plants, as well as a searchable database of plant problems.
Sketches of the main horizontal screens for the initial app pitch
Since this was a mobile app, gestures were an important dimension of the design. Given the limited amount of space on a mobile screen, using the flexibility of touch can add intuitive interaction to your product and avoids crowding the screen with buttons. For this app, I employed the following gestures:
Tap
to see more info on a plant
Tap & Hold
to select multiple reminders or plants
Scroll
to move up and down the screen and through carousels.
Swipe
to snooze or dismiss reminders
Figma Build
After feedback on the initial app proposal, I began building it out in Figma. This involved some basic wireframing and importantly, creating a component library. Using a component library gave me a palette to work from to ensure that visuals and screens were consistent across the entire prototype. It meant that I could change the design of a component, like the color of a button, and that would populate across the whole prototype.
Buttons in the component library
A complex 'cards menu' is simpler with nested components
The component library also allowed me to build more complex pieces quickly. For instance, when I needed to prototype a screen where the user is selecting multiple plants, I was able to put this together with "selected" and "deselected" plant cards rather than having to copy, paste, and later edit each card individually.
Since this was an Android app, I designed my component library based on Google's
Material Design guidelines. The full component library, which includes everything from the various types of buttons to notification messages, side menus, dialog boxes, and search bars, can be found below.
Basic component library for Planter
High-Fidelity Prototype
After building the component library, I used it to develop the horizontal prototype. This high-fidelity version involved both screen creation, as pictured below, and creation of a clickable prototype, focusing on flow through the app and button and feature pathways.
Main screens for the four high level features
Feature Development
I built out three more complex features to address questions that came up in design critiques and brainstorming sessions: a plant finder wizard, a cognitive prosthesis that can recognize plant type from a picture, and a care calendar sharing feature.
Plant Finder
Accessed via a floating action button on the catalog page, the plant finder asks a series of questions such as "How often can you water it?" and "Will there be any pets or children around it?" and gives the user plants that would match well with those answers. This lets users explore plants that will match well with their lifestyle, rather than picking ones that look pretty and hoping for the best.
"Add Plant" A.I.
We were challenged to think about ways to integrate smart tools into our product. While one way to do this for plant care is through IoT watering devices and such (and this app has spaces to add those devices in), not every plant parent wants to invest in those. A more broadly useful feature is being able to recognize a new plant and get care instructions for it just by taking a picture of it!
Care Schedule Sharing
If you're a serious plant enthusiast, going out of town for any more than a few days can be just as difficult as if you had pets. This feature allows users to quickly share their calendars and reminders with friends so they can easily hop in and take care of plants when needed. You can also consistently maintain friends' calendars, so that plant caring can be a shared hobby.
These features were developed first by pen-and-paper sketching to quickly brainstorm and ideate, followed by design critique from my classmates and professor and then updated and transformed into a high fidelity prototype along with the main app screens.
Developmental -- and pixelated :'( -- sketches of the plant finder wizard, cognitive prosthesis, and care calendar sharing
Final product of the plant finder wizard, cognitive prosthesis, and care calendar sharing
Final Eval & Takeaways
The focus of this project was on developing and presenting product ideas and creating a strong prototype and component library; I worked through the double diamond process and was consistent with engaging in design critiques. The piece missing for me was any kind of true user testing. While classmates could represent some perspectives, they were also all designers, which skews the kind of feedback the product receives. At the end of the day, I believe this product is good, but I have no proof that it would actually work in the real world. I think one of the most interesting parts of this field is finding the unexpected things that work or don't work for actual users, so I'd be curious to see what comes up with this project and product.
Overall, I loved developing my Figma skills, honing visual design practices, and digging into interaction and feature design. It was also really interesting to think about the opportunities of mobile design, like designing for gestures and utilizing the camera.
This project also made me realize that I'd love to learn more about accessibility, both in terms of visual / gesture design but also in terms of tech equity -- recognizing that not everyone has the top-end smartphone (not everyone even has a smartphone!) and many people have to deal with a range of restrictions such as slow wifi or data usage limits. How do we design such that these users are not pushed out?
Want to know more about this project?
