On Boarding-07.png

Shleepy

Self Initiated UX/UI project. Semi Work In Progress, the HTML/CSS/JS components are still in early development.

  About   Shleepy is an application created to relax tensions and stress so that the user can have peaceful and rejuvenating rest. It combines sleep tracking, a curated sound library, a dream journal and meditation courses, to allow a calm space that allows the user to fall asleep quicker and have a better night’s rest     Problem   Due to the daily challenges of modern living, stress and anxiety have made it especially difficult to get deep sleep and proper rest. How can I clear the mind and deliver a feeling of relaxation that allows the user to fall asleep easier and gain quality rest?   Key Pain Points   There are many applications that offer sleep sounds but they also offer plenty of distractions that defeat the purpose of creating a calm environment. Unused features and cluttered interfaces prevent the user from gaining the benefits the applications intend.   The Challenge   The task was to design and develop a calm environment that allows the user to fall asleep faster by curating and organizing peaceful sounds and meditations.   Process   Research - Competitive Analysis, User Interviews, Empathy Mapping, Personas.  Concept - Ideation, Brainstorming, Sketching, Wireframes, Prototypes  Iterative Design - Design, Test, Analyze, Repeat     Survey Questions Asked  -   What Keeps you up at night? What relaxes you? Why aren’t you getting better sleep?    Role     UX : User Research, User Interview, Usability Testing, Iterative Design, Wireframing, Personas, Scenarios, Journey Mapping. User Flows.    UI : Branding, Visual Design, Concept, Ideation.

About

Shleepy is an application created to relax tensions and stress so that the user can have peaceful and rejuvenating rest. It combines sleep tracking, a curated sound library, a dream journal and meditation courses, to allow a calm space that allows the user to fall asleep quicker and have a better night’s rest

Problem

Due to the daily challenges of modern living, stress and anxiety have made it especially difficult to get deep sleep and proper rest. How can I clear the mind and deliver a feeling of relaxation that allows the user to fall asleep easier and gain quality rest?

Key Pain Points

There are many applications that offer sleep sounds but they also offer plenty of distractions that defeat the purpose of creating a calm environment. Unused features and cluttered interfaces prevent the user from gaining the benefits the applications intend.

The Challenge

The task was to design and develop a calm environment that allows the user to fall asleep faster by curating and organizing peaceful sounds and meditations.

Process

Research - Competitive Analysis, User Interviews, Empathy Mapping, Personas.

Concept - Ideation, Brainstorming, Sketching, Wireframes, Prototypes

Iterative Design - Design, Test, Analyze, Repeat

Survey Questions Asked -

What Keeps you up at night? What relaxes you? Why aren’t you getting better sleep?

Role

UX: User Research, User Interview, Usability Testing, Iterative Design, Wireframing, Personas, Scenarios, Journey Mapping. User Flows.

UI: Branding, Visual Design, Concept, Ideation.

 A round, stationary, calm and friendly design was chosen for the Icon. A serif logotype was chosen due to its resemblance of the typography in classic bed-time stories.

A round, stationary, calm and friendly design was chosen for the Icon. A serif logotype was chosen due to its resemblance of the typography in classic bed-time stories.

Style Guide-04.jpg
Style Guide-03.jpg
Style Guide-09.jpg
Style Guide-10.jpg
Style Guide-02.jpg
Style Guide-06.jpg
Style Guide-07.jpg
Style Guide-08.jpg
Style Guide-05.jpg
Shleepy-Loading-Screen-.gif
Shleepy Avatars-02-02-02.jpg
Personas-01.jpg
Personas-02.jpg
Shleepy User Flow.jpg
Shleepy Flow.jpg
flow-01.jpg
flow-02.jpg
Sketches---Shleepy-Wires.jpg
Sounds

Sounds

A variety of sounds were chosen based on sampling of user preferences, and top selections across similar applications. Allowing quick access to categories, subcategories and recommendations, prvovides the user with an easy experience for finding the right sound.

Sounds - Navigation

Sounds - Navigation

Categories with subcategories allow the user find the exact sound. Offering a favoriting option, allows the user to save their sounds for easier acess.

Meditation

Meditation

After analyzing the research, I found the needs of the user to be reducing stress and erasing negative emotions. Meditations help the user relax, and stories allow the user to be distracted from racing or intrusive thoughts, so they are able to fall asleep.

Create Your Mix

Create Your Mix

User Research shows that users prefer the ability to create custom soundscapes that allows them to fall asleep faster based upon their preferences. The variety of sounds allows the user to tailor the mix to their exact preference.

Dream Journal

Dream Journal

Additional features such as dream journaling can help keep a record of the user’s dreams to help keep a track of quality of sleep. Voice recordings are preferable, because writing can be difficult after immediately waking up after sleep - and transcribing provides clarity for the sometimes difficult to understand audio.

Dream Journal Low Fidelity Prototype

Through iterative design process I went through various tests as to which background color should be used for the “record/journal dream” function.

Profile

Profile

Allowing the user to have access to data relating to their summary and sleep history allows them to see progress and gain insights into their sleep patterns. Health information is also taken into consideration.

Alarm

Alarm

A built in alarm allows streamline access to a rating system that immediately takes a rating of the User’s sleep quality and a button with less importance on snooze, is designed to help the User wake up on time.

 Main Landing Page with clear CTA’s.

Main Landing Page with clear CTA’s.

 Navbars, Login Menus, Buttons are currently being developed in HTML/CSS and & Vanilla JS. The UI was developed using Adobe Illustrator/Adobe XD.

Navbars, Login Menus, Buttons are currently being developed in HTML/CSS and & Vanilla JS. The UI was developed using Adobe Illustrator/Adobe XD.

Treatment Of Visual Images

 Contrast between focused, singular images and wider, semi abstract images.

Contrast between focused, singular images and wider, semi abstract images.

For the A/B Testing phase I tested one of my assumptions that the user might be able to focus more on the content, without the distraction of images.

Images work better for something like Apple Music, Spotify, or CDs or Vinyl Records because you an introducing something new: A new person, a new genre or a new sound. The difference (and another assumption) here is that the sounds are already familiar to the user, and they won’t need the visuals as much.

Future Recommendation

Illustrating icons would be greatly beneficial for providing a more seamless experience. Also, it would be great to continuously, through various iterations, simplify the information hierarchy.

Conclusion

The app presented it’s challenges but the result is a space that provides the tools for a better nights sleep. Combining User Research with Visual Design resulted in a minimal and organized experience for the user.

Future Recommendations

Features that allow for downloading of sounds would reduce dependency on internet connection. Additional features such as more in depth analytics of sleep tracking and an addition of watchOS, could provide real benefits to users attempting to track their sleep.