We need some help and we’re hoping to get with some basic feedback on the design of a website. We are gonna be honest - we are 2 web designers (husband and wife) working long-term for a company that produces high-end, luxury mattresses in the U.S. Although over the time we created many quality design materials for them, the brand image and guidelines, we didn’t design their website, and we feel that their current design is not working in their best interest. We basically developed the whole brand identity and everything else except the website, and we quite care about the brand image in general. We tried to talk with them about the website, but they don’t seem to trust our opinion that much, and we thought it would be a good idea to bring in some outside feedback. It would be of great help to us if you could tell us your honest opinion on some of the aspects we mentioned below.
We feel that the design does not meet the brand guidelines, but more importantly, the main aspects that we are asking for feedback, are below. We would really need some outside opinions and we’d greatly appreciate some help with this.
1 - General aspect of the website and impact on the brand image.
2 - Aesthetics, harmony, and balance.
3 - Content hierarchy. Proper use of headings, lead copy texts, texts in general, and CTAs.
4 - Correct use of spacings / white space, sections separations/
We attached a screenshot - for NDA reasons, we had to blur the logo and replace any mentions of the brand’s name with a generic place-holder “[-Brand-]”. We also added at the end an URL to the file located on Google Drive.
As mentioned in the brand book, the main keywords for a design working in the best interests of the company, are:
“Our brand is defined by obsessions with health, luxury, and comfort. This health-first identity is reflected in our products, the language we use, and our visual identity. Asking these questions will help determine whether a design supports this brand position:
HEALTH FIRST Does this evoke a healthy lifestyle?
CLINICAL & SCIENTIFIC Is this consistent with our position as a leader in modern, cutting edge technology and science-focus?
FRIENDLY & COMFORTABLE Does this feel inviting, friendly, honest, and comforting? [i.e. not overly sharp, aggressive, angular or masculine]
LUXURY Does this reflect a brand that provides only the best experience to its customers?”
Basically, the website should be modern and classic at the same time, inspire quality and luxury, and with the same importance, it should have a clinical and scientific feeling. Do you think the website meets the requirements?
@cataling You’re going to need some coffee with this one, I could write a whole book on this but I digress
When I think of luxury I think of certain terms that exemplify luxury such as ‘high quality’, ‘premium’, ‘exclusive’, ‘limited’, etc. The brands that immediately come to mind that most would agree sell luxury products are Apple, Sandals Resorts, Gucci, Rolex, Porsche and so on.
What do all these brands have in common? Well, they perfectly embody the same terms I mentioned before ‘high quality’, ‘premium’, ‘exclusive’, and ‘limited’. Most people would agree they all have a ‘high end’ experience and feel to their products.
Keep in mind there are no set rules nor any governing body that has official guidelines on how you can or cannot design your brand. However, these logos almost look like the same designer could have designed them.
Everything from the typography to the colors they use give the impression of being luxurious.
Speaking of color, it is very important factor in human psychology and how we perceive a brand. As you can see, these logos use black (the Apple logo uses grey which is a shade of black), green, (Gucci and Rolex both use dark green), gold, red and blue.
Why did the designers choose these colors to represent these particular brands?
We subconsciously associate specific feelings, emotions and ideas when we see certain colors.
Not only do primary colors give these impressions, but also different shades of the primary color.
For example, primary yellow has a warm, bright, almost playful feel to it. But when you darken yellow a little to get gold, that gives the impression of ‘rich’. Purple and gold are often the colors of choice for kings and queens to represent their high status and royalty.
Another example, primary green, give the impression of health, wealth, natural and organic. A darker green (Emerald, Hunter or Forest green) has a more luxurious, exclusive feel to it.
To be honest, the first thing I get from looking at the current design is ‘friendly’. I don’t get the initial impression of ‘health’ nor ‘luxury’.
The blue does give an element of comfort, but almost too much (Too much comfort, is there a such thing?). This reminds me more of Facebook or most social media sites that use a lot of blue to show trustworthiness to its users.
Looking at the rest of the design, there are a lot of different colors being used.
Remember earlier I stated that when it comes to perception, not only do the primary colors matter, but also the shade of the colors are important.
Looking at other popular mattress brands - Serta, Tempur-Pedic, Saatva, and DreamCloud - that most would consider ‘luxury’, you can see the similarities in how they present their products on their websites.
Again, when I think of luxury, I think of ‘limited’ or ‘exclusive’. If you look at these particular brands, they utilize a very simplistic color scheme, mostly using one primary color and then a secondary color. They all use shades of blue and shades of yellow (gold) in their website design.
Know that there is no specific color that represents luxury. However, notice how these brands all use shades that are muted rather than primary colors on their websites.
Also, and more importantly, they use the colors subtly. Their colors are not overly aggressive. They don’t smack you in your face as soon as you open the website.
Aesthetically speaking, the first thing that stood out to me is I don’t see any photos of the actual finished product. People definitely want to see the mattress itself - preferably with your brand name on it.
You will not find a ‘luxury’ brand website in any industry without high resolution images. When we see high res, high quality images we automatically think ‘high end’. So using high resolution, professional photos of the mattress on its own and being used are highly important.
I’m not sure if the models in the photos are stock images but people want to be able to envision themselves on your brands’ mattress.
The first is a concept for a health and wellness brand and the second is a concept for a healthcare firm. They are both ‘health first’ brands and you can see the similarities in the colors and images used.
Now compare your current designs’ theme to these two.
No one stood over these two designers and forced them to follow a certain theme and to choose these exact colors. They understand that naturally when we see these colors and imagery we assume ‘health and wellness’.
Design is unlike art in that art is subjective. Saying, “I like these colors so I will use them” is ‘art thinking’. Design is objective. It has a standard.
**Design thinking is knowing your brands identity and message, and then conveying that to your target audience. This is where you can utilize human psychology to arrive at the correct design to fulfill your brand’s directive.
Purple Mattress is a very clinical and science-focused mattress brand. They heavily push cutting edge technology as their brand message.
Clinical and scientific has more to do with imagery than specific colors.
Purple takes this to the next level by showing photos and videos of literal science labs and by doing literal science experiments (stress tests) with their mattresses.
Most wouldn’t call Purple a luxury brand, however they do have the appearance of quality and comfort because when it comes to high resolution, professional photos of their product, color psychology (purple = royalty), and a simple, subtle color scheme…they check all the boxes.
Your current website is on the right track with the LoomAir3D mattress interactive layers overview.
As previously stated, my first impression of the website is ‘friendly’. So is abcmouse.com. But the latter is for a completely different audience.
From my perspective the blue header is a bit overly aggressive. Once again, subtle color schemes have a more luxurious, premium feel to them as opposed to solid primary colors.
The blue section is overly aggressive because it is so large, and that’s in part to the fact that the navigation section is unbalanced within the header. If the navigation was in line with the logo, the header section would not be so large and thus would be less aggressive.
Alternatively, you could take the same blue and make it more subtle by decreasing the size significantly, and then aligning the navigation items accordingly.
With just a few minor changes - aligning the navigation and logo, adding the horizontal line to separate the account info with the main navigation and making the dark blue more subtle - you have already achieved the appearance of modern and classic along with quality and luxury!
Contrast is very important in design. The call to action buttons are a light green and the text are a light color as well. Also there are other sections that have a light colored text on a light colored background.
This is simple fix. Make the text dark anywhere there is a light colored background.
This is important for accessibility guidelines for visually impaired people AND people with 20/20 vision because it’s hard on the eyes.
Spacing (proximity) and hierarchy ‘sleep in the same bed’ (pun intended) because they go one with another.
How you arrange blocks of text and sections on the page is how people know what’s most important and how they should digest the content.
The headline of each section should be in a larger or more emphasized font (hierarchy), and should have enough white space around each of the elements (proximity) so people will know for sure which elements belong with which.
Since the headline is in all caps, the rest of the text in the header should be regular sentence case as it is competing with the headline “SLEEP. HEAL. LIVE.” for attention.
A couple tricks you can use to get a more ‘luxury’ feel is use big thin weight fonts instead of bold fonts. Also use more white space around elements. It will give the impression of a ‘premium’ feel to it.
Sections do not need to have horizontal lines in order to separate them. ‘White space’ alone can be used to separate the sections or even slightly different shades of grey can be used to know when one section ends and another begins.
Or if you do use horizontal lines, use a more subtle shade of black because solid black is very aggressive and it can create unnecessary tension.
Here’s Walmart’s brand mission according to the company:
In short, Walmart.com is passionate about combining the best of two great worlds, technology and world-class retailing, to give customers a wide assortment of their favorite products, Every Day Low Prices, guaranteed satisfaction, friendly service, convenient hours, and a great online shopping experience.
Here’s a Walmart review from real people on TrustPilot.com:
