Here’s 11 small changes, from buttons and links, to carousels and lists.
Every week we prove how small design details have increased engagement at Anghami, the leading music streaming service in the Middle East. Below are a handful of very simple and actionable examples that we’ve found very useful. Engagement over the same UI can vary across markets, app categories, and as time moves on. However, I believe these examples are flexible enough to apply on most segments. Also, the approach to tweaking the UI for increasing engagement is the same. Let’s go:
Making users tap an essential item
Regardless of which music app you use, the mini player is the single most important element while playing music. It offers basic control over your music, and tapping it is the only way to open the full player where you can download the playing song, change the queue, or simply enjoy the large cover art. Considering the importance of opening the full player, it was bizarre that few people were opening it. We were using the same design as any other music app, where the mini player is attached to the lower tab bar. By detaching the mini player from the tab bar and making curved corners, the mini player suddenly looked like a button. A significantly higher percentage of people opened the full player since then.
The biggest difference between carousels and lists
Users love accessing top songs directly from the homepage, so we had a carousel of top songs right there. But on any other platform, including Billboard, charts are displayed as a list. So we changed top songs from a carousel to a list, but users started complaining how much harder it is to access top songs! We thought they didn’t recognize the new list format, but that wasn’t the case. Apparently, users were happy to swipe around top songs in the carousel, but by showing a list of 3 songs, users had to tap “More” to see the rest. Next time you’re thinking whether to use a carousel or a list, remember that swiping a carousel left and right is way more accessible than tapping a button to see a whole list.
Machine won over human
Many argue that emails have a higher rate of being opened when they are “from” a persona’s name rather than the company. We tested sending emails with different “from” names, like “Mia from Anghami” or just “Marwa”. At first we saw open rates go up and we were happy. Soon after I realized that tapping content inside the email and engaging with it was much lower. Even though the open rate went up, we were getting less clicks overall! Users were deceived into clicking an email coming from human name, but once they opened it and realizing it was not what they expected, they didn’t engage with the content. By truthfully sending emails from “Anghami”, we got more engagement.
It’s people, not users
We organize our search results with categories on top. Our copywriter insisted we should say “People” instead of “Users”. Although this category was not our priority, we certainly want to make it easier for people to find their friends. Indeed, more people started going into the “People” section!
At least underline those linksBoth Android and iOS have been pushing to show buttons without borders or lines. The only indicator of tapability is colored text, in contrast to the remaining black text. In an app like Anghami, where visuals and colored views abound, it was impossible to follow the new pattern for important call to actions, so we maintained old-school buttons. However, we tried following the minimal style with our secondary buttons, like skipping a view or seeing more plans. We found the tap rate decreased without a respective increase in the primary button. By having buttons underlined at the least, users can skip onboarding without churning, and see more subscription plans instead of not subscribing at all.
Some secondary buttons are worth more than a simple underline. A new install is most likely a new user, so a sign-up button should be the primary call. However, many new installs are from existing users, so we had an underlined link “Already a user?” We noticed that many existing users were confused and still went through the sign up flow. This is a situation where logging in should also have a prominent button. The secondary button in this case has a border, but is not filled like its primary counterpart.
The design industry encouraged creative ways of getting people to perform a certain action than just putting a button. Yet, thought my experience, I realized how often buttons do the trick. Buttons might not be a creative design, but it does what’s needed, doesn’t annoy anyone, and is simple to implement.
Icons are not enough for critical actions
Users have gotten used to the meaning of so many icons, which is great since there’s no need to explain everything with text. Heart (like) and share icons are among the most popular. We were satisfied with the usage of the heart button, but felt users can engage more with sharing. We replaced the share icon with a button that says “Share”, and usage increased significantly. It’s not because users didn’t understand the share icon, but explicitly writing “Share” made this action on top of mind.
One word can do wonders! In Anghami’s player, there’s an arrow at the bottom to indicate the action of swiping up to get to the queue screen, and see more information of the playing song. But most users weren’t curious enough to tap the upwards arrow to see more content in the player. Alongside, we received reports of users not finding the playing queue. By adding “Queue” on top of the arrow, the problem was solved.
Speak with your users
We’re mostly geeks at the office in Anghami. We’re obsessed with mobile apps and know the ins and outs of using mobile platforms. But the average user isn’t as familiar with all the things happening on their screens as we are. Users were reporting music not playing, which, without them realizing it, was due to basic connectivity problems, like a weak wifi signal or slow LTE zone. We solved the issues with a dialog box that offered troubleshooting steps for the layman, and we significantly decreased tickets of music not playing.
Interactions that increase engagement should be given first class design
The mini player is a small space, and it already displays song and artist info, play/pause control, and an arrow to indicate it expands. That’s probably why no music service has any extra button in there. With that said, users love discovering new music on Anghami, so it’s important to easily save those discovered songs. The like button can be used by all users (not only paid), it’s an extremely simple way to build a music library, and we’ve seen how its usage notably increased retention. With larger screens becoming commonplace, adding a heart button did not crowd the mini player. This led to an incredible increase in liking songs, and its effect on retention was direct.
Users engage with content that’s proven to be successful
Users can record video expressions in Anghami, which are a lip syncing version of Insta stories. When a user records an expression, we send a push notification to their friends. We weren’t happy with the open rate, especially considering it’s contextual to the user’s circle of friends. We tested with another segment a delayed push notification that gets sent when an expression reaches 1000 views. The push open rate increased by five times.
Invite vs Add
I’m always impressed with the power of words. The button to invite friends got more engagement when we renamed it from “Invite friends” to “Add friends”. It looks like users relate app invites with spam, while adding friends is value driven.
Take advantage of Google’s instant sign-in
Android’s Google sign-in is the easiest method there is to sign-in a new app. It shows instantly (unlike Facebook which needs to load) and has a very simple interface. It doesn’t warn the user of every single information that will be provided, making the experience more positive. Indeed this login method provides limited information — the user’s name, profile photo, date of birth, and email — but that’s really good enough to start personalizing the user’s experience throughout the app. We even started showing Google sign-in upon opening the app for the first time and before any interaction. This is converting much more users to login directly.
At Anghami, we’re often focusing on large flows and handle complex exceptions, in order to provide a simple user experience at the end. But it’s impressive how small bite-sized improvements in the design can also have a large effect on delighting users.