A music-streaming app called Langit Musik

A music-streaming app called Langit Musik

A music-streaming app called Langit Musik

A music-streaming app called Langit Musik

A music-streaming mobile application.

Langit Musik is a streaming music app provided by Telkomsel, the largest telecommunications company in Indonesia with over 150 million customers.

This app celebrates the things Indonesians love about music culture, sharing and recommending, collaborating on crowdsourced stations and riding the wave of new trends.

We were tasked to redesign their app architecture and experience and given the freedom to evolve their brand identity. The product team consisted of two UX designers, an engineer and a UI designer, which was me. My role was art direction of the new identity, and design of the interface and interaction.

This is a showcase of the interface and interaction designs, along with a few snippets of design methods used in the process.

Best Mobile App Platform (2017)

Year :

2016

|

Industry :

Telecommunications

|

Client :

Telkomsel

Roles :

Art direction • Foundation design • Interaction design • Motion • System design • UI

A music-streaming app called Langit Musik

A music-streaming mobile application.

Langit Musik is a streaming music app provided by Telkomsel, the largest telecommunications company in Indonesia with over 150 million customers.

This app celebrates the things Indonesians love about music culture, sharing and recommending, collaborating on crowdsourced stations and riding the wave of new trends.

We were tasked to redesign their app architecture and experience and given the freedom to evolve their brand identity. The product team consisted of two UX designers, an engineer and a UI designer, which was me. My role was art direction of the new identity, and design of the interface and interaction.

This is a showcase of the interface and interaction designs, along with a few snippets of design methods used in the process.

Best Mobile App Platform (2017)

Year :

2016

|

Industry :

Telecommunications

|

Client :

Telkomsel

Roles :

UI • Interaction • Design system • UI • Interaction • Design system

A music-streaming app called Langit Musik

A music-streaming mobile application.

Langit Musik is a streaming music app provided by Telkomsel, the largest telecommunications company in Indonesia with over 150 million customers.

This app celebrates the things Indonesians love about music culture, sharing and recommending, collaborating on crowdsourced stations and riding the wave of new trends.

We were tasked to redesign their app architecture and experience and given the freedom to evolve their brand identity. The product team consisted of two UX designers, an engineer and a UI designer, which was me. My role was art direction of the new identity, and design of the interface and interaction.

This is a showcase of the interface and interaction designs, along with a few snippets of design methods used in the process.

Best Mobile App Platform (2017)

Year :

2016

|

Industry :

Telecommunications

|

Client :

Telkomsel

Roles :

Art direction • Foundation design • Interaction design • Motion • System design • UI

1

Preview

The project was completed within three months, which included app iterations based on client workshops and in-person user testing sessions.

1

Preview

The project was completed within three months, which included app iterations based on client workshops and in-person user testing sessions.

1

Preview

The project was completed within three months, which included app iterations based on client workshops and in-person user testing sessions.

2

Discovery and definitions

A discovery phrase was used to understand the target customer base archetypes, competitor landscape and initial test look and feel. Foundational design methods were also used to support early brand conversations with the client.

2

Discovery and definitions

A discovery phrase was used to understand the target customer base archetypes, competitor landscape and initial test look and feel. Foundational design methods were also used to support early brand conversations with the client.

2

Discovery and definitions

A discovery phrase was used to understand the target customer base archetypes, competitor landscape and initial test look and feel. Foundational design methods were also used to support early brand conversations with the client.

Key personalities

Through workshop with the client, the archetype "Lover" was identified as the favourite, which we then used as guiding points to design the application.

Key personalities

Through workshop with the client, the archetype "Lover" was identified as the favourite, which we then used as guiding points to design the application.

Key personalities

Through workshop with the client, the archetype "Lover" was identified as the favourite, which we then used as guiding points to design the application.

Fun

Fun

Fun

Social

Social

Social

Reliable

Reliable

Reliable

Relevant

Relevant

Relevant

Enabler

Enabler

Enabler

Differentiator

Differentiator

Differentiator

Pairing harmonies

One of the challenges was the client only brand request of retaining the logo and their colours. To evolve the brand and app experience based on this constraint, additional colours were defined using colour harmonies.

Two harmonies were used to define the additional colours, while complementing the brand colours and offer flexibility in UI design.

Pairing harmonies

One of the challenges was the client only brand request of retaining the logo and their colours. To evolve the brand and app experience based on this constraint, additional colours were defined using colour harmonies.

Two harmonies were used to define the additional colours, while complementing the brand colours and offer flexibility in UI design.

Pairing harmonies

One of the challenges was the client only brand request of retaining the logo and their colours. To evolve the brand and app experience based on this constraint, additional colours were defined using colour harmonies.

Two harmonies were used to define the additional colours, while complementing the brand colours and offer flexibility in UI design.

Triad

A triadic harmony is used for its 'pop' factor, based on three colours evenly spaced on the wheel.

Palette

One new colour was defined.

Brand Blue

Brand Pink

Yellow

Brand Blue

Brand Pink

Yellow

Brand Blue

Brand Pink

Yellow

Moodboard

Examples based on the new colour. Triad tends to be visually stimulating and vibrant.

UI application test

Due to its high contrast, all colours were easily identifiable, making them ideal for primary and functional usages which require quicker recognition.

Analogous

An analogous harmony is made of colours between two colours. It can create a combination of edge and serenity.

Palette

Three new colours were defined.

Brand Blue

Brand Pink

Indigo

Midnight Blue

Steel Blue

Brand Blue

Brand Pink

Indigo

Midnight Blue

Steel Blue

Brand Blue

Brand Pink

Indigo

Midnight Blue

Steel Blue

Moodboard

Analogous palettes are easier on the eyes, and better known for pleasing and sophisticated moods.

UI application test

Pleasing to the eye, these colours were Ideal for ambient, secondary and contextual usages.

Defining typography hierarchy and rhythm

Defining typography hierarchy and rhythm

Defining typography hierarchy and rhythm

Typeface

Proxima Nova was chosen as the choice of font for it's geometric appearance, flexibility and well-balanced kerning.

Text hierarchy

A modular font scale of 1.4x was used to define a family of four sizes for the app. Individual line heights were also defined for legibility, decreasing as font sizes increased.

3

Interface and interaction design

3

Interface and interaction design

3

Interface and interaction design

Playing a track

A sine wave animation acts as the track status when the track is played in the Track List view. Tapping on the control bar at the bottom brings up the Music Playback view.

Album covers were presented as a vinyl, with a radial-grooved overlay used to simulate a realistic appearance. Unfortunately, I haven't been able to export a video with the groove details looking obvious. Works well in the app though.

Tapping on the lyrics at the bottom pulls up the Lyrics overlay. Fast-forwarding of the track (or back) can be done by vertically scrolling the lyrics.

Back to the Music Playback view, a longer press on the vinyl activates the track scrubbing function, allowing the user to scrub forwards or back by rotating clockwise or counter-clockwise.

Opening the app for the first time

A blue keyline is used as a visual feedback upon interaction, drawing eye focus to the text field.

Opening the app for the first time

A blue keyline is used as a visual feedback upon interaction, drawing eye focus to the text field.

Opening the app for the first time

A blue keyline is used as a visual feedback upon interaction, drawing eye focus to the text field.

User Profile page interaction

Simulation of the user interacting with their user profile.

User Profile page interaction

Simulation of the user interacting with their user profile.

User Profile page interaction

Simulation of the user interacting with their user profile.

Form focus feedback

A blue keyline also acts as a searching status feedback when a user types into the search field.

Form focus feedback

A blue keyline also acts as a searching status feedback when a user types into the search field.

Form focus feedback

A blue keyline also acts as a searching status feedback when a user types into the search field.

Status feedback

Demonstration of the track statuses when a user downloads them for offline listening – Default, Playing, Downloading, Error, Reloading.

Status feedback

Demonstration of the track statuses when a user downloads them for offline listening – Default, Playing, Downloading, Error, Reloading.

Status feedback

Demonstration of the track statuses when a user downloads them for offline listening – Default, Playing, Downloading, Error, Reloading.

4

Component sheet

Analogous colours worked really well as secondary and ambient colours, allowing triad colours to stand out as primary colours. The visual style also drew inspiration from typography and music elements such as sound waves and vinyl covers. Overall, there was a cohesive aesthetic and function that was complementary and flexible.

4

Component sheet

Analogous colours worked really well as secondary and ambient colours, allowing triad colours to stand out as primary colours. The visual style also drew inspiration from typography and music elements such as sound waves and vinyl covers. Overall, there was a cohesive aesthetic and function that was complementary and flexible.

4

Component sheet

Analogous colours worked really well as secondary and ambient colours, allowing triad colours to stand out as primary colours. The visual style also drew inspiration from typography and music elements such as sound waves and vinyl covers. Overall, there was a cohesive aesthetic and function that was complementary and flexible.