Enhancing my PlantList app with user feedback

Software developers looking for bugs
Image from Freepik

Recently I decided to improve my PlantList app and possibly add some new features. I had made the app fairly quickly with a colleague during my coding bootcamp and knew there was a lot of ways I could develop it.

The idea of the app was to give users the ability to search for plants by their name, colour, or keywords and bring up images and some additional information like scientific name, genus, and family.

PlantList app with a tree and list of plants
A Screenshot of the new feature on PlantList

The Users

PlantList was created for gardeners, plant enthusiasts, and people studying horticulture.

Tools used

JavaScript (ES6) | jQuery | HTML5 | CSS | REST API | Sketch

Problem statement

What are the essential features of a botanical encyclopedia application?

Several months after completing the paired-programmed app I set out to get some user input for new features and tweaks to the UI/UX. I created a Google form and sent it to a handful of people with instructions to review the app and give some feedback. The user’s demographics ranged from 30–70 years working in a variety of industries, some related to horticulture.

I asked the users questions like, was the app easy to use, why they would use it, if they encountered any bugs, and what new features would they like to see in it.

A pie chart of user feedback 80% said easy to use
A pie chart of the feedback received about the PlantList app

The data I received from the users was extremely valuable, pointing out some UX improvements that could be made and also some enhancements I could make to increase accessibility. I also had some great feedback as to what new features people wanted to see in the app.

Based on the feedback these are several small tweaks I made to the app:

  1. A return to homepage option when the PlantList logo is clicked.
  2. The ability to click the back of the cards so they return to the front face.
  3. Added a tab index to the logo and a JavaScript function so the cards are activated when the Enter key is hit, thus, increasing the apps accessibility.

Several people mentioned they would like to be able to add plants to a list so they can keep track of their favourites while they browse. It then dawned on me that I had made an app called PlantList that didn’t have an option to create a plant… list. 🤭

This was obviously the feature I needed to add first.

Wireframe / concept of a HTML app created on Sketch
Wireframe / concept of a HTML app created on Sketch
Wireframe for the new feature on desktop and mobile

For the new feature (the plant list) I created a sidebar that slid out when clicked. On the sidebar, I put an unordered list (<ul>) in the HTML and added an Add To List button to be dynamically populated onto the back of each card. This button would set the value attribute to the selected plants’ common name. Then I wrote a function to use that value attribute (common name) and populate the <ul> with a list (<li>) containing that value. Thus, when the user clicked Add To List, the common name of that plant was added to the list on the sidebar.

Screenshot of PlantList app with plant images and names and a list of plants
Screenshot of PlantList app with plant images and names and a list of plants
The new list feature on a desktop screen

I underestimated the value of user feedback and will be asking users what they think about my apps earlier in their life cycle. Creating the form and sending it to people was very easy and efficient and in the future, I will be asking a wider range of people so I can get even better data back. I’m excited to test out some of my other apps now and find out what features will enhance them.

Thank you to everyone who gave me input for this app and all those who will help me make better apps in the future. Now I actually have a plant list in my PlantList! 🔥

PlantList — https://davidallenjordan.github.io/plantList/

Portfolio — davidallenjordan.com

Front-End Web Developer — Horticulturalist — Toronto Canada davidallenjordan.com