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 for Telkomsel that 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 redefine the app architecture and experience from their first version of the app, and were also given the freedom to evolve their brand identity that was starting to look dated. My roles were art direction of the new look and feel, and the design of its interfaces and interactions.

The application was completed within three months, including client workshops and many in-person user testing sessions.

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 for Telkomsel that 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 redefine the app architecture and experience from their first version of the app, and were also given the freedom to evolve their brand identity that was starting to look dated. My roles were art direction of the new look and feel, and the design of its interfaces and interactions.

The application was completed within three months, including client workshops and many in-person user testing sessions.

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 for Telkomsel that 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 redefine the app architecture and experience from their first version of the app, and were also given the freedom to evolve their brand identity that was starting to look dated. My roles were art direction of the new look and feel, and the design of its interfaces and interactions.

The application was completed within three months, including client workshops and many in-person user testing sessions.

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

1

Preview

1

Preview

2

Discovery and definitions

A discovery phrase was required to understand the target customer base archetypes, competitor landscape and initial look and feel. Early foundational design was also used to support the brand conversations with the client.

2

Discovery and definitions

A discovery phrase was required to understand the target customer base archetypes, competitor landscape and initial look and feel. Early foundational design was also used to support the brand conversations with the client.

2

Discovery and definitions

A discovery phrase was required to understand the target customer base archetypes, competitor landscape and initial look and feel. Early foundational design was also used to support the brand conversations with the client.

Key personalities

The "Lover" was identified as the target archetype through workshop engagements with the client, which we then used as a starting point to design the application.

Key personalities

The "Lover" was identified as the target archetype through workshop engagements with the client, which we then used as a starting point to design the application.

Key personalities

The "Lover" was identified as the target archetype through workshop engagements with the client, which we then used as a starting point 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 objectives was evolving the brand and app experience with a request to keep the brand logo and colours. Additional colours were defined to complement the brand colours and offer greater flexibility in design.

Two harmonies were used to define the additional colours.

Pairing harmonies

One of the objectives was evolving the brand and app experience with a request to keep the brand logo and colours. Additional colours were defined to complement the brand colours and offer greater flexibility in design.

Two harmonies were used to define the additional colours.

Pairing harmonies

One of the objectives was evolving the brand and app experience with a request to keep the brand logo and colours. Additional colours were defined to complement the brand colours and offer greater flexibility in design.

Two harmonies were used to define the additional colours.

Triad

A triadic harmony is made of 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

Triad palettes have a pop energy. They tend 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.

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. Individual ine heights were also defined for better legibility, intended to decrease 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. When combined, together, there was a cohesive aesthetic that both complemented and evolved the brand through the application.

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. When combined, together, there was a cohesive aesthetic that both complemented and evolved the brand through the application.

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. When combined, together, there was a cohesive aesthetic that both complemented and evolved the brand through the application.