Navigationally speaking

Hamburger anyone? Image via http://www.enacademic.com/

Around the time 2016 started becoming another one of those years, Google decided to introduce the Bottom Navigation Bar to their Material guidelines. As many users of the guidelines are aware, Google had previously been more favourable on designers adopting Navigation Drawers for their primary navigation.

In the meantime some apps were already treading water with Bottom Navigation Bars. Most notably Instagram who had ported their iOS experience over to Android from the very beginning. Despite Instagram remaining with iOS paradigms when it came to their navigation; the nuances of what happens on a double tap and the behaviour of the back stack, other apps had begun incorporating the bottom bar component.

It begs the question, why had Google decided to push app developers in this direction and what are the benefits for us as Onefootball?

Oh look there’s an elephant 🐘

Let’s start with the elephant in the room concerning Bottom Navigation Bars on Android. Despite Google pushing documentation to the Material guidelines, support for actual developers has lagged a little bit behind. With an almost limited spec in Android documentation until recently and a number of third party libraries, developers were left with the awkward part. How do you implement this thing correctly?

Whilst developers were left to their own devices (no pun intended), folks working on the UX were given an opportunity to simplify their interface. Product managers in turn given the opportunity to push equally important entry points on apps to their audience much quicker — we’ll come to that shortly.

Challenges presented to our app

Given that we have a brief history of what a Bottom Navigation Bar is with a small dose of pre-challenge challenges, how does it play with Onefootball? (again, no pun intended). Our app before this had been performing well, but we still wanted to increase the amount of users with a favourite team and encourage the following of other teams, competitions and players. Why? Well, when you’ve a favourite team set and follow certain entities the app starts becoming a little more personable to you and we deliver you what you want to see.

Though most Android users are accustomed to the Navigation Drawer, we felt some of our entry points such as managing your followed entities went a little unnoticed. Despite easy access to teams you had followed, they were still out of the users eye sight hidden away in a Navigation Drawer. This meant we wanted to encourage users to understand the apps structure a little better.

What do we mean by this? Well, making your navigation more readily available has the potential to increase content consumption. For example, during a match day, you may be interested in news and scores, being able to jump through these faster in theory improves user experience and gives the user a better understanding of where things are located.

Setting your favourite team

Let’s take a closer look at users setting their favourite team. Of course, when you are onboarded to our app, we ask you ‘who do you support?’ Occasionally, this question can go unanswered as most people tend to breeze through onboardings wanting to use the app. For this section of users, we found that a large chunk of them (20% to be exact) either didn’t seem aware or just preferred to casually browse the app without a favourite. This is fine, but it tells us very little about what the user really cares about and after all, we want to provide the user with the best experience for them. So how do you address that?

There it is! Our new bottom navigation.

Well, cue the Bottom Navigation Bar. With the opportunity to make our navigation more prominent and most importantly easier to access for the user, we decided to take this major step. Changing the navigation of an app that performs well is one of those tricky things in life, y’know like whether you prefer a hamburger or a Big Mac. It’s a tough call. You fundamentally know you will piss off a certain section of loyal users, but when you can potentially have a positive effect on your KPI’s whilst improving user experience in the long run, you have to take the risk.

The change

Although it seems a no brainer moving our navigation to the forefront of the users thumb, our app presents us with one more challenge. The back stack. Onefootball is slightly unique when compared with other apps that have a top level then child view. Usually, you cannot navigate from the child view to another top level section without using the up button. Within our app, you can end up in a match (a child view) from the News, Matches and Following. You may also end up in a news article (another child view) from a Team or Competition view. Essentially, you can access the child views of other sections from different top level entry points.

Initially we rolled out the new navigation to 5% of users, but with one flaw relating to the above. We had what Arsène Wenger would call a “little bit lack of mental strength” and went without the navigation on all of the child views. Even before we had received feedback, despite it feeling structurally right, we had diminished the existing users experience as we discovered from user testing. Whereas before navigating back to top level was easy, now you became entrenched in the up or back buttons. This wasn’t ideal and the equivalent of watching Arsenal’s backline or getting a hamburger when really, you wanted a Big Mac.

A few days later we had rolled out to 20% of users, but this time with a change. We had realised the most difficult pages to navigate back from were our entity pages (teams, competitions and players). Once you entered a match for example and were interested in a team playing, you would go in one more level. If you wanted to know something about a player from that team, you’d go in a fourth level. This loop could be endless depending on how much the user wanted to know.

So the fix? Place the bottom navigation on all entity views and enable a single tap to bring you back to top level. 🎉

Results and learnings

Of course eventually we rolled out to all users. This was met with the expected criticism of a huge change like this and rightly so, people had learned a certain way and don’t like the idea of re-learning how to use your app. Some of the reviews we saw felt like we had made a slight mistake but steadily over the following days, positive reviews had resumed. Interestingly, a lot of new users with positive feedback.

What of the aforementioned favourite team and followed entities? Well, 76% of users who had updated and previously did not have a favourite team set had done just that, set a team! Overall this meant we had increased our share of users with a favourite team by 4%, bringing us to a total of 84% of users. That’s a significant change and one that can be attributed to the bottom navigation and a more prominent following experience.

A nice side-effect of all of this is that 34% of existing users who had updated had also set a favourite national team. This was previously a little bit hidden away, with quicker access via the bottom navigation however, we’ve seen steady growth and encouraging numbers. On the outset switching from a well known (and weirdly loved) pattern of a navigation drawer to a bottom bar is a daunting one, but one we’re glad we made.

It enables us to push the user what they care about whilst simplifying their navigational lives.

Thanks for reading. ✌️

P.S. Not sure what Big Mac’s had to do with any of this, just know that they are superior to hamburgers.