A local plant shop in the heart of Denver, Colo. A family run business since 1974, specializing in house plants, succulents, cacti and air plants.
User Research | Competitive Analysis | Interaction Design | Visual Design | Heuristic Evaluation | Usability Testing
Sketch | Zeplin | InVision
The Nitty Gritty
My first step was to interview anyone who was willing to talk about plants with me. From there, with the help of affinity mapping, I found that I was dealing with two personas.
Has an interest in plants but is unsure if they are going to have time to care for them
Wants detailed care tips for the plant they are considering purchasing
Wants to make sure they are only looking at plants for a more novice plant buyer
Wants a new challenge
Wants to have an easy way to buy plants that they can’t find locally
Wary about buying plants online because they never know what size it will actually be
Improve brand equity and reach out to a larger customer base
Create a convenient site architecture and navigation to enable easy browsing
Include more information on plants so users are well informed about their purchase
Create a more user-friendly filtering system so certain kinds of plants are easier to find
To the Drawing Board
I knew I needed an easy way for users to filter through plants based on a few different things, difficulty level being the most important. Having an effortless UI was extremely important to me.
I was striving for an intuitive flow that would be enjoyable for users visually and mentally. Shopping for plants is a pleasurable experience so why should that be any different online?
The Herbery’s only online presence was a neglected Facebook page, so I barely had a layout or set of guidelines to follow. This is where using competitive analysis became extremely valuable. By researching other plant shops online, it became perfectly clear what was working and what was not.
The Lovely Stuff
Bring it All Together Now
The Herbery’s website design offers a clean and refreshing way to shop for plants.
Customers learn more about plants they are considering to purchase.
The UI achieves an important goal: making it quick and easy for visitors to find and learn more about the specific plant they are looking for. The Herbery now has an online plant selection that has a variety of plants, catering to all, from beginner plant enthusiast to an expert botanist.
Users want an effortless way to purchase plants online
They want a clean and clear UI
They want information and stats on the plant they are considering purchasing
I wanted to encapsulate the fresh, cleansing feeling that plants can bring into our lives. The color palette emphasizes clean living and balance through fresh colors. The clean typography embodies The Herbery’s approachable and refreshing brand personality.
Using apparent iconography for the filtering system was high priority. I wanted to make the site as simple and tidy as possible. Knowing that the filter was going to be a key asset in this site, I wanted to make sure I made it intuitive yet nice to look at.
One of the main insights I gathered from the interviewing process was that users want to have an intuitive and effective filtering system while shopping for plants online.
I wanted to make sure I included the most important filtering options without making the process too overwhelming. I came to the conclusion that users where mostly interested in filtering the plants down to three things.
The amount of light a plant requires
The difficulty level
The size of the plant
For the mobile filter I made it a point to use iconography that users could easily understand.
The filter for the desktop display is simple and easy to function. With clear and specIfic filtering options.
Another observation I gathered from my interviewing process was to create intuitive site architecture and navigation to enable easy browsing. I used recognizable iconography to represent the filters that the specific product falls under.
I wanted to make sure to break down the price that the user would be paying before getting to the actual check out page.
By including breadcrumbs on the page the user will know exactly how many steps they have left until the process is complete.
One of the most important pieces of information I came across was users want to know about the plant they are about to purchase. This was especially important to the beginner users.
I decided to include this information before they added the plant to their cart, this way the user can be sure this is the plant they are looking for before committing to purchasing it.
For the mobile version I decided to add a button that would take users to the “Plant Facts” page if they choose to visit it.
This information will let users know how often the plant needs to be watered, how much sunlight it should receive and what type of soil and air temperature it will be happiest in.
I decided to include other information like the botanical name for the more experienced users.
On to Phase Two
I had so much fun creating this website concept for The Herbery. I am a big fan of plants, so looking at beautiful pictures of them all day was a really fun experience. When I come back around to this project there are a few improvements I would make.
Include “The Herbery” in the header of each page.
Create a bigger “shop” button
Make product page images the same size
Make the filter permanently expanded
Create more breathing room between product picture and description