Discover new music and turn your mood into Stories.
If you check any social media platform, it’s very likely to see people sharing songs based on what they feel & reflect their current mood. Studying our users’ social activity, we found that they mostly prefer to share the music they’re listening to on Anghami as a social media story whether on Instagram or Facebook, considering that it’s easily and quickly accessible by others for a limited time.
Anghami was one of the first music streaming apps to launch social features, in particular, the famous “Expressions”, allowing users to record a video of themselves singing on top of their favorite music. However, we didn’t want to stop there; Hence, we introduced Stories.
What are our Stories?
Anghami Stories were recently launched, on both Android and iOS. They reveal the music you and your followers are playing, in a semi-automated way, vanishing after 24 hours. They’ll help you discover new music and even refresh your memory by exposing you to nostalgic songs you commonly listened to with your favorite people, in your best moments. Also, you can connect and show how you feel about your followers’ stories by reacting to them.
Stories are shown on top of Anghami’s explore page where users engage the most, in a carousel of followers sorted by time-versus-music relevancy algorithm built by our internal ML team.
We decided to use a simple user-friendly design for the story view that people are familiar with, aiming to enhance our user’s experience and increase their engagement.
A story contains a maximum of 7 songs, playing a small preview of each before smoothly skipping to the next one. By default, songs you’re playing are automatically added to your story after listening to a big part of it, so its content expresses your real mood and not just shows random songs you encountered along your Anghami journey.
However, some people don’t like to share all the songs they’re listening to automatically, and prefer to customize their stories manually. They asked, we answered: users can choose to turn off “Auto-add” and start adding music manually to their story or just remove any song from the story at any time.
Whenever you discover a nice song in one of your friends’ stories, you can easily choose to play it directly on Anghami, like, share, or add it to a playlist, and of course, add it to your current queue. This makes it much easier to save music that you discover via your friends.
Great, one more app adding stories…
We’ve seen many platforms adding the story element to their apps, but few have succeeded in building engagement: this caused frustration between users online, which started wondering if the calculator app would soon have stories too. In our case, we didn’t just add stories to the app, we redefined Stories. If you want to share a picture or video of your dog, there is not much difference between adding a story via Instagram, Snapchat, Facebook, WhatsApp, or even YouTube, which just started rolling out its stories feature. They all have somewhat of the same concept.
Anghami Stories are not about content creators, but rather about content consumers sharing what content they consume with others. They’re much simpler, but can be much more engaging and expressive than the stories shared on other apps.
Felt the love? 💕
Once we started teasing Stories, our users were amazed by this new idea and were outstandingly curious about it, especially that they have never expected a music streaming app to introduce such a feature.
Here are some of our happy users’ tweets who actually used Stories:
Loving the numbers too!
Looking at our data on Amplitude in 1 day, about 10% of users who engaged with Stories started reacting to their followers’ stories. Moreover, almost 14% of these users added songs to their likes directly from stories.
We consider this a great start for a new concept where people can socialize and connect with each other on a music streaming platform.
Behind the scenes: the Nitty Gritty Part.
Now for the technical part — explained by Amer Eid, our awesome iOS engineer.
The Stories component implemented in Anghami is composed of multiple major components but we’ll discuss only the “Stories Queue” and the “Stories Engine”.
For all our sake, let’s assume that the data models for this feature are self-explanatory. Such models created were ANGStory, ANGStoryChapter, ANGStoryUser, and several others that won’t be mentioned since we want to keep this technical discussion light and sweet (note: a story chapter is a single element of a story which contains a song — a story contains an array of chapters).
The way we fetch the stories and their chapter from our servers is done in a manner as to reduce as much load from the servers as possible while maintaining a wonderful user experience for our users. In order to do so, we have 2 main server calls to deal with stories. One call to get an array of stories without their chapters with basic data such as the owner of the story and the other is to fetch the chapters for certain stories we choose: this is where our “Stories Queue” component comes into play.
The stories queue is our version of the view model for the stories. It handles loading all the stories and preloading certain stories’ chapters that we assume the user will view next. Think of the stories queue as the brain behind it all. It’s like the best friend you never had, it keeps track of which stories’ chapters are loaded, which ones need loading, which chapters need to have their cover art images cached, which story to show when you swipe left or right in the pager, and other helpful stuff that isn’t coming to mind.
When viewing the stories in their pager and swiping left and right between them, the stories queue is prefetching all the stories in order for the user to not have to wait for the story’s chapters to load when he swipes (this does happen of course if a user swipes between stories fast which is normal). The stories queue also handles prefetching the song cover arts in order to show the “loading” cover art as little as possible while still not abusing the user’s bandwidth.
Now in order to not recreate the wheel, we sub-classed our current “Audio Engine” in order to reduce it down to a simpler version that removes audio ads handling and other unnecessary features. It was also adapted to still work harmoniously with the current audio engine.
The regular audio engine was fed songs in multiple ways, but the way we cared about was how it handled playlists. We had data models that took an array of songs and were then added to a Playlist PlayQueue. We reused that same logic by creating a Story PlayQueue which was a list of songs after all which was actually a list of chapter’s songs. This allowed us to be able to switch between songs and stories easily when swiping between stories or tapping through a story’s chapters.
Here’s a small snippet of how we prefetch stories data. This function gets called when you swipe to a new story (currentStory). It loads the story’s neighbors chapter data accordingly if it’s not already loaded (note: getStoriesContent loads chapter data of stories it takes as parameters)
func loadStoryAndNeighborsIfNecessary(currentStory: ANGStory) {
guard let index = getIndexOfStory(currentStory) else {
return
}
let (_, leftStory) = prevStory(currentIndex: index)
let (_, rightStory) = nextStory(currentIndex: index)
var subArray:[ANGStory] = [ANGStory]()
subArray.append(currentStory)
if leftStory != nil {
subArray.append(leftStory!)
}
if rightStory != nil {
subArray.append(rightStory!)
}
var storiesWithoutChapters = [ANGStory]()
for story in subArray {
if story.hasChapters == false {
storiesWithoutChapters.append(story)
}
}
if storiesWithoutChapters.count == 0 {
return
}
getStoriesContent(stories:storiesWithoutChapters)
}Convinced with our Story?
Anghami Stories are adding the social element to music in a way that was never introduced before. In fact, when you want to express your mood using a song and share it with your friends, it’s much easier and simpler to add it to you own Anghami story than manually taking its cover-art and recording it to add it to your story on another platform.
Our storydoesn’t stop here, and it’s only the beginning. We already started working on enhancements based on our users feedback, that will surely take your Stories experience to a whole new level… 😉
