For this project I designed an app to allow users to buy, sell and trade plants with each other.
TARGET USERS & THEIR NEEDS
To start this project I focused in on the main target users for the app. In this case they were two groups with separate but related needs.
USER STORIES & USE CASES
After figuring out the users I created 15 user stories and 8 use cases to brainstorm all of the potential features that these users might look for in the app.
The user stories focused on what the users’ needs were. For example “As an aspiring gardener I want to get plants cheaply so I can get more experience.” These stories helped me to myself in the user’s shoes and figure out what they would want to get out of the app and to start figuring out which features I needed to include.
The use cases took this to the next step by looking at how these needs might be achieved within the app. I created step-by-step instructions for each of the tasks to walk through what the user would need to do in order to achieve their goal. This helped to form the basis of my site map.
COMPETITIVE ANALYSIS
Before creating the site map I conducted a competitive analysis to look at where people are currently buying and selling plants. I wanted to figure out what the advantages and disadvantages of the current solutions were.
SITE MAP
Once I figured out which features were essential, I created a site map to organize the features in to groupings that would make it easy for the user to find everything they needed. This gave me the framework I needed to start designing wireframes.
PAPER PROTOTYPE
For the first version I created a paper wireframe to explore the main interaction of the app and figure out which screens I would need to make. This helped me to realize that the trade feature could be a lot more complicated than I had originally anticipated. Along with needing a way for users to accept or decline a trade, I also needed to include a space where they could negotiate if they wanted to make changes to the trade.
WIREFRAMES & TESTING
After creating the paper wireframe I made a digital version in Adobe XD and began testing it with my colleagues. Over the course of three rounds of testing I received a lot of feedback but the main points that came up were:
The icon for the message board wasn’t reading right. After testing a few icon options that still didn’t read as easily as I had hoped, I decided to add a labels to the navigation so that it would take out the guesswork and be more clear for the user.
Initially I had the home screen include available plants and the message board but this wasn’t intuitive during testing so I separated them into two different screens.
After testing a couple versions of the wireframes I added a counter offer option to the plant trading feature so that users would have an easier way to edit offers without having to negotiate too much or completely scrap the offer.
In early versions of the wireframe the user had to go through a couple screens in order to create a new plant listing. After some feedback from my colleagues I added a button to the navigation to allow users to add plants from whichever screen they were on.
MOOD BOARD
Before finalizing the wireframes I created a few moodboard options and then reviewed them with my colleagues to figure out which concept was the strongest. The final moodboard focused mostly on greens and neutrals with a few accent colors.
FINAL DESIGN
The final design includes a home feed where you can browse through available plants, a “My Plants” section where you can quickly view all of the plants you have for sale and look at your trade offers, a posts section where you can ask questions or post how-to videos, and a search feature in case you’re looking for a specific plant or and existing post thread.
The final prototype includes flows for these tasks:
Make an Offer on a Plant
Make a Counter Offer on One of Your Plants
Ask a Question / Make a Post
It also includes voice user interactions for:
Search “Show me cactuses”
Posts “What’s wrong with my plant?”
My Plants “Do I have any offers on my plants?”