Problem Definition

Hush Blankets - Website Redesign UX Case Study

Redesigning Hush ECommerce website for higher user conversions


Introduction & Scope


Hush blankets is a Canada based company which sells weighted blankets for a comforting & stress free sleep. This was a freelance work done in mid 2019. They approached me for a redesign of their existing E-Commerce website.

My scope of Work

The scope of the project was to redesign all the pages in their website including the landing page, products page, cart and etc. This website is built on Shopify and hence the checkout page is not in the scope.

User Analysis, Competitor Analysis, Brand Styleguide & Visual Design

My Role

Freelance UX Designer

User & Competitor Analysis, Brand Styleguide, User Interface & Visual Design

April 2019 - June 2019

Team structure

Product Owner - 1
Marketing people - 2
UX Designers - 2


Hush Blankets brand were not getting much conversions through their brand website. How can we discover the issue and redesign Hush Blanket's eCommerce website for a higher conversion rate, increased brand identity and visual appeal?

02 - Empathise & RESEARCH

Understanding the existing website and the target users

Website Issues

The client had already done some research from their end and had come up with few insights, which were:

Secondary Research

Now, as a designer, I started doing my secondary research as well.

I researched using the internet, and I got many inputs from text-based social networking platforms such as Reddit and Quora.

My gathered insights about the Users:


Design Debugging the Website

With these insights in mind, I started analyzing the existing Hush Blankets website. Some of the problem areas which I identified were:

Lack of Premium Branding

The Website lacked a consistent branding in visuals and messaging.

Zero Appeal

The old website had poor UI design choices leading to lack of appeal.

Not optimised for conversions

Too text heavy, lack of proper CTAs and loads of generic content.

More on the last point, The website had too much text and fewer visuals. I felt this was the reason the customers complained that they lacked time to go through it.  

Everyone has time. It's about how we choose to use it. In our case, whether we could convince our customers to use that in our website.

And also, this wasn't an emergency service website/app which people typically access in urgent times. It was a luxury product which they most often access when they have enough time on their hands.

03 - Competitor analysis

What are the other market players doing right?

Like I mentioned previously, Hush was in a growing competitive space, and there were many competitors, both big and small.

For this competitor analysis, I choose only the brands which had at least one of the following:

Some of the brands which fit this criterion were:

Competitor Analysis Matrix

All of these websites were in better shape than the current version of the Hush Blankets website.

Bearaby and Casper were the best of the lot in all the areas, but I would rate Bearaby as the Gold standard only because Casper's concentration on Weighted Blankets was less when compared to their other products.
Checkout the snapshots of the competitor websites


How might we redesign the Hush Blankets website to give it a premium look in visual branding and messaging, which instils trust in the users and provides a good experience, thereby increasing the conversion rate in return?

04 - Information architecture

Improving the content layout of the webpages

In the previous design, some of the sections which are critical for the user's experience and as well as for conversions were missing. For example, Product categories, Social Proof weren't present in the previous design.

Based on my analysis in the previous sections, I added some new sections in the design and removed any unnecessary sections.

Even in the Product Page's old design, loads of critical information necessary to help the user make a decision were missing. It failed to speak to the user. I included some sections which would allow the users in understanding why this product is worth their money.

There was also a case where the users would come to the Product page directly without visiting the homepage or not reading all the information. Hence, some of the critical information from the homepage I showcased on this page too.

Wireframes and Iterations

Checkout some of my different variations and iterations I tried out for this website redesign.

Click on the expand icon on the top right to view in full screen.

05.1 - Mood board

Warm 0r Cool? What feeling do we want to convey?

My clients were not looking to do too much of an overhaul of the entire style guide. They already had the green colour as the base brand colour. They mostly wanted to continue with using the same green. They also had a thought of experimenting with a warmer colour such as orange or brown.

So, I prepared two mood boards for the same. I wanted the website to have a bluer theme with blue themed photos for the green brand colour. The CTA buttons and highlights would have a green colour.

Green and blue are cool colours and represent relaxed, sophisticated, and cosy feelings, which was the emotion I wanted to convey on the website.

For the warmer mood board, I collected photos with yellowish and brown shades.

Finally, we zeroed in on the cool colours mood board since we did not want to mess too much around with the user's mental model. Most often, sleep is associated with cool shades.

05.2 - UI Guidelines

Creating the visual design guidelines

Based on the mood board, I expanded it into a complete style guide for the website. I went with Avenir font. Inter was something that I also considered using initially.

I used a standard 4-point spacing system with a 12 column grid.

06 - SOLUTION - Landing Page redesign

Creating impact through the landing page

Conveying the right things in the Hero Section

It is the place where any website can potentially convert a lot of its visitors all by itself. So naturally, we must get all the components of a standard Hero section right.

The Message - In the old website, it just had a generic sentence calling itself the 'Best'. How can we improve this?

Thinking back to my research, most of the potential customers of weighted blankets were people with high stress levels and had trouble falling asleep.

If we could effectively speak about the impact of blankets on stress/anxiety, it might talk directly to the visitors and get them hooked. So I updated the message accordingly.

The old design lacked a proper CTA, which is ABSOLUTELY critical. Instead, it just had the text 'Buy Now'. Buy what? Considering that Hush sold multiple blankets, it wasn't entirely clear as to which it was referring. I rephrased the text and made it more prominent.

I redesigned the Navbar and removed the CTA with the dollar value since it was unneccessary.

From Generic content to Hush Specific

The old website of Hushblankets was laden with too much text. And most of it was generic information on weighted blankets, which was just a Google search away, or it could be included in the FAQ. So I removed most of the generic information and added content that spoke explicitly about Hush.

One major flaw in the old design was that it did not quickly educate the users on the type of products sold by the brand. So, I added the categories of Weighted Blankets sold by Hush.

Now that they know what the available products are, it's time to highlight why they should consider getting it. I started with the benefits of Hush Blankets and how it differs from other brands out there.

Reducing the Content Clutter

If you see the content in the old design, you can see that it's too lengthy, tedious and just too jargon-heavy.

I dealt with it in the following ways:

  • Visual storytelling is multiple times more effective than texts. In the old design, there were little to no icons or illustrations. I created icons for the benefits section to be more relevant to the related content. In the old design, it wasn't very relevant to the content.
  • I redesigned the benefits points to be present from top to bottom rather than left to right. The main reason was that top to bottom is easier to read. And it's no secret that left-aligned text is multiple times easier to read than long centre aligned.
  • I created a simple illustration to reduce a lot of text. It explains the multiple layers which are present in the blankets.
  • I removed jargon-heavy texts from the homepage content and moved it to a seperate help section.

Invoking Trust

Now the users know what you have to offer.

But still, for the ones who are still in a dilemma, we need to emphasize a little more on the benefits and highlights. And that is where the social proof section comes in.
  • I added a Testimonials section where I had testimonials from Hush customers, both video and text-based.
  • I knew not a lot of people would take the effort of watching a video. So the gist of the testimonial was included as a text in the video thumbnail.
  • Reviews have always had an authenticity question over it. So I added a 'Verified Buyer' icon next to the testimonial giver's name.
  • To add a more informal and realistic social proof, I added a social media feed that would show all the posts that the customers post with a specific hashtag.

New landing page design

07 - SOLUTION - Product page redesign

What would the user look for before pressing the Buy button?

Before starting with the Product page design, I just had one thing in mind. I would do this, not as a 'redesign', but as a completely fresh design. The reason being the old design was terrible with no helpful information at all.

From my competitor study and as well as my experience in designing other eCommerce product pages, I came up with a checklist on the items I'll be having on the Product page.

I reused some of the elements from the homepage in the product page as well. However, the product page components are more tailored to the specific product which the user is viewing:

Product Image and Description:

I used a pretty straightforward split layout with the Product images on the left side.

  • Instead of going with a carousel for the product image gallery, I chose to go with a stacked image layout so that the users are aware of all the images present.
  • On the right side, I started with the review stars and the count, which is an immediate indicator of how popular the particular product is.
  • I highlighted the current price versus the standard price so that the users are aware that they're getting a discount.
  • If customers are not aware of which size/weight variant to go with, I included a guide to help them choose the variant.
  • I showcased some of the perks such as a money-back guarantee and Secured payment portals to emphasize the brand value the users will be getting and increase their confidence.

Increasing Confidence - Benefits, Social Proof and FAQ

These sections were pretty straightforward since I mostly reused the same components from the homepage with the content alone tailored to match the selected product. It would increase the website visitor's confidence in the product and the brand.

I ended the page with the related products section and the footer.

New product page design


Designing for E-Commerce

This was my first website which I designed for a physical E-Commerce store and I got to know about the entire process involved.

Knowledge of the marketing world

I got to know a lot about conversion metrics, designing for FOMO, and used several purchasing triggers throughout the design.


This website was built on Shopify. Hence I got to know a lot about the platform, features, plugins and it's liquid theme language.


This was a great experience working with a new client and a new business area. At the time of writing this case study, this design is on the development cards. So, stay tuned for the outcomes!

More Suggested Projects