Swayy is a smart mattress that adjusts temperature according to the various stages of a user's sleep cycle. Users can control heat settings with the mobile app.
The challenge
The approach
Leveraging established design patterns, I integrated unique brand elements into a user-centric interface while addressing potential ambiguities to enhance user experience.
With Swayy, we were navigating a novel concept in sleep technology. Without direct competitors, I leaned on ideas from other intuitive apps to guide my design choices. One standout was Shazam, the music listening app. Though unrelated to sleep tech, its straightforward UI and ease of navigation struck a chord with my vision for Swayy.
Using hand-drawn wireframes, two distinct routes were presented to the client, both inspired by Shazam’s overlay concept.
The first organised temperature settings in a bento grid while the second listed them. Route one utilised the client's thermowheel brand device for temperature control, route two turned to a more thermostat-inspired dial. Colour-wise, both versions featured a night-mode theme, nodding to the app's sleep focus.
I used Figjam to present the work with the client and capture feedback.
Instead of sticking strictly with the brand's dedicated font, I chose Apple's SF Pro. This font, designed for digital displays, ensured better readability and alignment with the iOS platform.
Rethinking colour, I moved away from the "night mode" aesthetic idea and integrated Swayy's more vibrant palette to make the app distinct. I used blurs to blend colour, creating a warm glow, and overlaid the fingerprint graphic with a luminosity blending mode to etch it into the colour.
The thermowheel inspired my approach to iconography. Drawing from its characteristic arc design, I used an upward arc to symbolise the upper body (lumbar), and a downward one for the lower body (feet). And with the colours reflecting the chosen temperature, it provided a visual cue for users.
The icons were designed to act as translators, bridging the gap between the brand's unique language and the users' understanding.
With no customers and budgetary considerations, I tapped into our internal team's diverse expertise for testing and feedback.
The brand-centric thermowheel, while visually appealing, was identified as being awkward to use because the thumb had to follow the path of the arc. To enhance usability, I introduced an additional, more familiar draggable interface, positioned where the thumb would naturally land whilst holding a phone.
The settings adjustment overlay was also a point of contention. Whilst the team liked it, they felt clear onboarding steps demonstrating the required interactions would ensure a smooth and informed introduction to Swayy's capabilities.
I also incorporated a small 'i' button into the tiles to clarify the functionality behind the unique naming conventions.