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.


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


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 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.


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 Fernantes the user persona of relaxingsounds
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?


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, based on my persona I decided to include some of these sounds. I wanted to give the sense or relaxing so I included some background images. With this in mind, I included seven sounds total.

Brainstorming the sounds and images

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.


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.


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


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


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


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.