In-house product
Vibelo
A bright, social music app where people stream, share short music clips, build playlists, listen offline, and tip the artists they love—all in one light, joyful interface.
Stream, share, and support the music you love
Neon Harbor · Lumi Vale
Slow Bloom · Oro
Now playing
AFTERGLOWNEW+Afterglow Drive
Nadia Ren · 2.1M plays
Lyrics
+3 listeningWe drove until the city lights
turned into a slow, warm hum…
Playlist
Sunday Drive
24 songs · 1h 22m
Downloaded- Neon HarborLumi Vale3:24
- Paper MoonsThe Kites
- Slow BloomOro4:05
- Afterglow DriveNadia Ren3:41
- Static HeartsMono Bay3:12
- Golden Hour LoopKai & Juno2:47
Overview
What is Vibelo?
Vibelo is a Softrious in-house product for music lovers who want more than a play button. It blends streaming with a social feed: creators post short clips set to tracks, listeners follow them, and every song is one tap away from a playlist. Playlists can be saved for offline listening, so commutes and flights keep their soundtrack. Artist profiles bring followers, popular tracks, and a Tip button together, so fans can support the people behind the music directly. The project covers the whole product: understanding the vision, defining the features and experience that would make Vibelo feel more modern than the usual player, choosing a stack built for smooth playback and scale, and planning delivery in phased sprints across design, development, and quality assurance. It is sized for a compact team—a project manager, backend developers, a frontend developer, and a QA engineer.
The problem it explores
Most music apps treat listening and sharing as separate worlds. You stream in one app, discover through clips in another, and supporting an artist means leaving both. Dark, dense players also make browsing feel heavy. Vibelo explores a single, light experience where discovery, listening, sharing, offline playback, and support for artists live together.
- Type
- In-house product by Softrious
- Product
- Mobile app · Social music streaming
- Platforms
- iOS & Android · Flutter + Node.js
- Scope
- Product strategyBrand identityUX & UI designMobile architectureQA planning
- Related service
- Website & Mobile Development
The challenge
What we set out to solve.
Design one app that feels as fun as a clip feed and as reliable as a dedicated player—with offline listening that just works and a respectful way to support artists.
- 01Turn any clip into a full listen in one tap
- 02Make offline listening obvious and dependable
- 03Give artists a profile that grows their audience
- 04Let fans support artists without leaving the app
Key features
The product, feature by feature.
- 01
Clip feed
For you, Following, and Live tabs with likes, comments, shares, and the track on a spinning disc.
- 02
Now playing
Large artwork, a precise scrubber, shuffle and repeat, and synced lyrics.
- 03
Playlists
Create, reorder, and share playlists, with play and shuffle up front.
- 04
Offline listening
Download playlists and liked songs, with storage shown and clear saved badges.
- 05
Artist profiles
Followers, popular tracks, clips, and Follow, Tip, and Message in one row.
- 06
Tipping
Preset amounts, a personal note, and a wallet—with tips going straight to the artist.
Interface
Nine screens, warm and bright.
A light, paper-warm interface with a sunset gradient reserved for play, follow, and tip. Album art is drawn in code and every artist and song is fictional; portraits are licensed photos of fictional personas.
- 9:41vibelo
Music that moves with your people.
Stream, share clips, build playlists, save them for offline, and tip the artists you love.
Create free accountI already have an accountWelcome screen 01Welcome
A bright mosaic of covers and creators that sets the tone in one glance.
- 9:41vibeloFor youFollowingLive18K4121.2K
Neon Harbor · Lumi Vale
18K4121.2KSlow Bloom · Oro
HomeExploreLibraryProfileFeed screen 02Feed
Short music clips from creators, with the track playing on a spinning disc.
- 9:41
Now playing
Afterglow Drive
Nadia Ren · 2.1M plays
1:24−2:17Lyrics
We drove until the city lights
turned into a slow, warm hum…
Now playing screen 03Now playing
Big artwork, a clear scrubber, one bold play button, and live lyrics.
- 9:41
Explore
Artists, songs, playlistsIndie popLo-fiAfrobeatsR&BTrending this week
See all- 1Neon HarborLumi Vale · 1.4M plays
- 2Paper MoonsThe Kites · 980K plays
- 3Slow BloomOro · 760K plays
- 4Afterglow DriveNadia Ren · 2.1M plays
HomeExploreLibraryProfileExplore screen 04Explore
Genres as colour tiles and a weekly chart, with search always one tap away.
- 9:41
Playlist
Sunday Drive
24 songs · 1h 22m
Downloaded▶ Play Shuffle- Neon HarborLumi Vale3:24
- Paper MoonsThe Kites
- Slow BloomOro4:05
- Afterglow DriveNadia Ren3:41
- Static HeartsMono Bay3:12
- Golden Hour LoopKai & Juno2:47
Playlist screen 05Playlist
Play or shuffle, see what’s saved offline, and share the whole list.
- 9:41
Library
PlaylistsOfflineArtistsLikedLiked songs312 songs · 2.1 GB offline- Sunday Drive24 songs
- Focus Flow41 songs
- Gym Heat18 songs
- Late Night Lo-fi33 songs
HomeExploreLibraryProfileLibrary screen 06Library
Liked songs, playlists, and offline downloads, sorted with simple filters.
- 9:41@ariasings
Aria Cole
Singer-songwriter · Lisbon
48KFollowers312Following86ClipsFollow TipPopular
- 1Paper Moons▶ 980K2:58
- 2Slow Bloom▶ 760K4:05
- 3Afterglow Drive▶ 2.1M3:41
HomeExploreLibraryProfileArtist profile screen 07Artist profile
Followers, popular tracks, and Follow and Tip side by side.
- 9:41
Edit profile
DoneSave changesName
Noah Pierce
Username
noahbeats
Birthday
20 Aug 1997
Favourite genre
Lo-fi & house
Bio
Bedroom producer. Beats for slow mornings and late drives.
58 / 150
Edit profile screen 08Edit profile
Labelled fields, a live bio counter, and a quick photo change.
- 9:41
Support the artist
Aria Cole
100% of tips go to the artist
$5
$2$5$10$20Add a note
“Slow Bloom got me through finals 💛”
Wallet · $24.50ChangeSend $5 tipSecure payment · Refunds within 24 hTip an artist screen 09Tip an artist
Pick an amount, add a note, and send support straight to the artist.
User journey
From a clip in the feed to supporting the artist.
- 1
Scroll the feed
A creator’s clip catches your ear.
- 2
Tap the disc
The full track opens in Now playing, lyrics and all.
- 3
Save it
Add it to a playlist and download it for later.
- 4
Meet the artist
Open their profile, follow, and explore popular tracks.
- 5
Send a tip
Choose an amount, add a note, and support them directly.
Who it’s for
The people Vibelo is designed around.
Every screen was shaped around these user profiles: what they need, what gets in their way, and what the product changes for them.
Aisha
22, student who finds music through short clips
- Needs
- Discover new tracks and save them before they’re gone from her feed.
- Frustration
- Songs she hears in clips are hard to track down and add to a playlist.
- What the app gives them
- Every clip is one tap from the full song and her playlists, offline too.
Kofi
27, independent artist
- Needs
- Grow a following and earn directly from fans.
- Frustration
- Streaming pays fractions of a cent and gives no way to thank supportive fans.
- What the app gives them
- An artist profile with followers, popular tracks and a direct Tip button.
Brand identity
A name, mark, and palette that feel like turning the volume up.
Vibelo’s identity was created from scratch: a vinyl-and-play mark, a sunbeam-to-magenta gradient on warm paper, and a playful, upbeat voice.
Logo
A vinyl disc with a play notch in its label: the record you share and the button you press.
Paper
#FBF8F4
Ink
#1B1622
Sunbeam
#FFB020
Tangerine
#FF5A36
Magenta
#E8336D
Sand
#F4EFE9
Type & feel
Bright, social, turned up.
Design decisions
Why it looks and works the way it does.
Light by design
Most music apps go dark. Vibelo uses warm paper and bright art so browsing feels social and easy on the eyes in daylight.
Gradient means action
The sunset gradient is saved for play, follow, and tip, so the main action on every screen is obvious.
Offline you can trust
Download state is shown everywhere—on playlists, tracks, and the library—so nothing is a surprise on a flight.
Phased delivery with QA built in
Design, development, and QA run in planned sprints, with profile, playlists, offline, and tipping each tested before release.
Proposed architecture
How we’d build it.
A streaming-ready stack with adaptive audio delivery, offline downloads with licence checks, a social graph for the feed, and secure payments for tips.
- 1
Mobile app
Flutter for iOS and Android, background playback, lock-screen controls, and an encrypted offline cache
- 2
Streaming
HLS adaptive audio from a CDN, with signed URLs and pre-buffering for gapless playback
- 3
Social & feed
Follow graph, clip uploads with transcoding, ranked For you and Following feeds, comments and likes
- 4
Offline & rights
Download manager with licence checks, periodic re-validation, and storage controls
- 5
Payments
Wallet top-ups and artist tips with receipts, payout reporting, and fraud checks
Tech stack
Built with Flutter and Node.js.
One Flutter codebase ships the iOS and Android apps, backed by a TypeScript Node.js API, adaptive audio streaming from a CDN, and a payments service for tips. Proposed stack for this product.
Mobile app
- FlFlutterSingle codebase for native-quality iOS and Android apps
- jujust_audio + audio_serviceBackground playback and lock-screen controls
- RiRiverpodPredictable player and app state
- HiHiveEncrypted offline library and download cache
Backend
- NoNode.js + NestJSAPI for users, tracks, playlists, and the feed
- FFFFmpeg workersClip and track transcoding to HLS
- BuBullMQTranscoding, notifications, and feed jobs
- AlAlgoliaFast search across artists, songs, and playlists
Data & media
- PoPostgreSQLUsers, catalogue, playlists, and tips
- ReRedisFeed caching, counters, and rate limiting
- AmAmazon S3 + CloudFrontAudio and artwork storage with signed CDN delivery
- PrPrismaType-safe database access
Cloud & services
- AWAWSContainers, managed database, and storage
- StStripeWallet top-ups, tips, and artist payouts
- FiFirebase Cloud MessagingNew releases and follower notifications
- SeSentryCrash and playback error monitoring
Approach
How we shaped it.
It follows the same delivery model we use for every client engagement.
- 01
Discovery
Align goals, define the product scope, and create a shared roadmap before engineering begins.
- 02
Design
Create a polished interface system, validate flows, and define the experience before code.
- 03
Engineering
Build with clear milestones, visible progress, and maintainable code from day one.
What it demonstrates
- End-to-end product thinking for a consumer music app
- An original light-theme identity: name, mark, palette, and album art
- Streaming, social, offline, and payments designed as one product
- Phased delivery across design, development, and QA
What we’d validate next
- Test feed-to-full-listen conversion with a pilot group
- Validate offline download limits and storage UX on low-end devices
- Pilot artist tipping with a small group of independent musicians
Vibelo is a Softrious in-house product, designed and planned end to end by our team.
From the team
Behind the build.
“We wanted Vibelo to feel light and joyful, not like another dark streaming app. The interesting design problem was tipping: it had to be one tap from the music, never pushy, and clear about where the money goes. Keeping the gradient only for play, follow and tip made those three actions easy to find on every screen.”
Let’s talk
Ready to discuss your project?
Tell us about your goals, timeline, and product ambitions. We’ll help you shape the right next step.
What happens next
- 1Tell us what you needA few sentences about the product, the problem, or the team you want.
- 2A short intro callWe talk through the work, the timeline, and who should be involved.
- 3A clear plan and proposalScope, team, and cost in writing—so you can decide with confidence.