top of page
Good Sounds
Mobile Audio Application
__________________________________________________________________________________________________
OVERVIEW
I began working on this project in 2023 and worked on it for a few weeks. It is an application for audio tracks which help people relax or fall asleep. The app was designed in Figma. Below you will find a preview of the finished product followed by the process used to create it. This process includes the problem & goals as well as a chronological design procedure which addresses these goals along the way.
PREVIEW
Welcome Pages
Discover Pages
Track & Settings Pages
Search & Favorites Pages
PROBLEM
User reviews of the highest-rated sleep/relaxation applications showed a desire for an app with better navigation, organization, and a similar level of customization as exists in their currently used apps.
GOAL
The goal was to create a new application that addresses the aforementioned issues while maintaining the functionality that makes the existing apps successful. According to user reviews on the app store, existing relaxation apps do a good job of maintaining the quality of sound, choosing a visual theme appropriate for when the app would be used (dark color theme), and offering enough variety to adhere to each user's preferences. Features which could be added to further improve these apps (as suggested by user reviews) were more customization, discoverability, and less text to read when trying to fall asleep. Potential ways to make a more customizable experience were to add the ability to favorite tracks and gather them in a playlist. Similarly, a simple and quick navigation system accompanied by a search feature would help address the issues with discoverability. Finally, a new visual design with only the most necessary text would help remove some of the distractions and help the users fall asleep faster.
Features Table
STYLE GUIDE
To give the app the dark theme desired by users, the color scheme and layout were chosen to resemble that of the night sky. The background color was chosen as a dark blue/purple while the accent colors were light purple to compliment it. The background color also fades into a less saturated version in order to mimic the aforementioned theme of the night sky.
Default Color Guide
Additionally, several accent features matched this theme such as the progress bar on the welcome pages which was made to mimic the traditional imagery of connected stars in constellations rather than a basic rectangular progress bar.
Welcome Page Progress Bar
The patterns and panels of the home page used many rounded edges, and a rounded typeface was chosen to complement this style. However, a sharp sans serif typeface was still used for the most prominent text and welcome pages to help emphasize them along with their size and weight. The rounded typeface used was Dongle, and the sharper typeface used was Sen. The search icon and menu icon were also formatted to accompany these designs.
Sen (H1) & Dongle Typefaces (H2-H4)
SETUP
To avoid finding out mistakes later in the design process, laying out the general locations as shown below gives an idea of a low-fidelity prototype & what the app layout will look like. Shapes with horizontal lines represent text, and those without horizontal lines represent the location and general structure of any icon, button, or extra shape located within a page. This layout was created to give a rough idea of spacing and location.
Low-Fidelity Prototypes
CREATION
Once all features fit appropriately on the pages, next up was creating the finished version of the application. I first completed the designs for the home pages and the playback page as these would appear most frequently. I then continued by designing any additional pages such as the favorites page & settings page.
Finished Figma Pages
When the main designs were complete, I created a set of welcome pages to welcome the user to the app and give a quick breakdown of the available features so that they would not be overwhelmed upon entering for the first time.
Welcome Pages
FINAL THOUGHTS
Overall, I think the project went well. It was fun to switch up the style and make an application with more pages than my first design. This was also the first time I learned a lesson about the importance of constructing low fidelity prototypes. I initially skipped this step and went straight into designing high fidelity prototypes but soon realized that the design I had gone with was not very user friendly and needed to be overhauled. I had already put a lot of time into creating these pages and had to nearly start from scratch in order to ensure the design quality did not suffer. The second time I did not skip any steps, however. This meant I was able to make adjustments as I went and create the design laid out above.
bottom of page