WILDSOUND
THE CALDA
MOBILE
Relax with WildSound's serene river and rainforest sounds. Enjoy a dynamic, immersive experience with customizable intensity and intention filters.
01
Meet the client
WILDSOUND
The modern world has distanced us from nature, particularly the life-giving soundscapes of rivers and rainforests. WildSound offers authentic soundscapes from named and geolocated rivers and rainforests while providing the means for users to participate in real-world conservation efforts with NGO partnerships.
Features Features Features
Homepage
On the homepage you can choose between Rivers and Rainforests but to make a selection you will to press and hold the item until the circle is loaded.
Light and dark modes
In the Onboarding section and in the Profile menu as well, the user can choose an organisation to support.
Choose organisation
In the Onboarding section and in the Profile menu as well, the user can choose an organisation to support.
Long press
In the Onboarding section and in the Profile menu as well, the user can choose an organisation to support.
Save sounds
Save your preferred sounds for easier access and create your own personalised list.
Parallax effect
Just another extra feature that puts a lot of emphasis on great user experience. As you move your phone, the river image will move with it.
WildSound
Design approach
APP MADE TO CALM YOU DOWN
The app is all about calming the user down, which is why we had to go against your modern UX principles which dictate quick access and techniques to keep people within the app. WildSound does the opposite - it calms the user down. It’s designed for slow use and mindful experience.
1 DISCOVER
User research, analysis of good practices and competitors.
2 USER FLOWS
Deep diving into the app structure, its features, and usability.
3 WIREFRAMES
Early-stage visual representations of a product’s layout.
4 UI DESIGN
We kept the app simple as the main focus is on natural sounds.
5 DESIGN SYSTEM
A comprehensive set of guidelines that encompasses a collection of reusable design elements.
SLACK | GOOGLE MEET COMMUNICATION THROUGHOUT THE PROJECT
02
User flows
DEFINING APP ARCHITECTURE
This step allows us to dig deep into the app structure, including all the needed features and possibilities for the user. It is such an important part of design as it gives us a perspective on the product’s complexity. It lets us organise and prepare for the following steps.
MAPPING OUT THE CORE STRUCTURE
Wireframes
Wireframes are early-stage visual representations of a product’s layout. Here we designed the first ideas to roughly visualise how the app would work in order to achieve the best user experience possible. The first wireframes are created with minimal detail, using basic shapes and placeholders to represent different elements like text, images, buttons, and navigation menus, later on we add more characteristics to visualise the individual features.
03
UI Design
DEFINING DESIGN DIRECTION
After the well thought-out wireframes we started by choosing our design direction. We kept the app simple by only adding some of the dark green colour to resemble the feeling of nature. Two versions of app were designed: light mode and dark mode, based on the user phone settings. We strived to achieve a coherent and intuitive visual appearance but also modern and attractive design at the same time.
/ FONT FAMILY
Aa
/ Inter Tight
Designed by
Rasmus Andersson
Rasmus Andersson
This is a specialised version of Inter with tighter spacing, for display usage. This version also has Roman and Italic styles. The typeface contains 20 files and supports 79 languages.
A B C D E F G
H I J K L M N O P Q R S T U V W X Y Z
H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u vw x y z
/ COLOUR PALETTE
04
Supabase & integrations
SCALABLE AND SECURE BACKEND
As client’s goal from the beginning was to scale the application for users all around the globe, we had to find a flexible and scalable backend that would support the growth. Supabase was a no-brainer, as it allowed us to build the backend quickly, while offering great scalability and security. Supabase’s slogan is “Build in a weekend. Scale to millions.” and the product is not far from the statement.
1
Apple and Google user auth for quick login options.
2
Integration with RevenueCat for in-app purchases to support NGO partnerships.
3
Custom Supabase functions to randomise rivers & forests sounds.
4
Flexible database design to support easy data management and future requirements.
5
Row-level security for secure database access.
6
Bucket storage for all available rivers and forests sounds.
05
FlutterFlow
USER EXPERIENCE CENTRIC FRONTEND
As client’s goal from the beginning was to scale the application for users all around the globe, we had to find a flexible and scalable backend that would support the growth. Supabase was a no-brainer, as it allowed us to build the backend quickly, while offering great scalability and security. Supabase’s slogan is “Build in a weekend. Scale to millions.” and the product is not far from the statement.
06
Custom components
CUSTOM COMPONENTS FOR BETTER USER EXPERIENCE
The app is all about the experience. Reconnecting peoples’ minds with nature with a simple meditation app wouldn’t do it. We had to create an immersive experience that would transport your state of mind into peaceful environment that actual rivers and forests have to offer. To do that, we had to go outside of what FlutterFlow offers out-of-the-gate and develop some custom components in Flutter. Luckily, FlutterFlow allows you to do that!
Let’s start building.
Let’s start building.
Jump on a call with our CEO to discuss your idea in more detail 🧡🐙!
