Two Hoo Hoo Sleep app screens on iPhones White noise Cozy 😴 😴

Hoo Hoo

A sleep app designed to create a
calming visual experience and
improve sleep quality.

Meditation

Personalized Sleep · Accurate Data · Intelligent Sleep

Meditation is a mobile app designed to improve sleep quality. It combines a range of sleep-support features to help users fall asleep faster and enjoy a better overall sleep experience.
The app offers more than 1,000 natural sounds, including white, pink, and brown noise. Users can play up to three sounds simultaneously, creating over one billion possible combinations for a highly personalized sleep experience.

Meditation app competitor cloud sleep visual

Competitive
Product Analysii

Sleepo

Personalized Sleep · Accurate Data · Intelligent Sleep

Xiao Sleep is a mobile app designed to improve sleep quality and help users fall asleep faster. It combines multiple sleep-support features with over 1,000 natural sounds, including white, pink, and brown noise. Users can mix up to three sounds at once, creating more than one billion personalized sound combinations.

PROJECT BACKGROUND

Project background notebook with sleep health market pain points, technology opportunities, and project positioning

LOGO DESIGN

The symbol is inspired by the product's IP character and incorporates a sleep mask, expressing the wish that everyone can enjoy a good night's sleep.

Hoo Hoo Sleep logo concept on a soft white background
Bedroom lifestyle reference used in the logo design board
Dark phone mockup with the Hoo Hoo Sleep app icon
Blue Hoo Hoo Sleep app screen crop in the logo design board

Design Concept: Koalas sleep for up to 18–20 hours a day, making them a natural symbol of rest and sleep. By using a koala character, the app clearly communicates its brand ideas of deep relaxation and natural sleep. Its rounded body, large ears, and adorable expression create a friendly and approachable visual identity while reinforcing the brand's core values.

Hoo Hoo Sleep koala character front, side, and back views
Sleeping koala reference
Sleep mask reference
Sleeping person reference
Clouds reference
Hoo Hoo Sleep app mascot reward screen held in hand
Hoo Hoo Sleep mascot resting in a grassy scene

MASCOT DESIGN

Integrating the mascot into the interface strengthens brand recognition, creates a memorable visual identity, and brings the product closer to users.

IP OUTFIT STYLING

Enhance the IP character's personality and emotional expression through diverse outfits and scenarios, while improving brand recognition, freshness, and adaptability across campaigns, festivals, and product experiences.

Hoo Hoo Sleep koala in classic sleep outfit on a blue tile Hoo Hoo Sleep koala in explorer outfit on a green tile Hoo Hoo Sleep koala in purple sleepwear on a pale blue tile Hoo Hoo Sleep koala in frog outfit on a yellow tile Hoo Hoo Sleep koala in frog outfit on a yellow tile Hoo Hoo Sleep koala in pink outfit on a purple tile Hoo Hoo Sleep koala mascot
Hoo Hoo Sleep empty state screen displayed on a phone held in hand

EMPTY STATE

Integrate the IP character into the empty state, using emotional design to soften the blank space, highlight the brand identity, reduce user anxiety, and encourage further interaction.

Hoo Hoo Sleep empty search result UI card
Hoo Hoo Sleep empty message UI card
Hoo Hoo Sleep missing item empty state UI card

LAUNCH SCREEN DESIGN

Through character design, motion, and brand visuals, users can quickly sense the product's identity and build a memorable first impression from the moment they open the app.

Hoo Hoo Sleep launch and login screen phone mockups

For goal-oriented users, the top of the home screen highlights three core features: Audio Mix, White Noise, and Sleep Tracking, reducing information overload. Users without a specific goal can scroll down to explore additional features.

Hoo Hoo Sleep home screen design overview
Come share your sleep journey in Sleep Circle.
Hoo Hoo Sleep community feed phone interface
Hoo Hoo Sleep community design network graphic
Hoo Hoo Sleep community illustration panel

Users can share sleep stories, music, and insomnia tips, creating a supportive community that makes the experience more engaging and improves retention.By combining social interaction, professional guidance, and emotional support, the platform helps users sleep better.

Night rain sleep music card
夜雨促眠 夜虫唧唧 | 雨打芭蕉
Misty rain music card
雾淞雨露 雨打芭蕉
Jiangnan rain music card
烟雨江南 红泥小炉
Sleep well in the rain music card
雨中好眠 夜虫唧唧
Hoo Hoo Sleep music player phone interface

TPLAYER INTERFACE

To ensure easy maintenance, visual appeal, user engagement, and clear content presentation, the interface adopts a card-based layout.

Daily Dreams
Hoo Hoo Sleep Daily Dreams recommendation card
Two Hoo Hoo Sleep app screens showing sleep sound recommendations
Hoo Hoo Sleep playlist item speech bubble

The page is divided into sections such as Featured Picks, Nature Sounds, and Community Sharing. Card-based layouts create a clean visual hierarchy and improve the overall user experience.

SLEEP TRACKING DESIGN

Day and night modes, paired with intuitive swipe interactions, simplify starting and ending a sleep session. Clear visualizations of sleep duration, bedtime, and wake-up time help users quickly understand their sleep patterns and improve tracking efficiency.

Hoo Hoo Sleep night mode sleep tracking phone screen
Hoo Hoo Sleep sleep duration record phone screen
Hoo Hoo Sleep day mode sleep tracking phone screen
Hoo Hoo Sleep check-in rewards phone screen
Hoo Hoo Sleep daily task reward card
Hoo Hoo Sleep points exchange store card
Check-in page design explanation panel
Hoo Hoo Sleep report phone screen with sleep behavior indicators
Sleep activity analysis card
Phone usage indicator card
Music playback history card

Sleep indicators such as physical activity, phone usage, and music playback history help users assess their overall sleep health.

This provides a convenient way to observe sleep-related behaviors and understand sleep patterns from both physiological and psychological perspectives. However, the data should be combined with other metrics for a more accurate evaluation of sleep quality.

Did you sleep well today?
Hoo Hoo Sleep koala mascot

DATA VISUALIZATION DESIGN

Based on the product positioning and user insights, a visual system was created to reflect the calm and soothing nature of a sleep product, including the primary color palette and layout structure.

Day, week, and month tabs allow users to review sleep data across different time periods.

The sleep score is placed at the center, giving users a clear and immediate overview of their sleep quality.

Hoo Hoo Sleep sleep score data card
Hoo Hoo Sleep sleep stage chart card

VIEW MORE WORK

Back