Firefox for Android looks a bit different
Redesigning the browser interface
If you’ve been using the Nightly build of Firefox for Android then you may have already noticed.
Back in May, we began looking at what an updated interface for Firefox’s browser interface might look like. With things like Firefox 29 and a refresh in the works for Firefox on Tablets, it felt like a great opportunity to make some improvements on the mobile side of things too.
The research phase
We started with a cold, hard look at what we currently had. We had a brand; something that had already been around for a while, something that people were used to, and something that they identified with as “Firefox”.
We also knew what we wanted to achieve. Our signature elements like the curve and the default controls were key identifiers of our product so we worked to keep those things in center focus. But, we knew there was room for improvement.
Visual exploration
First up, the curve. These aerodynamically designed, streamlined vector points had become signatures of our brand. We had to figure out a way to update it but not completely redesign it. Taking heavy inspiration from Australis, we adapted the curve for a different platform with a very different set of constraints— mobile.
After countless meetings spent experimenting, tweaking, and moving these vector points, we finally arrived at something that we felt happy with.
- It looked better next to Firefox on Desktop
- Tested well with our (initial stage) tablet interface and structure
- Functioned well as a divider between the URL bar and controls
- It was more efficient with the space
- It also felt a bit faster
Some of the changes
We updated the color palette, removed some of the unnecessary bevels and shadows, and also restructured some of the core elements and margins. We wanted to create a visually updated and harmonious interface that played well with (but wasn’t necessarily identical to) our Desktop, and upcoming Tablet counterparts.
Although our UI on tablets isn’t finalized yet, getting to work on the visual language of both products at the same time really helps keep everything in line.
Constantly improving
This will be an iterative process. There are a lot of moving parts with nothing really working in isolation. I’ll be continuously iterating and improving this as we also update other parts of the application as well.
I think the beauty is definitely in the details here. Going forward, we want to focus on more opportunities to delight the user. Designing interactions that bring just the right amount of whimsy to the experience while also informing the user would be one of our next steps.
So we’re not done yet — stay tuned.
