View
user experience design

Customiser for the mattress that keeps everybody happy

Yours & Mine is the dual firmness mattress that keeps everybody happy. As part of a ‘soft launch’ the product was going to be launched in-store. A design for a web app was required for the in-store iPads.

With the initial launch being in-store, it was a unique way to learn from a type of product launch that I hadn’t been part of before.

Launch screen which shows two people in a half pink half dusky grey room. The devide between colour is high contrast to show that there are two sides.
The second screen after being interacted with gives a breakdown of the mattress.

The customisable mattress that keeps everybody happy

Mattress firmness is personal and can be a gamble in many ways. Which is why it’s a struggle many customers face when reaching a decision to buy.

Have a think to yourself, what would make you feel confident in your choice? Add in your partner’s choice and you’re compromising on something as important as your sleep.

That’s where the yours & mine mattress comes in—it makes the choice a little easier.

What if you could get an accurate firmness recommendation?

Tying into this launch Silentnight in partnership with UCLan conducted research into firmness ratings. To gain an understanding of what mattered when it comes to determining the ideal firmness to support your body.

The research concluded circumference of your waist was the main factor to determine the ideal firmness to support your body.

One measurement, that’s all?

Yes a single measurement. Yet, the one measurement brought scepticism with it. You might be thinking something like “you’re telling me height and weight doesn’t come into it?” Correct.

The left sleeper’s measurements, height, weight, size

Feedback suggested asking for waist size alone wasn’t enough to take it seriously. Which is why the quiz is asking for height and weight.

People felt more credibility when there was more information required.

People tend to like a quiz

As a team at Silentnight, we had experimented with various quizzes throughout the website. Interaction, completion and feedback was always positive—it made it an easy decision to go with a similar approach.

The walkthrough style a quiz offers is a nice way to present overwhelming information. You can break it down topic by topic and keep the user engaged with the gratification they receive from the result.

It fits into a store setting, staff are able to guide customers through and use elements on screen to bring in and prompt discussion.

The right sleeper’s name screen. Highlighting that this needs filling out.
The right sleeper’s measurements, height, weight, size. Highlighted is a field that needs filling out.

Though a customer should be able to get through the process without any help if they wish. That’s where error handling was built in to ensure all customers fill out the required details.

All decision making information available

Comfort layers, springs, firmness are all abstract topics that most customers would not be familiar with. Staff would always be on hand to help, but this should be able to address the customers needs too.

A modal window showing information for the science behind the measurements and process of recommendation for yours and mine.
A modal window showing information for comfort layers. There are three comfort layers, geltex, memory and eco.

Make it feel like a joint effort

The photography for the product helped to make a clear distinction—you can customise it on both sides. This influenced my decisions for the design.

An overview screen showing the chosen mattress. With arrows pointing to the relevant area on each side to show the choices made. eg: left side softer and right side firmer. This is before comfort layer is chosen.
The comfort layer choice screen. Three options, gel, memory and eco. Benefits of each are listed.
Final overview screen similar to the previous overview screen. But now highlighting the comfort layer.

It encouraged the transitions between one side of the bed to the other. Which gives an affordance to prompt each person filling out the quiz the side has changed—as well as an element of fun.

The final result

It’s likely customers won’t be ready or convinced to purchase, but the final result offers a way to try capture the customer at a later date or even purchase a different product.

Final result of the mattress topper and individual firmness ratings for each side
A modal can be initialised to email the result to you

designed & built with figma, gatsby & netlify

© 2024mcknny