Wakefit
Mobile first, life-like
shopping experience
Making online mattress buying as tangible, intuitive, and life-like as trying it in person.
Overview
Our vision for Wakefit’s visual upgrade was to bridge the gap between online browsing and real-world mattress shopping by making the experience immersive, intuitive, and life-like. By simplifying information, adding guided recommendations, and enhancing mobile-first interactions, we transformed the shopping journey into one that feels as natural and confident as testing a mattress in person.
Information Architecture
Visual Language
Illustration
3D Animation/ Interaction
Motion Design
Aug - Nov 24
OUR VISION
To seamlessly translate the physical essence of a mattress into a mobile-first experience, making online buying as tangible, intuitive, and life-like as trying it in person.
Setting Design Constraints
Our vision for Wakefit’s visual upgrade was to bridge the gap between online browsing and real-world mattress shopping by making the experience immersive, intuitive, and life-like. By simplifying information, adding guided recommendations, and enhancing mobile-first interactions, we transformed the shopping journey into one that feels as natural and confident as testing a mattress in person.
Mobile First Experience
Highest percentage of user explore and get know about products on mweb
Hero First Product
Treat each product as a hero product highlight the best features of each
Focus on one category
Get the information/ visual language right, extent this across other categories
Switch b/w pages
Most conversion is won or lost between landing and details pages
Wireframes
We visualised the wireframes with not just the structure in mind but also the story and interaction that unfolds on each page, keeping in mind the information architecture that was drafted
Building an experience from a story
The main challenge was representing the mattress form effectively on a mobile screen. We solved this by isolating a cube of the mattress, using it as the focal point to build an engaging product story.
Visual Language
We established self-imposed design constraints to streamline creativity, focusing on a single direction: making the mattress form factor intuitive and lifelike on mobile, ensuring every decision enhanced the immersive shopping experience
We established self-imposed design constraints to streamline creativity, focusing on a single direction: making the mattress form factor intuitive and lifelike on mobile, ensuring every decision enhanced the immersive shopping experience
We designed the UI as a subtle framing device, allowing the products to take center stage. This approach ensured a clean, minimal interface that felt intuitive and user-friendly.
Made with thought, love & care by Liquidink Design
Areas Covered:
Information Architecture
Visual Language
Illustration/ icons
Motion Design
Work with us