Navigating Through Plants

The Bonnie Plants Catalog project in Figma

I found out I regularly purchase Bonnie Plants every spring from my local grocery store so that was fun to find out. This is my mint plant, Minty.

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.


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.

Wireframes for Bonnie Plant App.

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.

Original styles (left) My styles (right)

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 last navigation bar was the one I used as top navigation in my prototype

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.

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!

Thanks for reading!



I am a budding web and app designer who likes to learn new technologies, and use creative means to solve problems.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Chelsea Hansen

I am a budding web and app designer who likes to learn new technologies, and use creative means to solve problems.