Fresh

Alima Pure is a Portland Oregon based mineral cosmetics brand with a world-wide following. Recently, we completed a super project with them. It was great for a couple reasons; not only is Alima Pure a marvelous brand to work with from a design perspective (which is always nice!), but we were able to get creative with testing.

The primary objectives for the project were to update the current website with a fresh color palette, refine the typography (using our new AutoTTF WordPress plugin!) and most importantly, re-design the home page to feature more shopping avenues for the user. Projects like these are challenging though, because the homepage was already successful for a number of reasons; it didn’t require a lot of change.

Original Home Page Design

The first thing that we knew we wanted to create was a large photography-based area (similar to what was there already) but that featured current products and promotions with clear calls to action. Second, bringing in flexible product areas to feature what is most popular, new or interesting.

Alima’s brand yellow comes across beautifully on the packaging, but using it for the navigation bar on the right side was a little too harsh on the eye.  We wanted to make the navigation feel a little more soft and feminine, so we used a cream instead. We also decided on a color from Alima Pure’s brand guidelines to use as button and link colors globally (the teal).

Since Alima Pure is an e-commerce site, we were most concerned with the path users take to learn about and purchase product, which is the reason we changed the placement and size of the product areas. If you were testing a different type of site, it would be important to identify your key goals and change factors that affect those goals. For example, if your primary goal is for users to submit a contact form, you might want to test where the links to that form appear and what they look like.

Both layouts we created included the same content:

• large promotional photo area (javascript slideshow of three messages)
• link to the blog
• welcome message
• smaller flexible product areas

The first layout we created had a lot of focus on the main promotional area. It takes up most of the upper half of the page. It really creates a nice impact because of the great photography. Alima has beautiful packaging! It includes an area for a headline, product description and call to action. Below it are the four flexible areas to promote specific products. The two right most buckets are purely type-based for variety. The lower is used as a blog promotion.

First Layout

The second layout has less focus on the main promotional area. It is a lot narrower. We brought the product buckets on the right side of the page which gives them more prominence. Also, the blog area (under the main photo area in this version) is web text, and includes a snippet from the latest post.

Second Layout

We preformed A/B testing on the two layouts, and after about three weeks, it was clear that the second layout was really out-doing the first! It is amazing how something as simple as moving those product buckets really had an effect. After the testing process was over, we implemented the second layout as the new homepage.  Stay tuned for more information about our process with the testing. We’re excited to perform more tests like this in the future for Alima Pure, and I hope this gets you thinking about ways to get creative with your own projects. Go check alimapure.com, too because they have amazing products!