• Engineering
  • Product
  • For Brands
  • What’s New
  • Music
  • Life at Anghami
No Result
View All Result
  • Engineering
  • Product
  • For Brands
  • What’s New
  • Music
  • Life at Anghami
No Result
View All Result
No Result
View All Result

Stories: an extra pinch of social

Wael Hourani by Wael Hourani
December 1, 2018
in Engineering, Product
Share on FacebookShare on Twitter

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.

Stories carousel showing on top of the Explore page (iOS)

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.

Adding a song manually from the player share sheet (Android)

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.

Follower’s Stories bottom sheet

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:

Anghami’s new version displays stories of the recently played songs ,too much love 🙇🏻‍♀️♥️✨.

— 🍬 (@sarahnasser444) November 29, 2018

So @Anghami Made Music Stories And This The Best Thing For Me Actually.

— OMARAS (@youmnaomara) November 29, 2018

Never thought I'd say this but Anghami's new stories are the only stories worth having and a great way to discover new music

— Racha (@gaIaxiesinme) November 28, 2018
My personal favorite tweet 👌

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… 😉

Tags: Stories
Wael Hourani

Wael Hourani

Product Manager, joined Anghami in 2018

Related Posts

Connecting with musicians using WhatsApp Business API
Product

Connecting with musicians using WhatsApp Business API

SUCCESS STORY This year, Anghami worked with communications provider Infobip to use the WhatsApp Business API to connect with...

by Mohammed Al Ogaily
January 17, 2021
To UAE listeners: Being local matters
For Brands

To UAE listeners: Being local matters

We're excited to announce the 2nd instalment of the “Why it matters to be Local” study conducted by Choueiri...

by Sabine Oneissy
November 25, 2020
Anghami Introduces Interactive Music Sharing on Facebook Stories
Product

Anghami Introduces Interactive Music Sharing on Facebook Stories

Music discovery is now easier than ever with Anghami’s new music sharing feature on Facebook. At Anghami, we’ve always...

by Mohammed Al Ogaily
October 28, 2020
Goya, Anghami’s Painter
Engineering

Goya, Anghami’s Painter

Music in the streaming era doesn’t exist alone, it is coupled with images; album arts, playlist cover arts, the...

by Ibrahim Fawaz
October 6, 2020
Next Post
From Billions of Streams to Better Recommendations

From Billions of Streams to Better Recommendations

  • COVID-19 Music Effect in the Middle East

    Analyzing a shift in music consumption in COVID-19 times in the Middle East

    153 shares
    Share 153 Tweet 0
  • How we shifted to Work from Home on #Covid19 with little notice

    0 shares
    Share 0 Tweet 0
  • Smarter Bots for a Happier Workplace

    0 shares
    Share 0 Tweet 0
  • 4 Years of Anghami.

    0 shares
    Share 0 Tweet 0
  • Hey Siri: Talking to Anghami on iOS

    0 shares
    Share 0 Tweet 0

About Anghami . Join Our Team . Go To app

© 2020 Anghami

No Result
View All Result
  • Homepage
  • Engineering
  • Product
  • What’s New
  • For Brands
  • Music
  • Life at Anghami

© 2020 Anghami blog