e.l.f. Cosmetics Blog Monetization

Purchase products hassle free from that fabulous blog article you just read.

My Role

I initiated and prepared a user flow map and mocks for my proposal to monetize the company blog and further enhance the user's experience when purchasing products mentioned in blog articles. I also helped analyze user test results.

Date

2017

Tools

pencil-icon.png
sketch-logo.png
wordpress-logo.png
google-anaytics-logo.png
 
elf-cosmetics-block.png

Identifying Problems and Goals

Each blog article for e.l.f. Cosmetics includes products relevant to highly searched keywords. Formatting content around popular keywords attracts searching users to the blog where they can learn more about e.l.f. products and how to use them. In order to win sales from the blog, articles contain product pictures and links to product pages on the e.l.f Cosmetics' website where users can make a purchase.

However, clicking on pictures and links while reading disrupts the reader's experience. Plus if a user clicks on a link featured early on in the article, they may not return to the blog to view the rest of the products.

If a user finishes an article and wishes to purchase more than one item, they have to flip between the blog and open product pages to purchase all items. This is a time consuming process that involves a lot of effort from the user.

In order to prevent users from getting frustrated by the purchase process or interrupting their experiences, I proposed adding a new feature beneath the article called "Shop the Blog". Shop the Blog allows users to view and purchase all products mentioned in the article. And by locating this feature beneath the article, users can finish reading content before taking action.

 

Design Process

elf-wireframe.png

Shop the Blog is basically a mini check out. In order to list all products and information in the space below the article, I used a carousel format showing three items with scrolling arrows on each side for additional products. Users select an item by clicking on the image. 

A check mark appears over the image after selection and the items are added to a cart. The checkout contains a running total of all the items selected. I mimicked the appearance of the checkout section on e.l.f.'s website in order to maintain a consistant checkout experience across the brand.

elf-full-page-mock.png

After the user has selected a few products, she can click on one of two check out options. Both direct the user to a check out page hosted on the e.l.f. Cosmetics' website. Due to security concerns, the actual purchase cannot occur on the blog.

However, after the purchase is completed the customer is redirected back to the blog in order to create the illusion that the user never left the blog.

elf-blog-checkout-process.png
 

Results

Before adding this feature to each article, the client tested a simplified format on one blog page. "Shop The Story" was created due to technical limitations. This version did not contain the cart and checkout features. Instead only pictures, prices, and product names were listed in a carousel format. Whenever a user clicked on the image within the carousel, they would be redirected to the product page.

Although the Shop the Story format does allow a user to finish reading the blog before encountering a full list of products, it lacks the seamless experience of the original design. Users still have to flip back and forth between the blog and product pages in order to purchase the items they desire.

Unfortunately, the article chosen by the client for this test was archived, so there was not enough traffic to consider the data from this test statistically significant. In order to reach statistical significance, we proposed testing the performance of a fully functional Shop The Blog feature with a newly published article.