Case Study | elanveda.com redesign

Visit redesigned site: http://elanveda.com

Background:

ELANVEDA had a great product line of essential oils and herbal supplements with major distribution deals in place, but their website had a sup-par design. They did not want to embark on a big branding exercise, but needed the site redesigned. I saw some existing visual elements that I could leverage. I also saw that the site was built on WordPress, and so I knew I could do both the design and development myself.

Scope of work:

Using the existing site content and visual brand, revamp the website to better surface the product line, make the user path to purchase more intuitive, fix some backend deficiencies, upgrade the visual user experience and tweak the messaging.

Original Site Audit

case study - original home page

click to enlarge

Visual Experience:

Although the site was built on WordPress, it was not utilizing the plethora of features that WordPress makes easy such as 100% width with mobile responsiveness, slider animations, or parallax backgrounds. The imagery felt very “stock” to me, and in general the site looked amateurish.

Messaging and UX:

The messaging had some good information throughout, but overall it did not clearly state what the product line was, or communicate the superiority of their product in an efficient way.

Redesign Process

Client Input:

I was asked to visually emphasize that the company has California roots and that the products are free of synthetics, preservatives and made with all natural organic materials. They provided images of models with the products that they had just captured. I felt the photoshoot was really well done. It was held in California and not only provided an obvious connection to that geography, but it also personified an attitude and style that helped define their brand.

Case Study - Home page redesign

click to enlarge

Lead Messaging:

Their original site led with the message: “The Finest Healthcare Products Available.” I felt this was not a strong lead statement as it did not communicate what kind of products they provided. That said, there was something about it I liked because I knew from my conversations with Dan Palmer, who started the company, that he truly believed they had created products that were “the finest available.” I wanted to keep the sentiment in the mix somewhere because I felt it reflected the company mission.

I decided to lead with this: “Organic All Natural Herbs & Essential Oils” Boom! This says immediately what they are offering. I followed it with the second level message: “Designed to augment the body’s natural defense against headaches, allergies, sore muscles and skin conditions.” I felt this clearly defined the value proposition of their product line.

Case Study - Home page below the fold

click to enlarge

I decided to place “The Finest Healthcare Products Available.” underneath the slider, but I followed it with “For Balance, Vitality & Good Health” to make it more descriptive and less vague. Placing this below the slider and lead messaging gave it the right placement in the messaging framework.

Lead Visuals:

For the background of the slider, I used a looping stock video of a wood with light gently dancing across it. I like the subtleness of the movement and it fit the brand look and feel they were after. I edited the video so that the color balance would better match the color scheme. I chose three of the images from their photo shoot to make up the three slides, and chose an elegant, thin san-serif font as the primary type-face (which matched the typeface in their logo as well.)

Information Design – Flow of Page:

The slider experience was all “above the fold” to ensure that users immediately understood who ELANVEDA was and what they are offering. Scrolling down the page from there, I introduced the 2 product lines in their own page sections, each with its own lead image, description, and then the products themselves.

I decided to utilize a leaf graphic that was in their old logo. Even though they had removed it from their logo, I felt it could be used as a graphic element to enhance the visual brand. I created a double parallax background behind the two product line segments with reversed color treatments. As the user scrolls down the page, the leaf graphic accompanies section titles, and is also seen as a subtle background that adds elegance and movement to the site experience. I also utilized the color green that they use in their product packaging, implementing it as the header band and styling the “add to cart” buttons to match.

I followed this with a testimonial section, another parallax of organic ingredients, and finally with a “About Us” introduction that introduces Dan and the origin of ELANVEDA.

Case Study - Secondary page redesign

click to enlarge

Secondary pages:

I created new pages for each of the two product lines and updated the imagery and design for all of them. I also redesigned the footer and header to make them look more professional and again, as an opportunity to define the visual brand.

Backend:

WordPress is a great CMS and allows the utilization of third party plug-ins. It has some built-in vulnerabilities, however. Malicious players take advantage of the typical WP installation which includes a specific URL structure for the log-in UI, the use of “Admin” for the default user name, and a specific backend file structure. These default configurations are well known and give malicious players an advantage. I utilize security plug-ins which protect against brute force attacks, automatically blacklist IPs that try to access the known vulnerabilities and creates daily site backups of both the database and site content. I did an audit of the elenveda site to ensure these were implemented correctly. As it turned out, they had partnered with an infrastructure vender who did a good job with security.

I also implemented SEO optimization and included “alt descriptions” with the images to improve search engine results.

oanmi case study - website design

onami case study - motion-graphics video

presentation design