DESIGNER FOR THE WORLDS LARGEST PERFECT SLEEP PROVIDERS

A success story in the world of sleep. I was given the opportunity to work with TEMPUR who are a top global brand that have been marketed successfully in both the UK and USA as a high end luxury product. They recreated the mattress using a mixture of materials that allows the customer to create their own mould when lying down, therefore resulting in less movement and pain on their pressure points. Helping to set them apart from other sleep providers.

The Challenge

Whilst TEMPUR is known as an innovative company, areas were highlighted within their website and template used which were viewed as being out dated. Improvements were required with use of style guides and brand awareness to ensure they were inline and exceeding those used by their competition.

It was important that the new website was a responsive website with the latest UI trends, whilst also setting the brand apart. Research was required to determine the requirements of content by focusing on user journeys and what the user experience was. It also needed to be user friendly for individuals with little online experience.

MY ROLE

I managed the UX/UI for TEMPUR. This was achieved by sketching A/B UX changes on a daily basis for morning scrums and then moving on to creating polished UI. Development lead by research findings was also a key role to help the user understand what the company offered and how to proceed with future designs.

The Starting Point

An initial audit was carried out across the TEMPUR website. This included UI/UX, navigation and aesthetics. In order to gain a better understanding of TEMPUR’s demographic and core value proposition. I conducted customer interviews in multiple forms, including interviews and data post-sale surveys for every purchase.

Strategy and Ideation

I began by taking previously collected data (customer interviews, surveys, analytics, etc.) and using it to evaluate the performance of the existing site design. The new design needed to be centred around the user and it had to provide an experience that echoed the quality of the product.

Wireframes

Paper wireframes were produced, covering every single page in the site build. This enabled the sign off from stakeholders and dev teams. This allowed me to create some low fidelity prototypes for use in remote user testing sessions. While communicating the design through wireframes was difficult at times, I was ultimately able to educate the team, and later demonstrate the impact that wireframes have on final designs.

Sitemap

Extensive planning of the site was carried out in collaboration with the TEMPUR stakeholders. The previous site had become bloated over time and a full restructure was essential.

Research

Sector research was carried out to establish functionality requirements and to ascertain gaps in information that was not highlighted in stakeholder research.

CAMPAIGN OFFER PAGE

The existing design had no guide for the user to understand what they were looking for and what they should do to achieve the offer. Clear roundels at the top of the hero banner to indicate that this was a bundle offer was introduced then a infographic that showed what the offer was and how to proceed. New pods were created on the page that sign posted for product cat pages of the website.

MATTRESS SELECTOR

As a portal for users to select from all the mattress collections in the size and how it feels to touch, the page needs to be easy to use. Here we can see how it is used to filter your required mattress preference with a step by step filter.

PRODUCT PAGE

The TEMPUR Products are the most detailed pages and thoroughly scrutinised in the market. Information is readily available. My job was to make it easy to browse on mobiles and tablets. A complete redesign was needed, more padding was given to each section to make it easy to read, new UI assets were used for tabs to show what was selected, buttons were used instead of radio buttons which worked better on mobile. Features tech and an engineering story were introduced to show the benefits

ECOM SHOP PAGE

The homepage is a new ecom centre frequently used by users searching for the shop. The content of the section covers all of the products and there offers. This section therefore had to be easy to browse both on the move and on desktop format.

HOMEPAGE Version 2

We revisited the methodology behind the homepage, looking at what a more ecom led page might look like with larger sign posts to the main product areas. The top hero's was used to manage complex brand tech, history and health benefits. A social space was introduced for case studies. UI full responsive makes the most of the page screen sizes.

PILLOW MICROSITE

For a stand alone pillow website it contains information for traditional, ergonomic and travel pillows, users looking for just pillows could scroll through the home page which would have the ranges and there information. Clicked through to a progressive and simple to use sub cat page with each pillow and its features.

MOBILE CHECKOUT

No responsive mobile checkout had been created so I had to design the user journey. My notes before wireframes included were drops off's, current copy and layout UI, what stage content would be introduced eg paypal pay details. micro animations like show and hide products cart. Amount of content on an each step page, info pods and tracking information.

EMAIL CAMPAIGNS

Working closely with the marketing team, I wanted to give the current emails a face lift introducing a background image, USP icons, case studies and sign posts to the website.

TESTING PAGE LAYOUTS

MVT's testing took place on small parts of the website these were layouts of copy, call to action buttons, built point copy and a filter in the hero. This meant that the checkout was quicker to access for higher conversion’s.

Want to get in touch

Name

First Name

Last Name

Email Address

Subject

Message

tempur