UX Audit

Molloy's Bulk Refill & Soap Supply

Accessible

In order to connect with all your potential audiences, it's necessary to go above and beyond just making things clear. You need to make them extra clear. People have varying abilities both physically and intellectually. 18.7% of Americans are estimated to have some form of disability.

  • Many of your users have invisible disabilities
  • Older audiences need to be accommodated
  • Even being tired can affect a person's ability to understand

Font sizes are accessible

Body fonts are a little small for legibility, we recommend 17-18px for body fonts. Especially noticeable with low contrast text.

Foreground elements (like content and controls) have high contrast with background

All text should meet at least WCAG AA contrast standards for accessibility. Contrast is the difference in colour between the foreground text and the background colour. Page titles, featured products, and related products text is white making it illegible.

Email subscription form header text doesn't meet contrast standards

Body/Item description text doesn't meet contrast standards for small text

Email and phone number in footer doesn't meet contrast standards

Breadcrumbs and copyright in footer don't meet contrast standards

Text in top menu doesn't meet contrast standards

Nav menu sub item hover doesn't meet contrast standards

Clear

Apparent, legible, comprehensible. Clarity is the most important element of user interface design. Indeed, the whole purpose of user interface design is to enable people to interact with your system by communicating meaning and function. Clarity is both visual and informational.

  • Implement visual heirarchy
  • Information is organized and easily scannable
  • Refine your content to solve user goals

Primary action is visually clear from secondary actions

Previous and Next product links are of low importance but are given 'CTA blue', which should denote important actions.

Alert messages are visually clear

Yes. prominent green boxes. There might be one issue, which is that sometimes the user is taken to a secondary page to fill out a ReCaptcha, then returned to the original page without scrolling back down to see the confirmation message. This only happens occasionally.

Different typographic styles used to differentiate content, content types, and controls

Grey text is used for too many different elements (links, body text, breadcrumbs, collection descriptions). Interactive and static elements should be differentiated more.

Images should be professionally photographed

All images should be white balance and exposure corrected. Many images are too dark or have a colour cast.

Product images should be cropped to just display the product unless they're "lifestyle" or staged shots. Many images were not cropped, making the product difficult to discern.

Concise

Keep things clear but also keep things concise. When you can explain a feature in one sentence instead of three, do it. When you can label an item with one word instead of two, do it. Save the valuable time of your users by keeping things simple.

  • Minimalism does wonders
  • But not unnecessarily minimal
  • Hide information until it's needed

Colour palette is concise

Rewards button and app colours are yellow. They should be configured to match the brand if possible.

Text is as simple as possible and no simpler

Collection descriptions say something like "For online items only under 'House and Home'". Add proper description for SEO or remove if no description available yet.

Ingredients & Supplies should be hidden until there are products.

Products should have longer descriptions for marketing purposes and SEO

Shipping info is a key piece of information shoppers are looking for

A Return Policy is a key piece of information shoppers are looking for

Progressive Disclosure

Investigate adding tabs for product descriptions, to hide less important information until it's needed. Prominently displaying Ingredients may be a brand voice strategy, so apply this recommendation in context.

Familiar

Familiarity means something that can be naturally and instinctively understood and comprehended. When you’re familiar with something, you know how it behaves – you know what to expect. Identify things that are familiar to your users and integrate them into your user interface.

  • Avoid reinventing the wheel
  • Use common UI patterns
  • Interactive elements (links, buttons, forms) should look interactive

Interactive elements are familiar

Web users expect links to be underlined and a different colour than text. Many links across the site are the colour of body text and don't have the underline.

In pagination, '...' element shouldn't be clickable.

The email and phone number in the footer should be links.

Consistent

Consistent interfaces allow users to develop usage patterns and learn how certain things work. Users will be able to work out how to operate new features quicker, extrapolating from those previous experiences.

  • Specific actions should look the same
  • Things that look the same should behave the same
  • Content should be consistent and organized

Navigation is consistent

Some products show up in search that don't show up anywhere else. Some also have no images.

Contact links are redundant, reduce to one, and make more prominent. This will give more space for key navigation

House & Home is redundant, there may be a better option (Home Care?)

Room for growth while maintaining consistency

May want to consider splitting sub sections into main sections, e.g. Personal Care, Home Care, Zero Waste, Bulk Ingredients, Supplies, etc.

Content and labels are consistent

Variants not capitalized on some products so they show up as (size, instead of Size). Fix in code by converting to all caps or fix in backend.

Bubble Bath: Lavender: Ingredients, "NOTIFICATION WITHOUT CANCERIGENE" is in French

Product variant sizing should be consistent. (Currently ML, ml, mL, LT, L, l, lt, etc.)

Misc

Image ratios should be made consistent in the file or cropped with CSS

There's a CTA with an arrow in the footer that's empty. Remove or update.

Products need to be tagged and collections created using automated collections. Otherwise, it can lead to collections that don't show the correct items.

Products that shouldn't be showing in store show up in search. They need to be disabled in the backend from showing in the store.

Attractive

Providing an easy to use experience isn't enough, especially now. Interfaces that delight users keep them coming back for more. The most appealing interface is the most memorable. Building attractiveness without sacrificing usability is key.

  • Cohesive brand experience build brand recognition and loyalty
  • Interfaces are built to appeal to your target demographics
  • Delight will keep you top of mind

Colours should match branding

Site only uses one primary colour, blue. Doesn't match brand guidelines, also blue is very business oriented. There's a possibility to integrate two colours or shades to differentiate primary CTAs from secondary actions.

Site fonts (Lato) don't match brand fonts.

Images should have a consistent art style

Certain images are shot in a light box and certain images are staged. One style should be chosen and consistent.

Efficient

What you really need to do to make an interface efficient is to figure out what exactly the user is trying to achieve, and then let them do exactly that without any fuss. You have to identify how your application should ‘work’ – what functions does it need to have, what are the goals you’re trying to achieve?

  • Information and controls that are logically related are grouped together
  • The most important things come first
  • Frequent actions should be quick to perform
  • Visual alignment of content enables scanning

Repetitive actions or frequent activities are quick to perform

Many clicks to actually view products on mobile (4 just to navigate to a product collection)

Accessing help is efficient

Not much online ordering information, shipping, returns, etc., which can be helpful when making a purchase decision

Visual hierarchy is arranged by importance

The subscribe to email newsletter button should be more apparent and higher priority.

Proximity and alignment

Remove product in cart button isn't grouped with quantity making it difficult to notice

Paypal button on cart page has no context, a little confusing. Maybe align with checkout button?

Content is ordered by importance

Above the fold content should highlight your top priority items. Is that currently the case?

Copyright link is the lowest priority thing on the website. It shouldn't be CTA blue.

Forgiving

Nobody is perfect, and people are bound to make mistakes when using your software or website. How well you can handle those mistakes will be an important indicator of your software’s quality. Don’t punish the user – build a forgiving interface to remedy issues that come up.

  • Allow users to easily recover from mistakes
  • Position impactful buttons so they're not accidentally clicked
  • Implement undo and redo

User errors are forgiving

Remove the clear form button. Clear form buttons are rarely used and may result in lost work. Very few people will begin writing a message then clear the form.