If you live in Thailand, you will be familiar with CP Freshmart, one of the largest chains of convenience stores in the country.
If you visit their website on a mobile phone, you will see a pretty standard home page for ordering online:
Except, once you start using the site you soon realize that it’s quite difficult to navigate. For example, once you leave the home page there’s no easy way to browse categories, and there’s no obvious way to access your account.
This is because the persistent bottom navigation is completely hidden by a banner to install the CP Freshmart mobile app.
Once you tap to close the banner (assuming you don’t miss the small close icon and accidentally open Google Play instead 😖), the bottom navigation comes into view and you can navigate the site:
The team who is responsible for the banner most likely assumed that users would see it and close it if they didn’t want to install the app.
However, it is more likely that users will ignore the banner as being irrelevant and will try to use the rest of the visible website without closing it.
After a while they will probably find themselves struggling to navigate and perform tasks on the site and will give up and go to a competitor.
As businesses try to drive app installs, this has become a common usability issue across the mobile web:
These types of UX issues often occur when multiple teams are responsible for different parts of the online experience. For example, perhaps in this instance, the mobile app growth team didn’t work with the website team to identify (and test) the best ways to drive more app installs from the web site.
And, if someone did review the updated home page they didn’t realize the impact this seemingly minor addition would have on the user experience.