Unwind is a mediation plus stress reducing website, which helps reduce stress with the help of calm music and guided meditation.







scroll down to learn more scroll down to learn more
unwind Click here to view live

Role

Lead Designer/Developer

Responsibilities

Development (HTML, CSS, Bootstrap, JS, jQuery), Personas, Wireframing, Mockups, A/B Testing, User Research, Design Principles, Market Research, User Testing

Tools

Adobe Xd, HTML, CSS, Bootstrap, JavaScript, jQuery, Xtensio

Summary

Unwind is a mediation plus stress reducing website, which helps college students, particular Ithaca college students to reduce their stress with the help of calm music and guided meditation, as well as breathing circle, which helps you regulate your breathing patterns and help you breathe deeply. Meditation has been shown to help people stress less, focus more and sleep better. Unwind is meditation made simple, it helps you relax within a few minutes a day. With a bit more clarity of mind and stress-free state, what couldn’t you do?


Relaxing music which is one of the features of our website has also proven to make us feel peaceful and helps in the production of serotonin to relieve our stress and relieve physical pain. That's not all, music has a huge impact on our brain, and relaxing music does actually make us feel better. For example, there is a well-known theory, although it’s not yet empirically proven about the good that a frequency of 528 Hz can do to our body. These frequencies are known as the Solfeggio frequencies, originally used in Gregorian chants. Whether it’s healing or not, what we do know is that music is capable of making changes in our mind and body. Solfeggio frequencies can help you balance your energy and keep your body, mind, and spirit in harmony.


One of the reasons why we have used the breathing circle is because we want people to understand the importance of every single breath and how deep breathing could help us alleviates stress, improve confidence, and help maintain normal blood circulation. Breathing is free and effortless and with the ambient nature sound in the background, we could deceive our brains into thinking about being in a natural place which is quite rare in this advanced and urbanized world where people don't have time to go in nature and embrace it. Through this website, it’s easy to lose yourself in the pseudo-natural environment for some time. We also use very soothing pictures on our website to accompany the feel of our stress-reducing platform.


On the top of this all, we have also implemented a random positive quote generator, which strives to motivate and inspire the users. According to an article on the Lifehack, “Daily inspirations remind you that you are not alone.”, it will help the users to feel that they are not alone who are struggling with this, but there are many others out with the similar or worse problems. Daily positive quotes also act as a reminder for what we want to chaise in our lives and how to do it; they are a push for something you really strive to achieve in life. We want our users to keep on moving on in life with a positive attitude, even when the times are rough.


One of the reasons why we thought of making something like this is because we both are perfectionists and want everything to be perfect. If by chance something doesn't work out the way we intended we feel very stressed and dysfunctional. Moreover, we stress a lot about menial situations such as coursework in college, future internships, today’s meal, or it could be something really small, but unfortunately, it’s in our nerves to be a little concerned and over-think every situation. Through this website, we were able to reduce stress ourselves as we did find ourselves using this site while doing our homework. For us this has been the most happening and exciting as we created something that could help us and other people around the campus, if they feel the same as us, or for their recreational purposes.

Moodboard

unwind

Personas

unwind
unwind
unwind

WIREFRAMES

unwind
unwind
unwind
unwind
unwind

FUNCTIONALITY

We used basic web development platforms, HTML, CSS, JavaScript, Bootstrap, and jQuery. For making the logos and Mood-board we used Canva app, which is designed to create sleek graphic designs. For the inhale and exhale circle we got the code from the xhalr.com, which allowed us to embed their pre-made breathing circle. For making the personas we used xtensio.com, for the wireframes we used the wireframe.cc. These sites have helped us layout and design the website we intended to make.


Using the basic web development languages helped us create a user experience that we intend while making our wireframes. One of the biggest helped for creating this layout was Bootstrap. Bootstrap helps us implement a very sleek and clearly laid out pages without any messiness. Using the Bootstrap grid system really helped us achieved what we intended for. This also gives the user a wholesome and very polished experience. This makes the navigation in our website really easy, as the things are perfectly aligned at the intentional positions. While the HTML helped in the creation of the basic website, CSS helped us give the style to the HTML page, as well as it gave us some of the animations, which really seems to capture our users. JavaScript and jQuery, on the other hand, help us create interactive pages, which really enhanced the user experience to the whole another level.


Furthermore, the Bootstrap also provide us consistency throughout our website which gives it a similar look on each page, as it helps the user to feel they are on the same site. It really enhances the user experience on our website as it connects everything to one another, even though the pages might have different content.


Also for our blog pages the HTML and the CSS play a really significant role as they help align the content in the required position, which looks visually soothing and very navigable. The JavaScript and jQuery, play a very significant role in helping us create a usable site. JavaScript not only supports web pages but also supports external applications like PDF documents, running widgets, supporting for flash applications etc. JavaScript has emerged in web industry like a boom and if you look at the current web scenario there are no web technologies that are not using JavaScript. Also it is extremely easy to implement and make it workable just like we did in the Unwind page. JavaScript stands unique as it brings out all the special functionalities in the client’s browser instead of the site’s server.

EVALUATION

For the evaluation of this website, we did a focus group, which included people from around the Ithaca College campus. We showed them this website and asked them how they felt while using it and is it good enough to reduce their stress and anxiety. Our participants varied in the ways through which they relax and their sources for stress reduction. We clearly told them what our website intends to do and what our goals were while creating this website.


Most of our participants liked the idea of what we have created and would love to use it regularly. As we were showing them the website they kept of saying how relaxing and claiming this whole experience is. Our participants found our website visually pleasing, which is one of the things we intended and we are successful with that. Because of the soothing visuals, we are able to at least set the calm and serene mood through for our users, which induces the positivity and tranquillity within them. This is a thing one of our participants pointed out while interacting with our website, and this made us as developers feel extremely good about our website.


Our participants liked the Unwind page as they went through the different music tracks, three of them pointed out the music suited whatever the image was used for that and the different tracks gave them a different vibe. Their reactions with each soundtrack and guided meditation changed accordingly, which was interesting to notice. We were pleased by the fact that they pointed out the imagery and the music relatedness, which we really strived to achieve with our own experience, and we can see that it gives the same feel to our intended users. Many of our users like the sound used for the breath page as it is subtle and complements the breathing activity. Five of our participants really like the idea of the positive pop-up, as quotes help us stay motivated and inspire us at the same time. They are a great way to activate an emotional pulse in our hearts and minds when we are in a distressing situation. The right quote can help us to see light at the end of the tunnel, and give us that extra burst of hope and courage to persevere, one of our participants said this.


Indeed, our website was able to get a lot of positive feedback from our participants but there are still some of the participants who gave negative and constructive feedback, which would really help us iterate this website in the future and make it usable for most of the potential users out there. One of the things that the fact that the colors of the content in the toggle menu remains the same when scrolled down, which makes our participates view the content of the menu hard to read on the Unwind page, as they are white in color just like the background, it would be better to change the color of the menu background, but I don't really know how to change it at this point. Four of our participants pointed out the yellow color on the menu links when hovered over should be altered as it blends in with the white overlay in the background, it is something even we think is a major problem for the people who are visually impaired. A lot of work could be done to improve our menu to be honest, as we ourselves are not very satisfied with it, but for the sake of less noisy layout, we thought of implementing it.


Many of our participants don't really know how to use there netID to log into the site, as our log-in form is not working at this moment and we would love to make it work in the future when we gain some knowledge of database systems. Our website would become a lot more usable. This is major thing missing from our website as we need the netId to be able to use the mood tracker. We were able to see the frustrations on people’s faces as they tried to use the log-in form, which is in non-workable condition right now.

MOCKUPS

unwind
unwind
unwind
unwind

CONTRIBUTIONS

"Want To Be More Productive? Listen To The Sounds Of Nature”. Fast Company, July, 2015. Sneed, Annie.

“5 Reasons Why We Should Practice Deep Breathing”, Mind Body Green, Scarbro, Denise

“Why Nature Sounds Help You Relax, According to Science”, health.com, April 05, 2017, MacMillan, Amanda

11 Aug 2014, “The power of pictures. How we can use images to promote and communicate science”, BMC, Balm, James.

“7 Essential Ways That Inspirational Quotes Can Literally Change Your Day …and Your Life!”, Lifehack, Belmont, Judy.

“What are the Solfeggio frequencies?”, Attuned Vibrations