top of page

LIVINGPROOF.COM

  

UI, UX, VISUAL DESIGN, ART DIRECTION

 

Living Proof is a science-driven, prestige beauty company. In late 2018, we replatformed Livingproof.com (from Magento to Salesforce), with a redesign focused on telling the brand's story of scientific innovation and supporting aggressive e-commerce goals.

 

I led the UI/UX efforts with a Salesforce designer from our development agency, and was responsible for most of the visual design. A key part of my role involved getting buy-in from stakeholders across different departments, to make sure that we were supporting their goals, while still keeping our customers' needs at the forefront.

Due to an accelerated timeline, this was an MVP launch, with ongoing improvements yet to come, but here are three quick takes on some of the initial areas we worked on:

BRAND REFRESH

Unilever had tasked us with aging down our brand, so one of my primary considerations in the redesign was to make sure we didn't alienate or confuse our current (somewhat older) users. The best way of going about this was to age down in terms of the visual design, but prioritize our older customers in the UI/UX: more traditional interface design, making sure that type sizes were adequately large and that color contrasts met accessibility standards. For the visual design, I collaborated with the art directors on our brand team, to bring their assets to life digitally and tie them in to our updated design system.

NAVIGATION + FILTERS

I identified some major UX opportunities from our previous site: the site navigation was not helpful enough (based on poor click rates and over-reliance on the "Shop all products" page), and the category pages didn't have any filters. I started by collecting a lot of competitive research — this helped in terms of not only seeing what other brands were doing, but also in getting buy-in from our brand managers. 

As a problem-solution brand, many of the products speak to our customers' hair concerns, so we wanted to make it easier for them to narrow their choices down by specific benefit. We had a lot of user data around these points, which I used as a basis for our new categories and filters, and I worked with a copywriter to make our updated language more conversational and useful.

One other specific improvement was based on information from our Customer Service advocate, who said she helped a lot of people who didn't remember the name of a specific product they were using — they'd refer to them as "the one in the purple bottle" or "the grey can." So I made sure to include color swatches in the Collection category, to give our users an extra visual cue to help them find what they're looking for.

PRODUCT PAGE IMPROVEMENTS

The brand refresh involved a lot of new photography of compelling Before + After images, which we definitely wanted to feature prominently. We also identified a few areas where we could improve the experience here:

• Some of our products have a bit of a learning curve since they're formulated differently than other products on the market, so for peak efficacy, following usage instructions is pretty essential. Obviously, having usage instructions on your website will never replace the experience of reading them on the back of your bottle while you're actually using them, but we wanted to take this opportunity to include them as a means of driving the message home, as well as taking advantage the extra real estate to include additional tips, videos, etc.

• I worked with our Customer Service rep to find out about questions she received repeatedly, to see how we could address those issues more visibly on the product pages. Most of them were about ingredients and processes – "Are you gluten-free?", "Are you color-safe?", "Are you cruelty-free?" etc. These were issues that we should not only be transparent about, but are key selling points that we should be featuring. I got alignment from our Brand managers and scientists/regulatory on what we were allowed to claim, and implemented a section with icons that call out these key product features.

bottom of page