917-636-8479

©2018 by Paige Nuzzolillo, Wix.com

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
Process 
  • Discovery Session
  • Competitive Research 
  • Content analysis
  • Site Mapping
  • Wireframing
  • Site Building/updating, logo update

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

Before Redesign

Competitive Research 

Before developing a site map to determine the best way to structure the navigation, I reviewed beauty product sites such as LUSHTIGIMaui BabeColumbia City BouquetDeva CurlLiberty LotionIt’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
Evolution through feedback

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 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. 

Logo Update and the Issue of Farm-Grown Flowers

​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.