Fragrance Plants
Website Redesign

Since 2016, Fragrance Plants has been the local gem of boutique plant stores, favored by chic Manhattanites and plant lovers throughout the island.

Since COVID however, the steady flow of foot traffic has come to a crashing halt, and Fragrance Plants needed help redesigning their website to grow their online customer base. I redesigned the Fragrance Plants website, both structurally and aesthetically, to help users stop & smell the plants online.

Role
This was an individual project where I was responsible for all aspects of the design. I conducted generative research, ideated concepts, designed & prototyped, and continuously iterated based on user feedback.
Methods Used

Heuristics, Competitive Research, Secondary Research, User Interviews, Affinity Map, Card Sorting, User Persona, User Flow, Problem Statement, Sketching, Usability Testing

Tools
Sketchbook App, Figma, Google Surveys, Optimal Workshop, Zoom
Timeline
2-Week Sprint (Mar 2021)

Challenge 🌸

Fragrance Plants needed help making their online shopping experience just as enticing and sensory as the in-person one. Their current website was difficult to navigate, lacked sufficient product details, and had a confusing checkout process. I was tasked with re-designing the Fragrance Plants website to create an online experience that would make users stop and smell the plants.

These are concept designs for our student project during a User Experience Design Fully Immersive program at General Assembly.

Outcome 🌿

To grow Fragrance Plants’s online business, I redesigned a website that now reflects the core interests, goals, and needs of the user. I worked diligently to give users an online experience just as delightful and captivating as the in-person one, make it easy for them to visually explore different plants, and awaken the plant parent in all users.

Here’s what they said:

Loved how clean yet visually stunning it is. It’s making me want to shop.”

“I would definitely shop here. It’s clean, easy to navigate, and beautiful.”

The Solution

A fresh design rooted in research 🪴

I was tasked with providing a solution that allows users visually explore trendy plants and products so that they can decorate their home with beautiful and well curated items. So, I designed a fresh new website that lets the user easily navigate between the range of products available, view trendy and popular products, and quickly understand what they need to do to care for their plant babies.

Here’s what the website redesign included:

View Prototype

Primary Navigation

Primary navigation using images and plants grouped by size

I learned early on from users that they don’t remember plant names and want to look at photos instead. With this information, I created a navigation that allows the user to choose between plants by size, and included images to help guide the user to choose between the different plant categories. Based on testing, users are now able to easily navigate to specific products and explore the range of products available.

Product Pages

Product pages that allow the user to filter their search by care difficulty, plant benefits, etc. and easily see care requirements from the product thumbnail

Based on my initial evaluation of Fragrance Plants’s existing website, there was no way for users to sort or filter through products. To address this, I added a “filter by and sort by” that allows the user to filter their search not only by price and size, but also care difficulty, plant benefits, growth rate, etc. I also included basic care requirement information on each product thumbnail so that users can easily understand what it takes to care for their plant babies, without having to dig around for this information.

Product Detail Page

Product detail page that allows the user to quickly understand details & care,
plant benefits, a plant care guide, and a plant bio.

Fragrance Plants’s existing website also did not provide any information on each plant, which I learned through user interviews was a big pain point that stopped them from purchasing. So, I included a details and care section front and center that allows users to quickly access the information they need to make a purchase decision. If they’re still not sure, they can also access a plant care guide as well as a plant bio directly underneath.

Checkout Process

Checkout process with side-by-side checkout and order summary approach so the user can review to their items at all times during the checkout flow

The big ticket item on the redesign was addressing the existing website’s confusing checkout process, which was directly hurting the Fragrance Plants business. I designed, tested, and iterated on the checkout flow for 3 rounds to get it just right - and ultimately landed on a side-by-side checkout and order summary approach. Users appreciated being able to review their items as they enter in their information, and easily edit their details at any point during the process.

Rooted in research and empathy, I was able to redesign the Fragrance Plants website to make users want to stop and smell the plants online - but how exactly did I get there?

Read more about my research process 👇

The Current Platform

Getting the dirt on the current website 🍂

From the get-go, I knew that the current website needed some TLC. The million dollar question was, how much of the website needed to be improved?

I did some digging around on the current website to determine what the key areas of improvement should be. Here’s the dirt:

Key Takeaways

From this analysis, it became clear that my primary areas of focus should be improving the:

01
Primary Navigation
02
Product Detail Page
03
Checkout Flow
Target User & Independent Research

Meet the plant parents 🤝

People always say “know your audience”, which also applies to designing websites. I needed to understand who the Fragrance Plants user is so that I could provide them with a solution that meets their needs. Through the target user was part of the challenge provided in the product, I conducted independent research to gain a more in-depth understanding of the user.

Here’s what I learned:

Task / Goal Setting & Management
User Interviews & Card Sorting

Planting the navigation seeds 🐣

Since the primary navigation on the website was nonexistent, figuring out a navigation structure that would be intuitive for users was the first order of business.

I tested 4 target users and presented them with 20 plants. I asked them to organize the plants into groups and name those groups. My goal was to understand how users expect to see products categorized in the primary navigation, and what information they needed to differentiate plants. Here’s what I learned:

01
None of the users knew the plants by name
02
All of the users grouped the plants by size
03
All of the users needed visual cues to recognize the plants

From this exercise, I was able to extract that I needed to:

Design Concepts & Paper Sketches

Show me the plants 🪴

What I previously learned about the target user and the market revealed some pretty big insights into how my design concepts could satisfy their needs while addressing the major issues from the existing website. I created a paper prototype with these concepts in mind:

Key Takeaways

01
Allow the user to explore
02
Show them trendy and popular products
03
Let the user find plants that they can care for
User Feedback & Improvements

Designs taking root 🌴

I went through 3 rounds of testing and iterations, each with 4 users. With each iteration, I uncovered key insights on which areas caused uncertainty, confusion, and frustration. Some of the feedback was expected, some of it was surprising - but all in all, it helped me provide a stronger solution that would meet their needs.

Here are the major areas of feedback I received from users:

The checkout is overwhelming

This navigation needs work

I don't have enough information

Next Steps & Reflection

Everything's coming up roses🌹

Next Steps

If I had more time to work on the designs, I’d love to:

01
Design flows for additional products
02
Source a larger variety of product image assets
03
Create a logo

Reflection

This project was one of great significance and meaning for me. It was the first comprehensive project that I was solely responsible for the success or failure of. This project challenged me in ways that strengthened my research, grew my empathy, and refined my design skills. Here are the hard lessons I learned that I’m grateful for:

Research methods are not a checklist

In the beginning of this project, I had lofty expectations that I would quickly uncover a goldmine of profound insights that would immediately shape my designs. I learned that research can often be iterative, and it’s not a one-and-done process. It’s a feedback loop that allows you to collect little golden nuggets one at a time. If you have the patience to listen and wait, you’ll eventually reach that goldmine.

Outgrowing still means growing

Looking back on my designs for this case study, there are a million things that I would change. There are a million things that I already did change. i learned that instead of obsessing over these details and feeling ashamed for not incorporating these changes sooner, I can feel a sense of pride in knowing that outgrowing means evolving.

Next Up

Five to Nine

Combining customization and deeper insights in an events analytics dashboard

Warby Parker

Unifying accuracy and convenience in an online vision test mobile app