Check out the Brighter Mattress UX teardown video above to find out how you can increase your page conversion by marrying UX and design
Hey wait, what's the video about?
This 23min brighter UX teardown video delves into the world of mattresses, more precisely, Brighter Mattresses as seen on their website.
For a good few years now BM have been focusing on a mattress that helps sleepers feel better the morning after sleeping on their mattress the night before. Their mission is to help their customers become brighter and better, purely by investing in a good night's sleep on their mattress. This Brighter UX teardown video examines the BM website and explains what works and what needs tweaking or amending from a UX and design point of view.
As mentioned, it's a 23min session so grab yourself a hot buttered crumpet or two and send us over you feedback on how you think this sort of Brighter UX teardown video can be improved and what you think about our UX suggestions for Brighter.
Positive perceptions on the Brighter website.
To be fair, I think, from a UX perspective, that Brighter are already doing a lot of things right. The menu is straightforward without unnecessary items; design is simple, without being basic, with a good colour scheme, quality images and icons that aren't overtly gimmicky; buying options are obvious on the home page; quality reviews and customer testimonials are in place; finally, I feel the illustrations work really well and make me feel emotionally engaged with Brighter as a brand.
Top five things I'd change
The interest free credit pop-up – The instant I saw an interest free credit pop up on the home page, the moment my heart sank. I'm not a fan of pop ups, nor interest free credit (too good to be true, perhaps); I feel pop ups are a bit too in your face, especially when promoted at such an early stage in the buyer/seller relationship. If Brighter got rid of the credit, I've no doubt that their bounce rate would improve considerably as would the user's initial perception of the company. These vital few first impressions would be better used allowing the user into the site rather than stopping them at the front door.
I also found it tricky to close the pop up thanks to the Buffer software plug-in, which also prevents the banner from being able to be shut down via the usual cross in the corner ticking action. People don't like it when they're faced with a new response to an action that they're familiar with. Just saying.
Although you can check the 'don't show this pop up again box, it would be better UX if you didn't have to go through the extra rigmarole in the first place. Check out the brighter UX teardown and see what you think.
The videos on the home page
As you'll see in the Brighter UX teardown video, there are two videos on the Home page. Sounds good, right? Videos are rich content and therefore well respected by search engines and highly efficient ways of promoting a product and increasing conversion rates.
The trouble is that far from fitting into the customer journey that leads a customer, seamlessly, all the way to a conversion, the Purotex video, for example, concentrates on the joys of dustmites. Hey, dustmite allergies are very important, especially when choosing a mattress, however, could this itchy info be better placed on the site rather than slap bang on the Home page? I think so.
The screen grab isn't exactly inspiring either as from an overload of text to negative images of devastated dust mite victims, the benefits of Brighter mattresses aren't automatically recognisable.
I think the additional testimonial video is also a bit off topic as it doesn't really feel all that authentic with scripted actors as opposed to real life feedback forging a fake feel complemented by a cheesy voice over that's really dated and simply not engaging enough in an entertainment driven world.
Customer trust and belief in a company's authenticity are massive factors in a positive, successful user experience which is why I believe the two videos on the Brighter site should be UX tested e.g. what's the feedback of the site with the videos and what's the feedback without the videos. Simple.
The general layout of the page
Believe it or not there are several deeply rooted psychological practices related to how you lay out and design your page. A bit like online Feng Shui. One of the fundamentals is displaying your company/product/service message as obviously and concisely as possible.
Secondly, you need to display the proof that backs up your message from an external source.
In our Brighter UX teardown it's clear that their message should be something along the lines of: our mattresses allow you to sleep better or our mattresses alleviate back aches and allow you to get a good night's sleep. There's no obvious telling of a story or conversation. For example, the company could ask if the client suffers from a bad back or doesn't have a good night's sleep due to their current mattress. Then the problem could be solved by explaining how a Brighter mattress is the answer to all of the client's dreams. Their sweet, sweet, sleepy dreams.
By offering a solution to a problem in the form of a conversation or message that customers can relate to, you're providing a very obvious question and answer which can also be backed up by the proof of a ten year quality guarantee on all mattresses or, perhaps, a free month's trial with money back offer if not completely satisfied.
TrustPilot and authentic customer reviews, not actors, will also add to consumer trust levels as shown in our Brighter UX teardown which will go on to increase conversions and sales. By answering questions or potential worries/issues in advance you'll also be instilling trust and confidence as you're promoting your company as an authoritative voice within the industry as well as an experienced retailer, someone to be trusted.
A basic principle behind page layout is to ask what your business wants. In most cases it will be for a user to use a call to action button or, ultimately, convert and buy your product asap. Use this tagline method: benefit + time + solution, at the top and the footer of your page.
How content is tailored to their readers
Ensuring you're writing with your audience, primarily, in mind is much more worthwhile than attempting a 'one style fits all' approach. Think about who you're trying to target, who are your best buyers and then create an actual persona and tailor your content writing to them.
In the Brighter UX teardown video we can see that Brighter's text works best at the foot of the page as it's designed to appeal on an emotional level i.e. 'snug and utterly content' – just how you'll feel when you sleep on a Brighter mattress, right.
I feel that this sort of snuggly, evocative language is the right way to go to reach Brighter's target audience. It's this sort of style and tone that needs to be adopted throughout the site so as to reinforce the brand identity rather than chopping and changing from one content style to the next.
How the images are used in order to make the brand more human
The site as a whole seems to be lacking a little bit in the warm and cuddly department which is, I'd imagine, the emotion that they're looking to recreate. The images, as well as sections of the content, could certainly do with a bit of tlc as at the moment they seem pretty homogenised and cold to the touch. Hey, the quality of the images is great but they're just lacking a personal touch, they're bereft of personality and feeling. There's not much to relate to or connect with when you look at the images and this detracts from Brighter's message of comfy, happy, healing.
Images are very important for allowing an audience to instantly connect with a brand and relate to what's being offered which, in this case, is the benefits of a Brighter mattress not the website owner's ability to source stock images from an online library. Give it some personality Brighter, before it's too late. I want to see enjoyment, big smiles, bouncy bedroom romps and pillow fights. Too much? Anyway, you get the picture.
My top five UX improvements as mentioned within the Brighter UX teardown video:
Make the tagline better – their current tagline 'the better next day mattress' is pretty poor and good easily be improved by using the following formula: benefit – time – counter objection.
Balance the Brighter banner – the top banner looks a little out of whack in as much as it's over to the right. I'd swap the call to action button to the left, and increase its size, and I'd also reduce the width of the banner on the right hand side of the page.
Showcase social testimonials higher up – customer testimonials, real life proof that a product works, is what users instinctively look for first when visiting a new website. It's only when we get to the foot of the page when we realise that Brighter has actually got TrustPilot testimonials and have been featured in the authoritative and trustworthy source of Ideal Homes. I'd suggest sticking these sorts of testimonials above the fold not out of the way at the foot of the page.
Assist users in what they have to choose – why not allow users to click on the mattress icons and why not surround the most frequently used options with a box to help them stand out? Customer choices should be easy to make and anything that can help this to happen is good for UX.
Amend text on the button – I'd tweak the text on the button and also include a hover state prior to testing which works better for improving conversion rates.
Summing up on what we've learned within the Brighter UX teardown video:
Hey, there's plenty of things that Brighter are already doing well. However, there are equally lots more things that they can do to improve UX and conversion rates. I'd recommend making small, yet significant, tweaks and then testing them to see if traffic to the site improves. Noting key changes and then monitoring results is an incredibly important part of improving the UX process. A/B testing, especially, is going to be really useful here and will go on to aid further improvements as part of an ongoing user experience improvement process.