Propagate
Your local plant marketplace, online.
Project Overview
What is Propagate? An app for plant enthusiasts of any skill level - from black thumb to green thumb - who want to connect with a community to trade skills, cuttings, seeds, and plants.
Credits & Roles
For this project, I took on the role of the UX Researcher, and UI designer.
Special thanks to my friends and colleagues who assisted in the testing phase.
Purpose & Objective
The purpose of this project was to showcase my ability to create the same mobile app for both the iOS and Android native mobile operating systems.
My objective was to create an app that is not intimidating for users with little to no gardening experience while also catering to seasoned gardeners. I also wanted to ensure that each version of the app felt natural to users familiar with a specific OS.
Approach
The 5 Ws
Who is the app for?
Plant enthusiasts of any skill level - from black thumb to green thumb - who want to connect with a community to trade skills, cuttings, seeds, and plants.
What kinds of tasks will users complete?
- Searching for local cuttings, propagations, or plants (free, sale, or trade)
- Posting listings
- Researching plant care and needs
- Finding local plant shops
- Posting listings
- Researching plant care and needs
- Finding local plant shops
When will they use the app?
Any time - In the spring, users will be more engaged to trade gardening tips or seeds, propagations etc for annual plants.
Where will they use the app?
- At home, caring for plants
- While shopping for plants (to determine what care the plant will need)
- Anywhere that an unrecognized plant is seen that the user would like to identify
- While shopping for plants (to determine what care the plant will need)
- Anywhere that an unrecognized plant is seen that the user would like to identify
Why is this more suited for a native app?
To make the best use of the device’s built in OS features.
Research & Compare
Before jumping in, I took a look at two similar apps currently available. While OfferUp is not a plant app, users can post plants for sale, trade, etc. Planta is an app geared toward helping users care for their plants, but does not offer a marketplace to buy, sell or trade.
The breakdown below shows how common design patterns are being utilized by each app.
Ideate
I started by creating a complete user flow that hit on all of the actions and screens the user would experience when completing my defined tasks. This user flow was created in FlowMapp.
Next, I created rough wireframes to begin determining how users would complete tasks. For this project, I opted to utilize Balsamiq to create my rough wireframes more quickly.
Create
Since I am primarily an iOS user, I decided to begin creating my iOS screens first. I followed the Human Interface Guidelines outlined on Apple's site to ensure my screens matched. Once I had created my low fidelity screens, I repurposed the design using Google's Material Design.
Low Fidelity Screens - iOS
Low Fidelity Screens - Android
I continued to tweak, keeping in mind additional functionalities offered by native apps such as gestures, sounds and haptics. You can also see a detailed breakdown of the different gestures and behaviors of the app.
Once these details were narrowed down, I moved on to the visual design of the app. I applied my visual style and continued to improve the flow of the app. Additional screens were added at this stage, such as a user profile, and a listing posted by the user.
Test and Revise
I received a great pool of feedback on my initial protoypes. You can view all of the comments by heading to the original protypes for iOS and Android. Although most of test participants were iOS users, I felt that most of the changes I made were easily mirror to the Android screens.
Below is a breakdown of some of the feedback I received, and the changes I implemented. In some cases, an additional screen was implemented to resolve an issue, or clarify a part of the app that may have simply not been available in my protoype.
Positive Feedback
The log out button was placed exactly where I would expect it. The highlighting of the text in red also aided me in finding that option quickly.
- Natalie
- Natalie
Love the quick view of this profile menu. As a user, I would love being able to glance at an overview of my listings and transactions all in one place.
Love the way this listing view looks after posting. Very neat, and the eye is drawn to all of the important details.
- Kyle
- Kyle
Love how easy and simple it is to list plants!
- Abby
- Abby
Love how clean all the pages an Icons are - super easy to navigate and just very pleasant to look at!
- Brette
- Brette
Constructive Feedback
Because the UI is offering me so many options, the "+" in the upper right hand corner is vague. I was afraid to press it because I didn't know what to expect. I do like its position as a constant element as I scroll.
- Travell
- Travell
The "humidity" icon had me a bit confused until I clicked through, maybe it should be a spray bottle or something of that nature? I originally thought it was the size of the cutting/propagation listing.
-Liz
-Liz
Resulting Changes
- Added a more prominent, floating button to create listings
- Chose a new humidity icon that is more clear for iOS users
- Chose a new humidity icon that is more clear for iOS users
I feel like adding quantity and pricing as separate entities outside the description would streamline the listing process.
-Natalie
-Natalie
I don't know the difference between a plantlet and a propagation. I think it would be helpful to have a little "info" icon somewhere on the listing page with 1-2 sentences describing each plant stage.
-Elyse
-Elyse
Resulting Changes
- Added a price option to relevant screens
- Added an icon to learn more about the types of listings when posting
- I decided not to add a quantity since this functions more as an app to connect people. Other similar marketplace services such as Craigslist or OfferUp leave this up to the user to manage.
After sending money to the user the listing still looks active. There should be some indication that the listing is no longer available after money has been moved.
I also think that the user should have the ability to send photos.
-Natalie
-Natalie
I wouldn't have caught the $ cta without the hotspot.
-Becky
-Becky
Resulting Changes
-Added reference to listing that is being discussed in the message thread.
-Emphasized the payment button on Android to be more visible
- Since I decided not to include quantity options and these listings would function more as community posts, I did not include a way for the app to automatically mark the listing as inactive
The home/back button in the upper left corner gets a bit lost against the image behind it. It might be helpful to find a way to ensure it is clearly visible regardless of the image behind it. Perhaps a less transparent overlay of some sort?
-Kyle
-Kyle
Depending on the image, the back button can get lost or be hard to see. Not sure what to do about that. Perhaps add an overlay? You could move it but I would expect to see it in the top left corner..
-Sam
-Sam
Echoing Sam's sentiment on the back button, maybe a small shadow would help?
-Liz
-Liz
Resulting Changes
- Designed a back button for iOS, rather than using the system text default
Challenges
Android Transitions
Since I am not typically an Android user and did not have a device on-hand, I had to do a bit of research to see how android app transitions and animations are typically structured. U used resources online, but in the future I'd like to have access to an Android device.
Shadows and Materials
Each OS uses different guidelines for different element styles, shadows, corners, etc. I spent a lot of time ensuring that each element matched what the OS's guide recommended. In the future I plan to better utilize XD's components and other built in management features.
iOS 15
During the course of this project, Apple released iOS 15 and in turn updated their website to include different resources. This didn't come into play much, but I was briefly confused. I felt like it was good to see this during this project as it will be happening annually!
