Designing a more accessible navigation for the Upside app
Upside is a cash back app used for eating out, buying groceries or getting gas. We average around 4.5 million active users every month.
When I revisited our bottom navigation during a rebrand last year, my goal was to design for all of our users, not just most of our users.
Was there an opportunity here to be more inclusive?
If you do some googling on bottom nav best practices, you’ll find articles like this one or this one. They are incredibly helpful if you’re a newer app designer.
However.
I find many are missing one important detail.
Color differences alone are not enough for accessibility
In other words, you can’t use color by itself to tell a user something is different about an element if that element is actionable.
Maybe this is obvious to you, but let me get really specific in case it isn’t.
Here’s an example of what I don’t mean:
The reason color doesn’t matter here is because it’s only being used for visual interest as backgrounds. It doesn’t have a job, other than looking good. Beauty doesn’t have to have a purpose.
Here’s an example of what I do mean:
The tappable text ‘find out how’ is only communicating its tap-ability by the change in color.
I think 🤞most🤞 product designers know the best possible thing you can do with a link inside of a block of text is to underline it.
This makes it clear to the user that there’s a link to tap. Color + underline = match made in heaven.
But what does this have to do with our bottom nav?
Before our rebrand, Upside’s active tab was a dark blue. The inactive tabs were grey. There were no other indicators being used outside of color to tell the user which screen they were on.
When compared to other brands, though, this didn’t feel like a such a big deal.
This felt confusing to me. So many companies only use color! Was I over thinking this?
So often we look to other companies as a point of reference. What are they doing? How did they solve x problem?
Get Haley Ahokas’s stories in your inbox
Join Medium for free to get updates from this writer.
But how do we know how well that thing is actually doing? How do we know their users are happy with those choices? Do we know what the company’s goals are?
Competitor audits should be taken with a grain of salt, always.
In this case, I think empathy plays an important role. Our design choices should always have the goal of preventing a user from getting frustrated, especially someone who deals with tech frustration more than the average human.
Early concepts
How else could I show that a tab was active? Should it have a background? Should it be underlined? Have a bar?
I also wanted to make sure I was looking at each concept paired with notifications. Did it change anything?
I then took all of this to the greater design team for review.
Concept 1 and 2 were nice but we just weren’t vibing with the background aesthetic.
With Concept 3, we felt the top tab bar got lost when combined with the app screens.
Ultimately, we felt Concept 4 worked best for our product and brand. It was simple, didn’t interfere with the notification dot, and didn’t get lost on each screen.
This option also gave me an opportunity to add some life to the navigation 🎉.
Before and after:
Simple, right?
And yet, this simple change will hopefully make a large difference for some of our users, which makes me proud.
Did I miss something? Do you think we could have done something differently? Let me know in the comments.
Play Store | App Store (If you’re on iOS, you’re likely to see the bottom nav over the next month or so, as it’s still being rolled out.)
