Role
UI/UX Designer

Team
2 UI/UX Designers
2 User Researchers
1 Interaction designer

Timeline
3 months

Tools
Figma, Figjam, Otter.ai, Slack, Zoom, Trello

Overview
Aquanure is a retailer that sells premium organic plant growers. Their original website was initially created for the purpose of educating customers about Aquanure products and eventually they started selling products online but weren’t seeing the success they had in stores.

The goal of the project was to increase visitor retention rates and decrease bounce rates by redesigning their website. I played a pivotal role in establishing business objectives with the stakeholder, proposing design strategies, and the overall redesign of the website.

The problem

Fish manure is an unconventional way to help grow your plants organically. Despite this, Aquanure is sold in stores across Ontario and has found success as a premium organic and environmentally friendly plant grower. Where they struggled was with their online presence and sales.

When approached by one of the stakeholders and owners of Aquanure, he explained how the website was initially created to educate customers on how Aquanure products worked and eventually tried to start selling online. He expressed a need for a redesign that aligns with Aquanure’s identity and increase user retention rates and conversions.

The Solution

An e-commerce platform that is easy to navigate and use, making the shopping and learning experience delightful and easy.

Results

-12.7%

︎︎︎ bounce rate

+1 min 12s

︎︎︎ average session duration

The redesign was also met with positive feedback from customers when launched before trade show.

*Statistics as of March 25, 2024

My Process

Research

What issues does the current site have?

Out with the old

Before starting to think of new ideas for the redesign, I needed to discover the issues with the current site. Both a heuristic analysis and user tests were conducted to get a thorough understanding of the original state of the website. 5 user tests were conducted with gardeners and plant enthusiasts.

The following are the major issues found:

Extremely low contrast

Cluttered and busy layout that made it difficult & confusing to navigate

Inconsistent use of design elements

UX/UI Audit

Through the analysis, I found that the website had lots of room for improvement. The website lacked basic design principles and suffered greatly from this, with users saying that the website often felt cluttered and confusing.

During user tests, most users would often not know where to go and ultimately could not successfully go through the checkout.

"I can't read any of the information on the checkout page at all." - Leila

User interviews

How do plant lovers shop?

The next step to understanding how I can create a curated experience for plant lovers is to understand them.

5 user interviews were conducted with the same users that participated during user testing (including my local plant expert, my Mom) to understand their plant shopping habits, how they take care of their plants, and how they get their plant info.

Main insights

Using affinity mapping, these key insights were found from the interviews…

Gardeners educate themselves online, typically through social media or forums
Gardeners usually prefer organic/natural products and don’t like herbicides
Plants are typically cared for everyday and/or weekly
Products that are used often are used because of their convenience and results

User Persona

Meet Christa

Using these insights from the interviews, a persona named Christa was created. By empathizing with Christa I’m able to get in the users shoes and consider her needs, wants, pain points, and goals.

Considering Christa’s need to find an effective and environmentally friendly option for her plants…

🤔

How might we improve Aquanure’s user experience and interface to improve user engagement and give customers, like Christa, a smooth shopping and learning experience?

Competitors

Industry rivals fall short of implementing fundamental design principles, resulting in cumbersome interfaces and poor user experiences.

Opportunity

Through a comprehensive competitor analysis, it was clear there was an opportunity to deliver on an online shopping experience that was convenient and easy.

Scope

The total scope of the project includes designing the following responsive pages for desktop and mobile;

Home page
Store locator page
FAQ page
Contact page
Education page
Shop now page

View cart page
Checkout page
Thank you page

Constraints

Along with a defined scope came some constraints we had to consider.

Working around Wix Studio’s integrated e-commerce functionality which was unchangeable in terms of the flow

Lack of resources for photography and developers

Business Objectives

I led a meeting with the stakeholder to define some objectives we wanted to aim for in terms of metrics to measure the success of the redesign. Since the main purpose of the redesign is to help increase customer retention to help increase online sales we landed on these two objectives…

︎ Decreasing bounce rate by 10-20%
Business Objective
From original bounce rate of 64.3%.

︎ Increasing retention time by 20-30%

Business Objective
From the original retention time of 6 minutes per session.

Design Principles

From this point, I proposed to our team to establish design principles to guide our design decisions, keeping consistency in quality and how we design the website. We landed on these three core principles.

︎ Ease of use

Make things easy for the user.

︎ Provide Guidance

Assist the user whenever we can.

︎ Create a quality experience

Interacting with the website should feel smooth.

Ideation

Optimizing the shopping experience.

Task flows

Knowing I couldn’t change the flow of the checkout process because of Wix’s integrated checkout process, I wanted to give Christa a way to shop quicker and easier.

I began generating ideas starting with how I can optimize the shopping experience, starting from task flows.

The main idea was to use Wix’s ‘ buy now ’ and ‘view product’ buttons where products are displayed so that customers can easily get to the checkout process.

Compared to the six step process to get to the checkout - Christa could either directly view then add an item to her cart, or if she knows she wants to buy a single product, she can be brought directly to the checkout process using the ‘buy now’ button.

Additionally, information about the products were scattered across the website and often linked back to each other.

I wanted to create a page that consolidates all the information on the products and how to use them on one page, so users can easily learn what the products are, how they are made, and how to use them.

Sitemap

Creating a more efficient menu.

Using card sorting, the site map was redesigned to simplify the navigation, remove dead links/links that linked back to each other, and chunk relevant information together such as the information about the products.

By cleaning up the site map, Christa wouldn’t have to spend a lot of time wondering where certain information was or search through pages to find out how to use a product.

For the case of how to use the products, Christa can easily find all the information she needs on the “How it Works” page.

Sketches

Exploring Ideas on paper

Sketching let me explore more ideas based off of the task flow I designed as well as where I would place information and give Christa easier access to common actions.

I can address Christa’s need for a convenient and easy shopping experience by including more shop now CTA’s available as the first thing she see’s when she lands on the homepage.

By including testimonials and information about Aquanure products through the ‘How it Works’ page, I can also address Christa’s pain point of not having enough information on products to make a confident purchase.

Additionally, she can reach out to Aquanure through a contact form for more specific inquiries that may not be answered through the ‘How it Works’ and ‘FAQ’ pages.

^{Mobile sketches}

^{Desktop & Mobile lo-fi wireframes}

User Testing Changes

Low & Mid Fidelity Changes

User tests were conducted with 8 plant enthusiasts and gardeners for the lo-fi and mid-fi wireframes which resulted in these core changes.

Clearer verbiage

The copy didn’t seem to communicate clearly what Aquanure products were made of or what they were used for. The copy was iterated to clearly communicate what all about the products without the use of excessive jargon.

Hero section copy changes

Before

Aquanure, a distinct organic growth elixir crafted by aquaponics farmers, harnesses the power of nature. Thriving on key elements derived from fish effluent, it creates exclusive blends of fulvic and humic acids, Dry Fine Ash, and Inoculated Bio-Char, providing an authentic solution for growers.

After

Aquanure, a unique organic boost created by aquaponics farmers. Crafted from fish manure, it combines essential nutritional acids with BioChar, offering a fantastic solution for all types of growers!

Excessive use of jargon and scientific terms.

Simplified terms, with specific ingredients moved to the product description.
Targeting wider demographic of gardeners and plant growers.

Easier way to find how to use the products

Users struggled to find information on how to use the products so the ‘Best Applications’ section that lead to pages on how to use each product was moved to the top of the ‘How it Works’ page.

The subtitle was also renamed from ‘Best Applications’ to ‘How to use our products’ to be more clear.

Technical issues

Around this time is when I was tinkering with Wix Studio more, and learned that there wasn’t a ‘buy now’ button that would lead directly to the customers checkout.

I had been under the impression there was because of a Youtube tutorial that ended up being a complicated work around which messed with the checkout process.

Work around to give a faster way to shop

Instead, I iterated the flow to include an ‘add to cart’ button to directly bring customers into the checkout flow from the home page. This was ideal for returning customers who want a quick experience to order their usual products.

Additionally, I used Wix’s ‘quickview’ feature, so users can view information for a product and add it to their cart without having to leave the page.

Visual design

Modernizing Aquanure

I led a meeting with the stakeholder to discuss the visual design of the website and how it fits within Aquanure’s branding. I proposed three moodboards and we agreed on a modern and clean look that also felt local and warm.

Colour

We use a primary green here, reflecting a muted version of Aquanure’s green, which gives the feeling of being environmentally friendly, local, and warm.

Using the primary green was reserved to accent important sections and CTA’s, giving the website room to breath in whitespace which results in it feeling very open and welcoming.

This lets the imagery and products feel more important and impactful.

Typography

‘Outfit’ is Aquanure’s main typeface, used for heading and sub-headings. ‘Poppins’ is used for body copy which compliments the geometric shapes of Outfit, but is more suited for longer body copy.

Both typefaces are geometric and very soft/round, lending itself to that modern but local feeling.

Imagery

The imagery reflects a very warm feeling, using images of vibrant plants and setting the products in vibrant spaces.

*Product images were bashed with generated imagery due to a short deadline and lack of resources, they are intended to be stand-ins until the stakeholders can get more suitable product shots.

Final design

Raise your plants to eat well.

View the live website here.

What I learned

Meeting the user and stakeholder needs.

I learned a lot about how to lead meetings with the stakeholder and managing expectations.

I used this project as a great opportunity to ensure the stakeholder was always on the same page and addressing any concerns he had.

Working with website builders.

Using Wix Studio’s integrated e-commerce system taught me how to come up with solutions that could be used with limited technologies.

The final product will never look exactly like the prototype, but I’m glad our team came together and made the website live.

What I’d do better next time

Familiarize myself with the platform I’ll be implementing the design on before I design.

Several roadblocks came up with using Wix Studio, feeling like I was limited in what I can design or what features we could implement but couldn’t.

Doing research to familiarize myself with what was possible and what would be difficult or cost more money would help me come up with solutions earlier in the process.

Next Project

View Case Study