Ragya
Founder, Chief of Design • Dec 2018 - Current
Ragya is the beautiful product of meeting of my love for music and design. Working on Ragya is taking me deeper into product design, research, product management, leadership and over and above everything, to believe in my dream.
Problem Statement
Indian art music is lost amidst millions of songs and the many popular genres across all the generic streaming platforms.
Further, it's inaccessible to the masses due to its legacy and apparent complexity.
For the patrons, connoisseurs and artistes, there's no single democratic online platform.
My Role
Design
1. Research & Discovery
2. Prototyping
3. Testing
4. Visual Design
5. Handoff
Outside of design
1. Leading team Ragya
2. Product vision and roadmap
3. Managing the development team
4. Managing relationships with the community
5. Customer support
G L O S S A R Y O F T E R M S
Prahar Time section of the day. There are known to be 8 prahars in the day.
Raga Framework of notes in Hindustani classical music
Rendition A song rendered in a Raga
Artiste A skilled adept public performer
Gyaan Knowledge or theory
The beginnings
Ragya Prahar* 1.0
Problem Statement
Most ragas are best enjoyed simply by Prahar. However, there is no way for a connoisseur to enjoy this simplicity so far. Additionally, listeners end up listening to familiar pieces on generic content platforms, or, to music stored on their devices.
Core concept
The Prahar
It is well-known that most ragas (frameworks of notes) are best enjoyed in certain times of the day. So, there are ragas that are quintessentially morning ragas or evening ragas, and so on... for the 8 time sections of the day. This is the simple idea on which Ragya is based, and which makes it a don't-make-me-think app.
An unaddressed void
The core issues
Problems identified
1. Raga music is best heard based on the prahar
2. There is no single democratic online space for potentially any classical rendition to be found
3. Even if the listener would search and play a rendition from a generic content platform based on the prahar, since the platform would not be built according to the prahar system, it would eventually break the 'sanctity' of the desired experience
4. Most connoisseurs are limited to either their locally stored collection or to familiar/popular names
Personas
Connoisseur
A connoisseur typically is someone who has gigabytes of classical music stored locally, organised into folders of either ragas and/or artiste names. Their organisation is complemented by their knowledge of the ragas. Their journey for enjoying raga music looks like:
Amateur
For the amateur, the process might be a little longer in that most likely they use generic content platforms to source this content. Below is an illustration of their journey:
Solution
I created a v1 of Ragya as a zero-click interface which would solve a few problems identified:
1. Curate music automatically based on the prahar
2. Help listeners discover new music and talent
All that the user had to do was launch Ragya.
Setting the context
Visual design
Inspired by nature
Ragya's interface is influenced by and has elements of nature embedded in it at multiple levels. The elements appear in three forms: 1. Seamless background (videos) for each prahar, which presents a scene of pure natural beauty, 2. Colour of the sky, which presets the raga and the mood of the song, and, 3. The flower petals which encapsulate the filters for the listening experience.
Painting the scene of the prahar
The interface of the Ragya is not just functionally simple but also aesthetically embedded in natural beauty. The interface has, as a background, scenes from pure natural beauty from the time section of the day of which the music is being rendered. Shown below are snapshots from a few time sections of the day.
💌 Love from the community
Listeners who had discovered and taken to Ragya started to write in with their support and blessings.
Listeners started to express that they would be willing to pay a subscription fees for such a platform. Many even donated money from the Instamojo donation link that we placed on the site for a few days.
We realised we were onto something...
A small step
Ragya Prahar 2.0
Problem Statement
Ragya Prahar player 1.0 had clicked. However, the amateur listener was new to this universe and stays under-confident about engaging with the music due to lack of knowledge of theory.
Also, a big pool of new talent almost never gets discovered by the larger community of connoisseurs and listeners.
Only the well-known names in the world of Indian classical music make a respectable living off their music practise. The talented youngsters struggle for patronage.
Goals
Our focal points behind taking forward the experience of Ragya were:
1. Increase knowledge and awareness about raga music
2. Increase knowledge and awareness about artistes
3. Make classical music accessible and available to everyone
4. Get support in tangible monetary terms for artistes
Solutions
1. Ragya to be converted into a subscription-based freemium service
2. A part of the revenue from subscription payments will be shared with artistes
3. Knowledge (Gyaan) about artistes and ragas to be introduced into Ragya's experience, to spread awareness and reduce the gaps between masses and this music
4. Incentivise listeners to pay by offer basic customisability in playback with control over vocal and instrumental filtering of the stream
In a sense, Ragya is set to bring online the patronage that Indian art music has benefited from, offline.
User journey for 2.0
2 states of the Ragya Prahar app interface
Keeping in mind the core functionality of Ragya as the music player, I created a UI framework which was comprised of 2 broad states:
a Ragya full screen prahar player.
b A knowledge screen with a generic information panel accompanied with a mini player at the bottom.
This scheme was easily applied to all the screens of the app:
A giant leap
Raga + Gyaan
Additional to the main prahar screen, the display of raga information was complemented by the colour of the sky for that time of the day.
Here's how the Raga and Gyaan pieces came together in the final visually designed form in the mobile app:
Prahar-specific colour gradients
Each prahar (time of the day) presentation had a gradient background to complement the information to be presented for that raga.
(left) the colour gradients for each of the 8 time sections.
Prahar player
Landing page of the app plays music according to the prahar. Additionally now, the users can start to add songs to their favourites list, and, customise their listening experience.
Customisability of playback
Listeners can choose to customise the playback of music to filter it by Instrumental and Vocal music, and further in vocals - male and/or female.
Learn more about the artiste
Clicking on either the artiste's image or the name in the Prahar screen brings up the information pane with the artiste bio.
Learn more about the raga
Clicking on the name of the raga brings up the raga information pane which displays all the nuances of the raga.
Relationships
Onboarding Artistes
When we get in touch with artistes, we send them a 10-page PDF with the story of Ragya and the plan ahead.
Guidelines for sharing content with Ragya
When artistes share their content with Ragya, its best shared in a specific format of naming, for transfer of information about the tracks. I've created a simple 1-pager which accompanies the welcome email for them to understand this easily.
Earnings for artistes
Ragya is not just a listening experience but also it is a great and unique platform for the Hindustani artistes to showcase their art to an audience that is interested in this music specifically.
Additionally, it is a source of revenue for artistes and other partners who bring in their music on the platform. The partners are kept in loop of their earnings each calendar quarter about the earnings of the platform and their share in it.
Now we begin
Ragya 3.0
Problem statement
Listeners feel limited by lack of choice that prahar player offers. They would like to listen to renditions by their favourite artistes, in a certain raga or music of a certain instrument.
Questions
1. How will a ‘Browse’ interface complement the Prahar interface?
2. How will exploration of knowledge change when a Browse interface gets introduced?
3. How will switching between contexts be managed?
4. How will the user be kept aware of the current mode (Prahar/Browse)?
5. Given the incoming interface for Browse, how does the display of properties and knowledge change?
6. How does the experience of browsing become consistent over the mobile as well as desktop?
2. How will exploration of knowledge change when a Browse interface gets introduced?
3. How will switching between contexts be managed?
4. How will the user be kept aware of the current mode (Prahar/Browse)?
5. Given the incoming interface for Browse, how does the display of properties and knowledge change?
6. How does the experience of browsing become consistent over the mobile as well as desktop?
Conviction
Research
Questions and requests from listeners
There were 2 parts to research conducted to take Ragya's work forward:
1. Early adopters started to write in with requests for more control than just the Prahar-based listening.
2. Listeners started to ask questions like 'How can I listen to renditions outside of the current prahar, or of a certain artiste?
3. Listeners asked the question 'How can I take a look at the catalog?'
4. Listeners started to ask for a bunch of other features apart from the ability to browse the catalog.
Testing
Setting up
Having a fairly clear set of requests from listeners, I decided to create prototypes and iterate them over testing sessions with users.
To appoint users for tests, I made a short-list of listeners based on the data that we had of subscribers. I selected 7 highly engaged listeners and wrote emails to them telling them that we're working on the much-awaited Browse feature and we'd like to test it with them.
I received an eager response from all users to help with testing.
Testing prototypes
I decided to focus on Browse as the next epic project, keeping aside every other feature.
For the purpose of testing, I created a clickable prototype of the journey of a user from Prahar to Browsing and back to Prahar.
My intent was to test the intuitiveness of
1. Going into the different contexts inside Browse
2. Discovering tabbed information and Play CTAs
3. Discovering interconnectivity of information and route to linked contexts
3. Switching back to Prahar mode
Testing and evolution of prototypes
Over the 7 tests that I conducted, I was able to iterate the prototype as well as the experience of the app to a point where it come down to being much simpler than what I set out with.
Some notes from the testing:
1. The initial set of features inside the app was vast, and testing helped me realise not all features were needed at first
2. The users had an idea of what they wanted but couldn't articulate it. The prototype often showed them 'aha!' moments of that that's what they're looking for!
3. Testing never ceases to amaze me. When I thought a certain feature or flow was done and resolved, testing would reveal that there was still some way to go!
The solution
Interaction scheme for Browse
For each of the entities, i.e., artistes, instruments, ragas and gharanas, we want the users to be able to:
1. Listen to the music (playlists)
2. Learn more about the entity
3. Learn about the artistes related to that entity (in case of gharanas and instruments)
1. Listen to the music (playlists)
2. Learn more about the entity
3. Learn about the artistes related to that entity (in case of gharanas and instruments)
The Browse experience in Ragya would extend out from the current Prahar experience.
Building on top of merely gaining knowledge, the links in Prahar would now take the user into a longer journey of exploring more of that context - be it an artiste, instrument or raga.
With prahar as a leading context, the context of Browse itself would surface the information in a palatable form and is designed in 3 layers:
1. A cover page to introduce all the contexts at a high level - artistes, instruments, ragas and gharanas
2. List of all entities in the specific context
3. Tabbed information in a chosen item in a context - music (playlist), info (about) and associated artistes
1. A cover page to introduce all the contexts at a high level - artistes, instruments, ragas and gharanas
2. List of all entities in the specific context
3. Tabbed information in a chosen item in a context - music (playlist), info (about) and associated artistes
A bridge for discovery
The docked player
The introduction of Browse in addition to Prahar brought in a new challenge: Discovery of content and knowledge through the currently playing rendition had to remain simple and easy.
The idea of linking the attributes of a rendition to its related contexts stayed strong. However, there needed to be a common interface which would work across Prahar as well as Browse to do this.
For this, we did 2 things:
1. Introduced a mini player which would indicate the currently playing rendition, its progress and allow play/pause. This docked mini player would be omnipresent across the Ragya app at the bottom of the UI right above the main navigation tabs.
2. Let the user click on this to expand into a special full-screen player which will be in 2 layers: [1] Scrolling Information of the rendition, and, [2] Fixed playback controls at the bottom.
A mini version of the player will:
1. Display the title and artiste of the currently playing rendition
2. Display the progress of playback
1. Display the title and artiste of the currently playing rendition
2. Display the progress of playback
Visual design
Here's how Browse looks visually.
Prahar, Browse and Discoverability
Since the docked player got added into the picture, the prahar player no longer needed to contain the rendition info
Decisions for presentation of artistes
•Rounded square thumb used as a frame
•Name accompanied by either the name of the instrument or ‘Vocal’ in case the artiste is a vocalist
•Grayscale images for artistes, to minimise noise caused due to colour and treatment variance, as artiste images span across decades and quality of images are often non-manageable
•Name accompanied by either the name of the instrument or ‘Vocal’ in case the artiste is a vocalist
•Grayscale images for artistes, to minimise noise caused due to colour and treatment variance, as artiste images span across decades and quality of images are often non-manageable
Decisions for presentation of ragas
•The colour of the time section gradient is the signifier and hence is maintained both in the list of ragas and in the specific raga context
•The specific raga context displays the colour of the sky against the earth on a conceptual horizon
•Moving between the 2 tabs moves the earth subtly, hence creating a delightful experience
•The user can choose to filter the ragas by the time section
•The specific raga context displays the colour of the sky against the earth on a conceptual horizon
•Moving between the 2 tabs moves the earth subtly, hence creating a delightful experience
•The user can choose to filter the ragas by the time section
Scalability of the design framework
Abstract model of Ragya
The evolution of Ragya’s design and the emergent framework has paved the way for a host of additional experiences to find its place in the current system fairly easily.
At an abstract level, Ragya is understood to be structured at 2 levels:
•An Experience
•A Playlist
•An Experience
•A Playlist
Adding a playlist
As an example, to simply introduce a playlist, we can introduce a property ‘meditation’ in the database. Then, on the frontend, we can create an entry point called ‘Meditation’ which will then render a playlist of songs which are tagged with ‘meditation’.
Adding a new experience
As an example for this, for the incoming Rasa based listening Experience that we want to render, at the outset, we will design the interface for entering contexts within which playlists will be rendered.
Journey so far
A glimpse of possibilities
7,00,000+
2,000+
INR 11,00,0000+
700+
70%
100+
Next steps
Administration design
As Ragya grows, the team will need to manage the data and many more aspects from a GUI. I have designed this admin interface in detail and below are a few snapshots to convey an idea.
The Ragya backend is structured in a way as to accept a rendition with multiple owners and then to divide the revenue between them in percentage. The interface allows for that to be done with caution.
Long road ahead...
Ragya is going to be a long journey with slow and iterative development of features as they're needed. The admin panel work hasn't even begun yet and the frontend app itself has a long way to go.
Earned media
Ragya in press
Audiogyan• Ragya with Aditya Dipankar Listen to Podcast
The Hindu•On Ragya, an Indian Classical music streaming app, songs follow the sun Read Article
Musically•Ragya hopes to find streaming niche with Indian classical music Read Article
Economic Times•When Marico boss enjoyed listening to Hindustani classical music in his office Read Article
Sunday Mid Day•Time to go Ra Ga Read Article
Indian Express•Pune: Startup that’s on a mission to take Hindustani classical music to the world Read Article