ARBORDOUN'S ABUNDANTLY HERBAL
Information Architecture, Content Strategy, UX/Visual Design
Project Overview
I was approached by Arbordoun's Abundantly Herbal Skin Care Products to redesign their website, built on WordPress.
​
Tools
-
Sketch
-
WordPress
-
WordPress plugins: WooCommerce, MaxButtons
-
GlooMaps
-
Pencil and paper
-
Custom CSS
Main Changes
-
Purchasing, PDP updates
-
Information Architecture & navigation update
-
Gallery addition
-
Color scheme update
-
Logo alteration
-
Content reorganization & creation, copy simplification
-
New page buildout
DISCOVERY SESSION
My first step was leading a Discovery Session with the owner of Arbordoun's to discuss current issues with the site, the most important aspects of the site and company, and overall feelings that should be portrayed while experiencing the site.
​
We talked about the issues we'd tackle:
​
-
No clear way for customers to buy products from main navigation (no cart icon)
-
Florals were also part of the business, but with a different purchasing flow, they were not adequately represented as a possible product for purchase on the site.
-
No gallery of photos despite client desire for more striking imagery on site
-
Repetitive content (Reviews, blank FAQ page, site map) taking up space in the main nav
-
Logo considerations
-
No color scheme on the site in congruence with photos
​
Arbordoun's Homepage, Before and After Redesign
Competitive Research
Before developing a site map to determine the best way to structure the navigation, I reviewed beauty product sites such as LUSH, TIGI, Maui Babe, Columbia City Bouquet, Deva Curl, Liberty Lotion, It’s a 10 and Moon Valley Organics. This allowed me to get a sense of common navigation, design and structure of beauty product sites.
​
FAQ and Contact Us Pages
​
I saw again and again on these sites FAQ and Contact Us pages in the main navigation. Despite my initial thinking to include contact information only in the footer, I determined through these sites that it was best to also include a Contact Us page in the main navigation.
An FAQ page would also deflect common questions, and also feature others that were not answered on the website yet (such as return policy).
Shop in Navigation
I also noticed Shop was always consistently displayed in the main navigation – the end goal of purchasing products from the site was always in mind.
Content Analysis + Information Architecture
Information was currently scattered on the site, and not organized based on similar content. Testimonials existed in a PDF format offline. Most importantly, the floral arrangement aspect of the business needed to be better represented. Precious real estate was being taken up in the main navigation by items that should be categorized as secondary items.
I created the first viable sitemap after a content analysis. These were some of the outcomes:
​
-
Homepage would mention all possible products, with links to purchase
-
"Our Story" would link to existing product reviews, again bringing users closer to the product detail pages
-
The individual product detail pages would house information on herbal ingredients and link to individual pages in the FAQ, instead of taking up the main nav
-
The Floral Arrangement product detail page would not have an option to ATC, but rather a Contact Form and phone number to make a specialized order directly with Arbordoun's.
Rough Wireframing + Site Map Iterations
My wireframes helped my visualization of this evolving information architecture, main navigation and how the homepage experience specifically would contribute to a user's understanding of Arbordoun's offerings.
During the first feedback session with my client, I presented the wireframes, sitemap and general thinking about how content would be rearranged on the site.
​
We discussed the proper wording for the floral arrangement aspect of the business to be place in the main nav, since we wanted to make sure it captured the types of floral offerings available (floral CSA and arrangements such as bouquets but not limited to).
​
We settled on "Farm-Grown Flowers," and would further break out the offerings in the product detail page. Below is the current state of the navigation on the site, considered final.
​
​
​
Site Building + Updates
In order to understand the limitations of the particular WordPress theme that had already been customized for Arbordoun’s, I needed to delve deep into the site. I was not going to edit the PHP files (I’m not a developer), but would write some custom CSS for changing minor styling issues on the site.
​
I proceeded with a few major changes to the site, after a discussion with my client on my ideas and wireframes. My work involved a combination of downloading new plugins, changing configurations directly on WordPress.com/WooCommerce/MaxButtons and writing custom CSS.
​
Main Updates Accomplished
​
-
Updated logo
-
Created FAQ page
-
Created new menu with clearer navigation
-
Updated Who We Are page
-
​Removed background canvas image on site for a cleaner look
-
Added Farm-Grown Flowers to Product offerings
-
Added Gallery with Instagram integration
-
Added Contact Us page to top-level navigation, and linked Farm-Grown Flowers to the page
-
Updated and simplified footer navigation, removed busy plugins displaying in footer
-
Added MaxButtons plugin to convert CTA hyperlinks to attractive, stylized buttons
-
Added new photos to the site in place of pixelated images
-
Persistent cart on navigation (even when no items in cart)
-
Integration of Herbal Ingredients page into FAQ, removal from top-level nav
-
Overall simplified copy and editing
-
Created consistent branding with the following colors:
​
Logo Update and the Issue of Farm-Grown Flowers
​
​
Logo before alteration in Sketch
​
​
​This logo does not signal to a user that fresh, local floral arrangements are also a major part of the Arbordoun business.
​
"Fresh Flowers" existed previously as a top-level nav item, but the logo was too specific with "Skin Care Products" for this to be clear to a user.
​
If Arbordoun's offers floral arrangements and a floral CSA, in addition to skin care products, shouldn't the logo be more inclusive?
​
Additionally, the packaging for all skin care products did not contain "Skin Care" messaging.
​
​
Logo after alteration
​
​
​This version of the logo matches the product packaging more closely. It also allowed us to safely add a product detail page for "Farm-Grown Flowers" to the Shop Products main nav item, without it being out-of-place for users. The logo was now broad enough to represent all aspects of Arbordoun's.
​
I also updated the yellow border to a darker shade to be more readable and able to be used across the site.
​
​
​
​
​
​
​
​Product Purchasing Improvements
​
I combined all products offered by Arbordoun’s into one top-level navigation item, titled “Products.”
As secondary navigation, sub pages under products became “Farm-Grown Flowers, Silky Day Lotion, and Abundantly Herbal Calendula Cream.”
Each product detail page then allowed customers to review the product information, herbal ingredients and also buy directly online.
The main exception is with “Farm-Grown Flowers,” which I converted into a virtual product, not able to be added to cart directly online. Arbordoun’s must be contacted via phone or email to consult for custom price and flower availability information for the floral arrangements, unlike the lotions. I had to make sure this was clear in the copy, and provided a CTA to take a user directly to the Contact Us page.
​
Below are snapshots of the final Farm-Grown Flowers PDP.
​
​
Key Redesign Examples
​
FAQ Page Buildout
After the competitive analysis and review of other ​beauty product sites, I decided to include an FAQ and build content for it. Previously, a sitemap existed in the FAQ top-level nav item.
​
My client had expressed that the 100% natural, organic, local nature of the herbal ingredients needed to be portrayed on the site.
​
Instead of including Herbal Ingredients as a top-level nav item (a lengthy, text-heavy doc), it made sense to link separate pages based on product here in the FAQ.
Instagram Gallery
​
​
We needed a gallery of images on the site.
​
Arbordoun's already had a very active Instagram account, so it made sense for us to integrate it on the website with a plugin.
​
Now, any image that is added to Instagram will be easily added to the website. This makes populating and curating the gallery on the website nearly effortless.
​
After some feedback and light usability testing, I moved the Gallery into the main top-level nav.
I decided it made more sense rather than having it under Our Story as a sub page, which could possibly cause users to overlook it.
Persistent Cart
​
​
My client wanted the cart to be visible on the site at all times.
I checked behavior and the cart appeared only if a user added an item to it. After some investigation and reading documentation for WooCommerce, I updated the settings to show the cart at all times, whether there are items in it or not.
This makes it clear that a user can purchase products directly from the site.
Future Work
​
This project is a work-in-progress and awaiting feedback from the first iteration of redesign. Some work remains, namely:
-
Integrating enthusiastic testimonials in a banner plugin
-
Work with Arbordoun’s developer to update the PHP/WooCommerce file for the product landing page. There are some styling and alignment issues that need to be fixed, especially on mobile views.
Photos courtesy of Arbordoun's Abundantly Herbal
©2022 by Paige Nuzzolillo, Wix.com