Emma Design Challenge

Vision
We make a positive impact on people’s lives by enhancing their sleep.


Problem
Emma Sleep is known mainly for their mattresses, but the website also offers other sleep products such as beds and pillows.
How can you improve the website to highlight the three hero products?
How can you showcase a premium product in the website? How can you upsell the user to the premium product?
What is a pain point you observed in the website and how would you improve the user experience?


Research - The Why
An in-depth look at how each aspect of your bedroom setting influences how well you sleep.
According to the Sleep Foundation, a relaxing environment is essential for a good night’s rest. Studies have shown people simply sleep better when their bedroom is optimized for light and noise levels, temperature, and comfort. And since sleep quality and duration are directly tied to other aspects of human health, a bedroom environment that promotes sleep can also improve how you feel while you’re awake.


Challenge - The What
We understood that in order to design a relaxing bedroom, we should take a few important factors into account. To re-create such a unique experience in our website, our task is to balance images, colours and all the elements appearing in the website environment. A must is to give the right space to each element involved.


Solution - The How

Temperature: we are going to expand the palette startig from the main two colours (Navy Blue and Orange). With a bigger range we will be able to avoid that strong contrast, which is visible today in the current website.

Noise: too many elements at the same time, in one website section, can be counterproductive. Better to visualize an element (or group of elements when part of the same concept) at the time and focus on their main aspects.

Light: an idea could be on setting up a night timer, e.g. from 10 pm to 8 am, when the website avoids blue light. Another option could be the possibility for the user to turn on the dark-mode, a feature in line with the company spirit.

color-palette

Highlighting the spots
Analyzing the current website we can ping some crucial pain points, in order to help ourselves on how to take action.

Our-Website

First steps into prototyping
Sketching on paper is always a good approach to immediately visualize what we have in mind for our product evolution. With further iterations, this first attempt will be changed during the design construction. At least we can define our layout and structure the main areas/sections.





wireframe-1e2

Layout

UI process
After some benchmarking we are able to tackle the UI of our website. Comparing other similar websites help us on thinking what features suit us best and we can align them to our Vision and Visual Design.





New-Design




Emma main products interaction
With having all the three products in a section that takes over the entire device screen height, we are basically telling to our user how good they can fit together. We do not necessarily need to show the actual bed or pillow, the main menu is following us for that purpose. Instead we should focus on the storytelling and the feeling or perception that we want to transmit.


Hero




The premium product
Playing the discovering game with our users is always a optimal feature to explain WHY they should buy our product instead of another one. The user achieves a result interacting with the object on the screen, that shows with transparency all the aspects of each layer.





premium




Plus section
Even if this is not relevant for the purpose of selling, the dark-mode toggle is nevertheless considered already a common website feature. This is a friendly way, in line with the company business, to rob a smile to our users and possible future customers.





dark-mode

dark-mode-v1-720

Thank you