Plant App: Exploring User Experience (UX) through app-based design

A photo of the rough brainstorming session from the start of my app projectA photo of the rough wire frame of the collection page for my plant appA photo of the rough wireframe for the plant profilesA photo of the home screen for my plant app

The seed was planted.

This project came to life after I forgot to water my plants—again. After barely resuscitating my Ghost Echeveria, I set to work creating something that was helpful to others and let me practice my UX techniques: a good looking app that reminds people to “water their damn plants”.

Technology used

Paper, Pen, Adobe XD, User Persona, Use Cases

The Problem

Its easy to forget to care your plants

The high fidelity mockup of the plant profile page of my plant app

Starting to Germinate

Perhaps it was the practicality of the idea itself, but this project marked the first time I truly approached design from a UX perspective as opposed to an aesthetics-first mindset. This meant digging deep and doing a heck of a lot of research, especially when it came to UX techniques and concepts like Use Cases and Persona Creation, along with designing a number of rapid low-fi iterations and prototypes.

The high fidelity mockup of the search page of my plant app
The high fidelity mockup of the search page of my plant appThe high fidelity mockup of the plant profile page of my plant app

Growth & maturation

Old habits die hard (like a Philodendron), and the design on the first version of my app was definitely rooted in aesthetics more than function. However, the next iteration of the app will take more influence from my UX research, including redesigning the sections presenting usability issues. Another issue I encountered was scope creep, as I wanted to expand the functionality before I had built strong roots—err, a solid grasp on the necessary fundamentals. Now, with a deeper understanding and focus on user interaction, the next version of the app will establish more concrete standards of  UX-forward design based around aspects like its CTAs, edit windows, and the transitions between the sections of the app.

The next version of the app will establish more concrete standards of  UX-forward design

The Fertilizer

User Personas

Use Cases

#1: Plant Owner is Away and Needs Someone to Care for Plants

(Betty has been taken to the hospital and needs to send care instructions to a friend)
User starts at
home screen
>
User opens their collection from the home screen
>
Select:
Collection
Options
>
Select:
Send Care Instructions
>
Select:
Send Entire Collection OR
Specific Plants

The priority for this case is being able to send the care instructions both quickly and easily. A number of options for selecting the appropriate plants allows users to navigate flow without needing to stop and think.

#2: Unexpected New Plant

(Maggie stopped by the greenhouse on the way home. She wants to check care requirements before buying plants)
User starts at
home screen
>
Search by common or scientific name from home screen
>
List of results
>
Select:
Desired Plant
>
Able to view care requirements w/ option to
quick add

When a user is quickly adding a plant to their collection, an option to name the plant will be given. It will not be required but be a small added delight.

#3: Update a Plant in a Users Collection

(Greg's plant has a new flower, he wants to update the plant card in his collection)
User starts at
home screen
>
Select:
"My Collection"
>
Search Collection with preferred method
>
Select Desired Plant's "Quick Edit" Option.
>
Swap photo and complete any other edits.

Multiple options/methods to quickly search the collection will be presented, Users will be able to use the method that best suits their needs.

When a plant is updated, it is saved automatically. However, there will still be a manual save option to serve as reassurance.

A photo of my notebook, showing my rough wireframesA photo of my notebook, showing my notes and collection wireframesA photo of my notebook, showing more notes and rough sketches

Wireframes

The decision to go with wireframes came from an exploration into what’s most important to users at first glance. Visual hierarchy is important to help guide the eye down the page, and the design allows for a natural, top-left to bottom-right reading movement.

A screenshot from within Adobe XD showing the Plant profile page and edit window

What's Next?

The design of the app’s first iteration was rushed, and I found myself fixated on best practices over what was ‘best for the user’; scope creep was also an issue, as it was easy to get excited and want to add new functionality, before fine-tuning what was already there. For the next iteration of this design, I will: