This case study is to redesign Arbonne's website using modern techniques keeping a mobile first approach as well as code the front end of the website. The goal was to keep in line Arbonne's branding and have a focus on natural looks and ingredients.
Role: Art Direction, Graphic Design, Web Design, UX Design
Arbonne skincare is a company that’s based on botanical principles with a global sustainability commitment. Their main commitments are that they are vegan friendly, carbon neutral, zero waste and sustainable procurement of ingredients for their products. Based on these principles they have been successfully operating in the US since 1980 and have been a pioneer in the green arena.
Redesign the website using modern techniques keeping a mobile first approach as well as code the front end of the website. The goal was to keep in line Arbonne's branding and have a focus on natural looks and ingredients.
I started the process by looking at other brands that sell similar products like Sephora, Glossier, Victoria’s Secret Beauty, The Body Shop, and Bath and Bodywork. Some of the trends that I noticed were the way they displayed their products. Most seem to focus pairing the product images with the ingredients in them side by side as part of one composition. This not only is an effective way to show off your products, but also it gives the consumer a perception that the product is more natural when placed beside the ingredients that are in it. I also found that most sites have a couple of rows of products that highlight either new products or best sellers. This gives customers a starting point when shopping and lets them know which products other people are buying.
While looking at what other brands are doing in the skincare and body market, I noticed a familiar trend. Most sites tend to utilize the health aspects of the industry and focus on the benefits of their products. Arbonne should be know different given their long standing operations in the US and being a leader in this field. For the site, I wanted it to have a minimal and clean design as it reflects not only how they package their products but also in line with their brand. Another thing that I noticed is that a lot of their promotional banners are very season-focused. This seems to be a good tactic to use as it lets people know that the brand is “evolving” with the times and it’s staying relevant with the trends going on. Lastly, I’ve noticed that with a lot of these companies, all of their images promote a healthy natural lifestyle. This is a major selling point for Arbonne and is something that must be utilized properly without appearing to be too gimmicky.
For the homepage, I wanted the main focus to be on the hero banner. By having a strong product image that looks all natural puts the consumer at ease knowing that these products aren’t chemically harmful and they may have health benefits. By tapping into this market, Arbonne can effectively go after the all-natural market while being in the makeup and skincare market as well. Along with the hero banner, I wanted to include a row of products that are best sellers. With these products, I wanted to not only let consumers know which products are selling the best but also give them a start into where to shop and push them into the right direction for them. I also wanted to include sections that are more sales driven by promoting new and trendy collections that consumers may be interested in. Another key section was the benefits of being an Arbonne customer which includes loyalty points, free shipping, and savings. Lastly I wanted to include a vegan banner to directly target that market with all of the vegan friendly products.
For the collection page, the main focus was the filter menu. The reason being is with such a wide variety of products with a range of benefits, it’s important for consumers to be able to narrow down the initial results of a broad collection to get to what they’re looking for as quickly as possible. Asides from the filter menu, having consistent product images are important for the overall look of the site. Since Arbonne has a preferred client program, I wanted to show the regular price of the item along with the preferred client price to show consumers how much they can potentially save if they sign up, incentivizing the consumer to register. Lastly, I wanted to add a quick add to cart button to allow consumer to stay on the page while adding the product they were interested in to their cart, without having to leave the page.
For this page there are several key aspects that needed more focus then other - The product description, the ingredients, and the benefits. For body and skincare products, I found while searching competitor’s sites, that those key aspects are what consumers look for the most and what influence them to buy certain products. For the top part of the site, I wanted to include the product image on the left, as that is the common practice and the product information on the right. For the product information, I wanted to keep a certain order - Title, Description, Price, and the Add To Cart button. I chose that specific order because those are what consumers think are the most important parts of the page and they should all appear above the page fold if possible. I wanted the Add To Cart button to be a different colour than other elements of the page to make it stand out. For the product ingredients, benefits and reviews, I put them after the main product information because although those elements are important, for the average consumer if they wanted to see that information, scrolling down to see a more descriptive breakdown of the product wouldn’t be a detractor as those elements aren’t hidden behind drop down menus but clearly visible to those who are looking for it.
Overall, this project was a success. By keeping in line of what Arbonne’s mission statement for green, healthy, vegan-friendly process and translating it into their website keeps their brand identity consistent throughout multiple platforms. By having a landing page that is clean, minimal with a strong emphasis on product images with natural ingredients, rows of products to help customers get a start for what they;re looking for, and by using vibrant colours and images to maintain the healthy look that Arbonne wanted to go for. For the back end system, it was also a success because the design principles that were used on the front-end successfully translated to the back-end keeping everything consistent, clean, and intuitive so that Arbonne doesn’t need to relearn how to use a complex system, and just focus on selling products.
