Queen Garnet's Typography And Colors Set The Tone For An Effective User Experience
Queen Garnet's website contains captivating visuals that begin with a lovely animated background above the fold.
The image of their flagship product – plum nectar – against a light beige background demonstrates the perfect compatibility of these colors, with the deep purple palette being used throughout the website.
The classy serif font communicates the effective brand slogan, “Drink to The Queen’s Guard,” in large, attention-grabbing lettering.
The consistency of branding is achieved by the use of elegant typography throughout the website. The CTA buttons use a contrasting non-serif font to make them stand out.
Let’s not forget the discrete, sticky links to the brand’s shop, recipe page, Instagram “About Us” page and user’s cart. They stay with the visitor as they scroll and the links open with a slick carousel animation, with no loading delay whatsoever.
White Space Provides Clarity And A Focus On Queen Garnet's Messaging
Queen Garnet’s content is uniquely displayed in the sense that it focuses the visitor’s gaze on concise messaging and hi-res product images.
It achieves this by using white space. As visitors scroll down the page, they view different screens with text and images centered and with enough space on the left and the right so they can “breathe.”
This web design technique serves the purpose of keeping visitors focused on the copy that educates them on the benefits of the product.
Queen Garnet Products Communicate Benefits And Educate Prospective Buyers
One of the best practices of successful eCommerce is to keep your product info highly descriptive and focus on benefits for the buyer.
Queen Garnet boasts a modest range of products and they’re all given a dash of premium exclusivity. Note their value propositions, which include “For Your Wellbeing,” “For Your Creativity,” For Your Digestion” and so on. The use of terms such as “thrive,” “royalty,” and “freshness” in product descriptions excites a sense of immediate gain and exclusivity.
These keywords are written in a classy font and given the italic treatment for the added feel of urgency.
User-Friendly Call-to-Action Buttons Offer Queen Garnet Visitors A Quick Path To Conversion
Queen Garnet scatters call-to-action (CTA) buttons throughout their website.
The variety of copy is centered around a conversion/purchasing action (“Buy a Bundle,” Buy a Tub,” “Buy a Bottle,” “Subscribe” etc.) or around education (a more understated “Learn More” link).
The CTAs use a highly contrasting white color to grab attention, contributing to the overall two-tone feel of the website.
If you are looking to create an attention-grabbing website, check the leading Boston web design companies.
Queen Garnet's High-Quality Photography And Creative Graphics Keep Visitors Engaged Throughout The Funnel
High-resolution photography of carefully arranged plums and Queen Garnet-infused dishes provide a stark contrast to the rest of the website’s minimal design.
When visitors reach this page of the website, high-quality images come to the forefront in the bottom half of the page, where there are recipe use cases and endorsements by major universities vouching for the products.
Mouse-Over Effects And Lazy Loading Add A Touch Of Dynamism To Queen Garnet's Website
Queen Garnet’s website consists of a very long landing page that contains all the necessary information for prospects to make a well-informed purchasing decision.
These long pages invite visitors to scroll down extensively, so they can often be distracting and compel a visitor to leave the page, if there are no interactive elements to stimulate interest and engagement.
To that end, the Queen Garnet website uses two powerful tricks and motion effects. The mouse-over effect appears when a user points to one of the products on the page.
The product will slightly rotate and the round background highlight will zoom in. This also happens on “Subscribe” CTAs – a note will pop up with the terms and perks of becoming a subscriber.
The second effect is lazy loading. As visitors scroll down, the product images appear to be floating, as if in zero gravity.
The larger images in the background also seem to move slower than the elements on top of them.
These effects truly bring the website to life.
On a side note, if you are looking to create a compelling website for your small business, check out our list of the best small business website design companies.
What Is Queen Garnet?
Queen Garnet is a beverage brand made by Nutrafruit, an Australian enterprise.
Their products are wellness-oriented and target health food and healthy lifestyle markets.
The company's mission statement reveals a few things about its philosophy and positioning that informed the design of their website:
At Nutrafruit, we believe wellbeing and taste go hand in hand. With the support of Queensland Department of Agriculture and Fisheries, we’re dedicated to the development of scientifically backed natural products, with the potential to be ‘best in class’. Because the journey to a richer, fuller life, starts on the inside.
Queen Garnet Website Is A Triumphant Blend Of Aesthetics And To-The-Point UI
Queen Garnet’s website is an example of the fact that form and function can not only go hand in hand – but, when done right, they can complement each other for maximum effect.
The top-class visuals make for an enjoyable user journey down the conversion funnel, while the technical aspect of the website’s architecture provides its looks with depth and substance.
Finally, content ties in these two aspects with informative copy that addresses consumers’ pain points and provides immediate solutions.
