PLANTSWAP
OVERVIEW
Web Design Project, 2021
3 Weeks
This project was an assignment for my web design class. In the spring of 2021, I was tasked with creating an independent app design. I decided to make an application for plant hobbyists to swap plants, plant cuttings, or seeds. Over the Covid-19 Pandemic, the houseplant market exploded.
People aren't just buying plants, but are learning about different types of plants, searching for rare ones, etc. This is how I decided upon the need for the PlantSwap app concept.
PlantSwap serves as an place for plant parents to not only swap plants, but to connect with other hobbyists in their area, and build their own online community.
THE PROBLEM
As houseplants became more popular, more and more people got into collecting rare plants, trading cuttings, and are immersing themselves in the plant community. During the Covid-19 pandemic, more people have started working from home. This increase in loneliness causes people to go to online communities.
So PlantSwap has to be not only a way to swap plants, but has to serve as an online gathering place for plant lovers.
THE SCOPE
PERSONA - CONNOR
To get into the mind potential users, I created a persona of a young man who became interested in plants during 2020, and is looking to add to his collection.
EMPATHY MAP
I created an empathy map to better understand users frustrations.
With the help talking to friends who are into collecting rare and unique plants, I created an Empathy Map to help get into the mind and understand future users.
​
What does the user.... Say, Think, Do, and Feel​?
.png)
USER JOURNEY
Below is the emotions in which the user goes through while trying to find a plant called the Philodendron Pink Princess. They may use Ebay, Craigslist, or hunt down the Pink Princess at plant shops around the city. This made me think of ways in which I could improve this process for the plant hobbyists ease of mind.
.png)
WHAT'S NEEDED IN A SOLUTION?
Below are two lists of what it desired in a final product, as well as safety concerns interested users brought up about swappinng.
Desired Features:
-
Create a Post, Option to buy or Sell.
-
Categories for full grown plants, seeds, plant cuttings, etc.
-
Messaging
-
Map that lets users know someone's public meet up place after they agree on an exchange.
-
-
Browse​
-
Favorites​
-
Search + Filter
-
Safety Concerns
-
Public meeting spots
-
Price control - fair marketplace, allow users to negotiate with each other.
-
Encourage paypal to people who want to purchase items, amd not swap (coming soon).
SITEMAP
After I sorted through which features would be helpful, I started mapping out what the different pages could be. In this process I was thinking of things like "how many pages do I need", "what's the hierarchy", etc. This process helped me simplify ideas and organize my thoughts.
WIREFRAME
Using Figma, I created a final wireframe and thought through how user's would navigate within the application. The workflow in the wireframe is of a user trying to find a Monstera Deliciosa cutting. The user wants to swap though, and not buy.
DESIGN LIBRARY
Below is the Style Guide and the Components I documented in Figma while creating PlantSwap.
PROTOTYPE 1
CLICK THROUGH ME!
This use case is for a someone who is searching for a monstera cutting they can swap for.
​
Follow through this flow and take a look at this concept!
Prototype not work?
USER TESTING + REFINEMENTS
Participants
Gathered two participants, one family friend and one classmate, for quick testing rounds. For user testing, I created a quick task the user would have to complete using the prototype. Note: I chose two vaccinated individuals so that I could observe their reactions in person. Testing was completed with social distancing and clorox wipes.
How it was conducted:
-
Had two users run through the prototype using Figma mirror.
-
User's were given the task to find a monstera cutting and set up a public swap.
Notable Feedback:
-
"The Green color that was used for callouts and the menu bar feels too bright on the screen".
-
"Button are kind of narrow".
-
"I wish I could pull up this location in google maps"
Observations:
-
Participants had a hard time hitting touch targets.
-
Text was hard for people to read, the majority of text descriptors were too small.
-
People were looking for more UI feedback/confirmation as they completed the signup and onboarding processes.
UI REFINEMENTS
Home (Landing Page)
-
Touch targets had to be updated, buttons and field entries felt too small for users.
-
Text was made larger for increased readability.
-
A floating filter button was added for usability: allows user to filter at any scroll point.
-
Updated the bottom navigation to be cleaner.
-
Color: changed the "main green" for more contrast.
.png)
Item Details
-
Increased the button height for larger touch points.
-
Text size of small details and colors callouts were added to enhance readability.
Public Meeting Spot (Map)
-
Added a place for the address and meeting place details.
-
Used testing feedback and added a place to open up the address in either Google or Apple maps for ease of use.
THE FINAL PROTOTYPE
CLICK THROUGH ME!
This use case is for a someone who is searching for a monstera cutting they can swap for.
​
Follow through this flow and take a look at this concept!
Final Prototype not work?
TAKEAWAYS
What I Learned:
-
How to incorporate a sitemap into my ideation process.
-
How to use variants and build a design library.
-
Figma
-
Better understand the software
-
Learned how to use smart animate in order to create dynamic onboarding screens.
-
Learned how to auto layout for building quicker and easier to edit prototypes.
-
What's Next?
-
Edit and refine the app even more based off a second round of user feedback.
-
Add pages for people who want to buy and ship plants.
-
Add more micro interactions.