Affluent • Web Optimization

Optimized for
increased conversion

Intro

Affluent manufactures premium leather accessories at some of the world’s oldest and most exclusive leather factories. They reached out asking for help on their e-commerce website so we partnered together to optimize and increase their conversion rates.

Problem

There was little to no engagement on almost all the website pages.

As an emerging brand, Affluent had very low conversion rates with no real idea as to why. Through an audit, I saw that users were interacting with the website but not engaging with its content.

Solution

In order to improve user engagement, I introduced a

• refined logo,

• style guide, and

• a new design for the home and product detail page.

These changes prioritized what the user searched for the most based off my findings.

Style Guide

Affluent had no guidelines for their brand so I created a style guide they could adhere to. This establishes consistency and prevents the brand from being ambiguous and scattered.

Logo

Affluent wanted to attract a younger audience so I refined their logo by choosing Montserrat to replace the previous serif font. This will create a more modern look without losing the detail of luxury.

The Affluent logo should always be afforded a predetermined area of breathing space, referred to as an area of isolation. This ensures that the identity maintains its hierarchy and is not overwhelmed by other visual elements.

Typography

Typography is a key visual element in establishing the brand. For consistency, Montserrat was again chosen as the headline and title font because of its simple elegance and easy-to-read font. Crimson Pro was selected as the body copy to hold more character rather than choosing a similar sans-serif font.

Colors

Gunmetal was chosen as the main brand color for its neutral but deep luxury tone. The secondary colors of Light Gray, Windsor Tan, Portland Orange, and Upsdell Red were pulled from the palettes of Affluent’s products. These secondary colors stand apart and are to be used as accents.

Research

Collecting data

Using a heatmapping software, I ran a pixel on the current website and collected data over the course of 8 weeks. I was able to see user recordings per session, the percentage of clicks and scrolls, and statistics of where the user viewed, exited, or purchased on the site. This data helped inform my decisions of how to improve the user experience and guide customers to what they’re interested in.

Desktop

Mobile

What our data says

Based off the click data, there was little to no engagement on almost all the website pages.

Focusing on the Home and Product pages, we were able to see that there was fair engagement within the navigation but little to none in regards to other pages.

On the Home page, 50% of users would scroll halfway before either exiting or clicking into the navigation. This shows that the current sections in the Home page do not attract users.

Lastly, I was able to see that the top 5 products sold were iPhone cases and that the product pages were pulling in an extremely high exit rate average.

Things to consider

Additionally, I gathered outside sources of data to cross reference and consider into my design decisions.

Web Design

After collecting data, I continued the process by creating a sitemap, moodboard, wireframe, and high fidelity mockups before developing the finished website design onto Shopify.

Home Page

In order to increase user engagement, I was able to

• add a free shipping promotional banner,

• include a call-to-action button on the main slider image,

• replace Featured Collections (<1% clicks) with best selling iPhone cases beneath the fold, and

• replace Collection Grid (<2% clicks) with a promotional banner and a call-to-action button.

Product Detail Page

The Product Detail Page included

• customer reviews to increase brand trust and drive conversion,

• Shop Pay for different method of payment,

• product info below the fold to highlight product features, and

• call-to-action’s below fold to drive user engagement to checkout.

Conclusion

Unfortunately post-launch, we were not able to follow up and see the results of our changes due to the limited client contract. However, the success metrics I would’ve reviewed to gather more data would be:

• Checkout % rate

• Page views

• Click and scroll data

• Add to cart %