Melo Music

Role

Product Designer

Client

Melo Music

Year

2023 - 2025

Tools

Figma, Photoshop

Rebuilt Myanmar's well-known music streaming app around a single player — five content types, shipped live in stages across two years.

What's Melo Music?

Melo is Myanmar's one of the music streaming services — and "streaming service" undersells it. It streams, but it also sells: subscriptions by the week or the year, albums bought outright, songs turned into ring-back tones, karaoke, live performances.

That spread is arithmetic, not ambition. Subscriptions alone don't carry a market where most people don't hold a payment card. So Melo takes money seven ways and gives people more than one thing to spend it on. Five content lines, one app, almost entirely Android.

A revamp that wasn't a revamp

The CEO asked for a new look, a podcast section, and a feed.

I used the app daily for a week before answering. The new features weren't the problem. Five content types had been stacked onto a player built for one, added year by year, none designed against the others — podcast controls borrowed from music, karaoke opened somewhere else entirely, and the queue sat on its own screen, so changing what played next meant leaving what was playing.

Podcast and feed wouldn't make that worse. They'd make it impossible to ignore.

One Player, Five Modes

The old player carried five icons under the transport controls, including Ringtune — a paid product — as an unlabelled phone glyph, and a pill reading "lyrics not available" in the most visible slot. The row was also full, with karaoke, live and podcast still to come.

I replaced the icons with a labelled rail: Ringtune, Lyrics, Karaoke, Comment. Playback stays identical across every content type, so a new mode means a new chip rather than a new player. Alongside it, the background now draws from the cover art, the title sits left with like and overflow beside it, and the audio quality badge moved onto the progress bar.

The trade-off is visibility. The rail scrolls, so the fourth chip falls off-screen on smaller devices — karaoke sits at that edge. A fixed row showed everything at once; I chose a system that could grow.

One Library, Not Two

Library is the most-used screen after the player, and podcast was the thing most likely to split it. Instead of a separate section with its own shelves and downloads, podcast became a tab — Playlists, Songs, Albums, Artists, Podcasts — sharing the same header, search, sort and row layout. Shows sit beside albums, downloads stay in one place, and a single toggle lets a playlist hold songs and episodes together.

Store For Music Lovers

Most people in Myanmar don't hold a card, so subscription alone can't carry the business. The Store sells albums outright — and had to accept payment from Apple, MPT, KBZ Pay, four wallets and cards without turning the choice into a wall of logos. I grouped the wallets behind one row, marked which methods auto-renew, and kept the ownership state visible in the grid, so a purchased album reads as owned rather than as something still for sale.

Live & Videos

Live is the one content type the shared player couldn't hold. Audio playback assumes the screen is secondary — video makes it the whole point, and a live show adds a comment stream that competes with the frame for the same space. So Live got its own surface, with the comment rail moving from a stack beneath the video in portrait to a side panel in landscape, and the controls reduced to a count, a runtime and three icons over the frame.

The System Underneath

Melo had no design system. Five content types, two years of staged releases, and no shared definition of a button, a row, or a sheet — every feature was drawn from scratch and matched by eye. I started with semantic tokens: colour, type, icon and spacing named by purpose rather than value, so changing one intent couldn't leak into another. Type was the hardest foundation, since Burmese and Latin had to share a single scale without either breaking, and that set the line heights everything else was measured against. [Contrast against album-art backgrounds.]

Components and handoff

Components followed in four levels — atoms, molecules, organisms, templates — so a new screen was assembled rather than drawn. Every screen shipped with written annotations: states, spacing, behaviour, and what to show when content is missing. A developer built from those specs across two years of releases.