Molloy's Bulk Refill & Soap Supply
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
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.
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
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.
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 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.)
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.
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.
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.
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