Revolutionizing Sleep: The KM05

Designers Tomoatsu Hattori and Keisuke Kitamura's Innovative Approach to Website Design

The inspiration for KM05 came from the fact that the average person twists and turns in their sleep over 30 times per night. This led Hattori and Kitamura to create a scrolling action that mimics this movement, providing a visual representation of a person waking up from a pleasant sleep. Each click of a button on the website represents a movement during sleep, and the time advances according to the number of buttons pressed. This innovative approach to website design aims to enhance the understanding of the users of their product by presenting it in a bold and striking way.

The realization of KM05 was a meticulous process. The designers picked models such as gymnasts and dancers to represent the turning over of a body during sleep. They verified details to see what form of the body looked like turning over, and shot many times. The background of 60 photos was cut out and made transparent, and implemented above the contents. A cache was prepared in advance to make images easy to load, even in slow processing environments on a PC.

Technical specifications of the design include linking the passing of time and the movement of a person with the scrolling of the mouse. Every time a button at the center of the page is pressed, it expresses each movement during sleep and the time advances according to the number of buttons pressed. To express the tossing and turning person during sleep flying freely on the screen, the designers cut out the background of 60 photos and made them transparent, and implemented them above the contents.

The design was launched in Japan and later exhibited at the NY Now expo in New York. The designers visited several home furnishing stores and bedding stores in New York and Los Angeles to get feedback on their product. The underlying research for this design was based on the economic loss caused by sleep deprivation in the United States and Japan, and the importance of quality sleep.

The KM05 design has overcome creative, technical, and research challenges to express the tossing and turning during sleep. The designers implemented details to get people who saw the site feel the atmosphere of sleep, such as parallax according with the scrolling of the mouse, waveform of background and easing when moving between sentences. This Design was awarded Golden in A' Website and Web Design Awards in 2017, recognizing its innovative approach to website design.