Relaxingsounds

Overview

Relaxing Sounds is a free web app and provides some relaxing sounds. In this case study, I will describe the UX story behind this creative project.

Role

Persona Development, Information Architecture, Sketching, Wireframing, Prototyping, UI, Development.

Tools

Pen & paper, Balsamiq Mockup, Adobe XD, Visual Studio Code.

The challenge

The challenge was to create a web app with some relaxing sounds with some animated background images. The visitor can choose the relaxing sounds and play with the values.

Hight Level Goals

1. Understanding user needs.
2. Choose the sounds from a variety of relaxing sounds
3. Create Sketch and Wireframes.

Relaxingsounds

Relaxingsounds is a free background noise generator with a selection of seven high-quality sounds that you can mix and match as you like. The relaxingsounds UX/UI Case Study explores the UX path of how I created this creative project.

Discovery

I used a persona. Derik helped me a lot to understand the user needs and on the other hand to find the goals of relaxing sounds.

Derik user persona
Derik, the user persona.

How might we..

  • Basically, help Derik to remember and not forget his home ciry?
  • Help Derik get the option relaxing sounds directly to his browser?
  • Finally, Derik get th option to mix and control the sounds?

Brainstorming

In the first place, I started to write down the sounds that it can be possible to include. Basically, the sounds were from nature like sea, leaves, storm, summer night, etc. In this case, I decided to include some of these sounds. On the other hand, I decided to include some background images which are meant to give the visitor a sense of relaxation even more. With this in mind, I included seven sounds.

Brainstorming the sounds and images
Brainstorming

Based on the above study I finally chose seven sounds. These sounds were: rain, the thunder, the ocean surf, the river, the bird, the frog and finally the seagull.

Ideation

I wanted to find an efficient wat of communicating design, so I used UX sketching. Basically, I generated multiple ideas but I decided the sketch below is the most efficient in the context and the various constraints of the project.

Sketching

As shown above, I started with braistorming. The next step was to start generating the idea, so I implemented the UX sketching.

Sketching the relaxing sounds
Sketch

Wireframes

Using Balsamiq Mockup I created low-fidelity wireframes. Given these points, the wireframes focus on the front page of the project. In fact, it provides only one page, where the visitor can easily control the content of the sounds.

The mmi-fidelity prototypes
Wireframes of relaxings sounds

UI

Gradually, reaching out relaxingsounds UX/UI case study, one of the final step was to create the high fidelity prototype. The mockup is minimal and requires only one page where the visitor can control the sounds.

The High Fidelity Prototype
High Fidelity Prototype

Recap

Creating this web app was certainly a creative project. Basically, every sound has a specific role in psychology. With this in mind, it is important to be careful when you want to include in a project. Through the main UX process and I really enjoyed implementing the relaxing sounds.

Next steps

Although the project concluded with this type of persona and on the other hand, with this prototype, I could still continue improving the design and the testing. Maybe the existing aesthetic is out of date, but I’m sure that the next step would be to hand-off the sounds in a more general context.