Navigating Through Plants
The Bonnie Plants Catalog project in Figma
This project uses images and icons from the Bonnie Plants website and other sources. This article is for educational purposes only.
For this project, I wanted to change the app experience of the Bonnie Plants app. Much of my project surrounded navigation, and interactive features, making the app something that gardeners would want to go back to.
The app’s redesign focused on adding an easy way to save plants, recipes, and ideas to favorites so the gardener can come back to it, and have a way to track plants they purchased in their growing stages, watering cycles, etc.
The Process
Research & Site Map
I first needed to know the current sitemap and design of Bonnie Plants’ website, and their app, which gave me a multitude of ideas. I used their site map to create my own so I can get started with wireframing. I decided to start by taking some of the icons that they already had on their website and putting them all together as the main part of the navigation. I came up with a “wishlist” of features, and ideas for what I wanted to add, and they are listed below in my sitemap I created using Figma.
Wireframes
I wanted to get a good feel for how my navigation and organization would pan out, so I first went for the signup process first, and plants later, but that ended up being something I would change in the final design. While a lot of these ideas didn’t make it, it did help me think about what I wanted to actually do. I also got some feedback about the plant app onboarding experience and was told to make it simpler to get gardeners to plants as soon as possible. I learned that it would be better to just hide the sign-up altogether behind the accounts button later. This is all I wireframed via drawing it out though because I thought my ideas were ready for digital wireframing.
Design and Style Guide
This app was hard to create a new style guide for without going too far from their logo’s design which I wanted to include. I messed with different colors and changed the logo’s colors a bit to see what would fit overall.
I used some of the colors in the style guide I created, but I did use the original Bonnie plants logo. It didn’t feel right to change the colors, and I didn’t find a mix that fits. I didn’t even like the black and white logo as much as I liked the colored logo, and I made a decision to make this app a bit more colorful than other projects I made in the past, and that has been made evident in the overall design. All in all, I did use a mix of both style guides in the design.
Feature & Navigation Changes
After trying to implement my navigation in my digital wireframing, I had to change things quite a few times. This is where a lot of my focus went to when designing the app as a whole. The biggest change to my navigation was a feature I wasn’t sure about.
The question mark in the navigation was supposed to be an “Ask Me” button, where you tap on it, then you can tap on something else to learn about it. I didn’t know how that would be implemented very well. But I also didn’t want to leave this area blank. Luckily the original Bonnie Plant app had the solution. I changed the feature to a “My Garden” feature, where you can go in and add plants to your garden and put in reminders for when to maintain the plants as well.
I also went through a few iterations for the top navigation as I removed and combined features, such as the settings. I moved settings to the account button that was on the bottom left of the bottom navigation and had to move things around because I ran into issues with the iPhone’s notch. I also removed the idea of the back button since it didn’t make sense to leave it there because of the navigation I had already implemented.
Navigation Solutions
A large navigation issue I wanted to solve was navigating through the plant ordering process. I started by wanting to just have back arrows and/or a breadcrumb menu throughout the process, but those ideas didn’t quite stick. After a bit, I decided to add icons right above the bottom navigation.
A part of this navigation process was the ability to skip through steps if the gardener is already signed into the app. The checkmarks are above the icons of the steps completed so the gardener has no doubt that the step is completed. There is also the added ability to go back and edit the information if needed.
Learning Figma
A lot of my take-a-ways as far as learning goes is learning how to use Figma for wireframing and prototyping. I learned a lot about how to have frames within frames scroll vertically and horizontally, as well as how to add overlays to help with the bottom navigation, search bar, and expanding the weather widget. I also learned there still is no spell check for Figma is a shame. Also, holding command (Mac) while changing the frame size by clicking and dragging helps to not distort the items in the frame.
The “Finished” Prototype
I don’t have a complete prototype with all the product pages, and category pages completed, and that was because my focus became more about learning the tools for interactivity on Figma, and learning how to solve certain navigation issues between having an account, not having an account, and the ordering experience. So if you want to go through my prototype to see what has been created so far, you can view it with the link below!
