UX Audit Reports: Putting Beauty In The Eye of the User

Xavier Armand
Click. Boom.
Published in
7 min readMar 22, 2018

--

UX design. It’s a beautiful thing.

Before & After

We’re talking real beauty. Not the kind that looks nice at first but quickly fades once you get past the surface.

Across the board, the companies we work with want to end up with a beautiful website (or already have one). Yet, they come to us because their conversion rate isn’t stellar and driving qualified traffic from ad campaigns is expensive. Clients need to find a way to make their websites perform better.

For many of the enterprise companies we work with, investing in UX research and optimizing, optimizing, optimizing is a regular part of the e-commerce store operations.

UX research gives you the power to design with confidence, optimize your buyer’s journey and give your customers what they want and need. That’s real beauty.

But of course that doesn’t come for nothing. For brand new startups up to medium-sized companies in a growth phase, it can be difficult to justify the resources needed for research when time is tight and other business imperatives are looming large.

So what to do? With this information we devised the UX Audit Report — a qualified review of your website with conversion optimization in mind. As an agency we combine our persistent research in UX best practices (we love the Baymard Institute and Nielsen Norman Group) with our 15+ combined years of e-commerce UX experience, and review client’s websites with an eye towards optimization. The result is an annotated report of their website highlighting quick-wins, easy improvements, and long term suggestions.

So often growing e-commerce companies will prioritize branding and visuals over usability, but it’s important for business to build a site that drives conversions first before worrying about beautification and customization. So when LOLI Beauty came to us for help with their web redesign, they already knew that they had to do more than win people over on aesthetics.

Tina Hedges, founder and CEO of LOLI explains:

“What we’re trying to do is incredibly complex. We’re asking for a lot from people because everything we do as a brand is innovative, from the ingredients we use to the way people buy our products to how they use them at home. When people would visit the beta version of our site we kept hearing the same thing — it looked beautiful, but no one could figure out what to buy or how to even get to the point of purchase.”

So how did we help? We started by standing on the shoulders of giants. If you are selling women’s clothing, it probably makes sense to borrow ideas from $350M+ Ann Taylor (disclaimer: we work for them). Sleep goods? Have a look at Casper. Or if you are selling beauty products, like LOLI Beauty, it makes sense to take a look at Glossier and Sephora. On the internet, imitation is the sincerest form of flattery — and can lead to real revenue.

So, as a beauty brand selling exclusively online, LOLI wanted to capture the feeling of a luxurious natural beauty experience and bring it into the digital world. To that end, it was clearaesthetics were a top priority in the early iterations of the site.

But of course, surface beauty is never enough. We needed to drive sales.

LOLI’s brand encourages customers to change the way they’ve shopped for and used beauty products all their lives. For that to happen, customers need to be guided through the process from start to finish with layers of information provided at just the right time and place.

Image: lolibeauty.com

We knew right away that for LOLI to succeed in the crowded direct to consumer beauty space they needed to compete in a) winning customers over with a beautiful branded experience and b) with a unique and clear product offering that clarifies the LOLI diffference.

To tackle this challenge, we started out by running the aforementioned UX audit on LOLI’s existing website to root out any weaknesses.

As an agency, we commit to making a difference in every client’s business. Running an audit enables us to suss out design flaws, tackle the most pressing issues and nail the basics first, so that our major design upgrades can have an immediate impact on conversions.

“We already knew there were pain points in the buyer’s journey but we weren’t clear on where to go from there,” Tina explains. “With a tight timeline and a startup budget, you simply can’t do everything. We didn’t have time to deal with a slow, arduous process; we needed a nimble agency that could catalogue our usability issues from a ‘best practice’ perspective and fix the most important things right away.”

Our audit report pinpointed several small improvements that needed to be prioritized. Drawing on our experience with companies of all sizes — including major national retailers that invest heavily in usability studies and data-driven optimization — we were able to identify hurdles in the buyer’s journey and offer solutions to improve the shopping experience.

One of our key insights in this case was that LOLI needed to provide a more clear and cohesive user journey and a more concise product offering. Issues with the visual and information hierarchy left customers confused about what they were buying, so our top priority was to create a more intuitive e-commerce experience.

That insight led us to hit pause on the big, juicy customization that LOLI was after, and instead tackle pressing usability issues first.

Our first move was to simplify the shopping process for customers who know what they want and don’t need a tailored experience to guide them along.

That meant updating the product pages with appealing visuals and a logical hierarchy of information to make the purchasing process as clear and easy as possible.

Here’s a snapshot of a few of our recommendations to improve the pre-existing product page format on desktop:

We singled out several fixes that would make it easier for customers to get the information needed to make their purchasing decision. Among them, certain changes took priority:

  • Title Sizing: We made the product title smaller than the tagline. You read that right. Typically, e-commerce websites use a standard typographical hierarchy that prioritizes product titles over descriptions. Knowing that the details are what converts, we turned this on its head and used a prominent product tagline to emphasize the benefits of the product
  • Ingredients Panel: Using real, raw ingredients is what sets LOLI apart from other beauty brands. To make this key product benefit clear, we designed an ingredient module to live right within the product details.

We then worked hand-in-hand with the LOLI internal creative team to develop a new set of concepts. Here’s a snapshot of where we ended up with the new product page on desktop:

https://lolibeauty.com/products/plum-elixir

Image: lolibeauty.com

Ultimately, after combing through the desktop experience, our main objective was to reduce extraneous information that distracted users from moving through the conversion funnel. Anything that didn’t enable users get the information they needed to move effortlessly from browsing through checkout had to be redesigned.

On mobile, our recommendations were a bit different. Customers behave differently on mobile versus desktop, and e-commerce websites must be adaptive to fit with their needs (not the other way around).

Many of the issues we encountered were around accessibility, so we focused our recommendations on optimizing UI for smaller devices, and consolidating content to adapt to the behavioral expectations associated with mobile browsing.

In the image below, you’ll see a few of the suggestions that we made to improve the mobile shopping experience.

We knew that a streamlined mobile experience, a basic but informative product page and an intuitive checkout process were ‘must have’ offerings for LOLI customers.

With these fundamentals in place, adding ‘nice to have’ features will set the brand apart, without detracting from the overall user experience. The next step in the process is to build out personalization options for customers seeking a more tailored approach — the kind of experience you might get from interacting with an expert at a spa or a luxury skincare brick and mortar store.

Designing a website from scratch and redesigning an existing web experience are two different things. Each time we do a redesign, a different set of learnings will jump out at us.

Here are the lessons that stand out most in LOLI’s case:

  1. Balance visual design with usability. Surface beauty doesn’t get you far if you don’t optimize for conversions
  2. Start with a UX audit. At a minimum, evaluate the current design against best practices. Better still, do your research to understand the customer journey and identify any usability issues
  3. Guide the user. Build an e-commerce experience that’s clear and intuitive so customers are never left guessing
  4. Optimize for web and mobile separately. Provide an experience tailored to the varied browsing habits of customers on each platform

We’d love to answer your UX design questions here on The Caravaan. Leave a note in the comments or get in touch and we’ll do our best to answer in an upcoming post.

--

--