Photon Project on Mobile
Firefox 57 is going to look and feel very different. The New Firefox Quantum, feels faster and actually loads faster too.
To reflect all of the amazing changes that were subtly happening behind-the-scenes, we wanted to update the user facing side of Firefox too. So, the Firefox UX team started work on the Photon Project.
For the mobile side of things, Bryan, Carol, and myself defined our own scope within the Photon Project. Our goal was to unify the Firefoxes across all of the systems and devices that we supported. We weren’t trying to be identical, we just wanted to be more similar. We wanted to help users take advantage of the different platforms whilst allowing our own design values to shine through.
Cross-platform goodness
It’s important for our users to get a consistent, familiar experience across all devices. If you choose to rely on Firefox on one platform, you should get the same dependability on any other platform you use Firefox on.
One of the issue I’ve struggled with while designing for 57 is defining the new design style for Firefox across platforms. It’s an interesting and challenging design problem — Carol Huang, Visual Design Lead, Taipei
During my time here working on Firefox Mobile products, I’ve never seen us look as consistent with ourselves as we do now. On desktop, tablet, and mobile devices, there’s a very strong nod towards the same core design values that we all love and share. This carries over into what we think Firefox should look like and feel like.
Before Photon
As Apple and Google remain committed to pushing their design guidelines and aesthetics forward in iOS and Android, we had to keep up too. Firefox had to feel like it belonged and compared to other top apps in the store. But instead, we were starting to feel out of place and sluggish.
For us, smart phone devices make up the bulk of our user base. So that’s where we started. But we knew we couldn’t leave tablets behind either. By only targeting a few key screens, we made it easier on ourselves and we really honed in on the areas of high visibility.
Firefox for iOS had not seen any significant revisions since its introduction, and its original design was not flexible enough to absorb the new features we had already added and were planning to add. In some ways, the mobile UI limitations mimicked those of the desktop product — Bryan Bell, Staff Product Designer, California
After Photon
We concentrated on the most common screens that a Firefox user would (typically) interact with. This decision to scope down the initial iteration of the project really helped us get things moving.
Lucky for us, we didn’t have to do much guessing here either. With a wealth of existing user research and knowledge, we had a pretty good idea of what these key screens might be. Some examples of these common interactions and workflows were things like opening a webpage from an external app, typing a search term/URL, and opening the menu.
We started by aligning our iconography and introducing a new, vibrant colour palette to the UI. You can see this in multiple places of the product, such as the text highlight and the loading bar. The new gradient loading animation is one of my personal favourites because I think it’s an important part of our charm that gives us that extra bit of delight — Carol Huang, Visual Design Lead, Taipei
It’s essential that as the desktop version of Firefox evolves the mobile versions mature along with it. The Photon inspired redesign of Firefox for iOS focused on making sure the new organization of the Desktop UI translated to the iPhone, so things, like send to device, and bookmarking, worked the same way on both platforms — Bryan Bell, Staff Product Designer, California
The Curve is gone
For a while now, we’ve hung our hat on the curve as our identifying feature. When we first launched Firefox for iOS, it was there too. This signature look of ours separated us from other browsers (and even performed well in “blur-your-eyes” or “over-the-shoulder” tests). But at this point it felt dated and seemed kind of unnecessary. It also created a whole different set of UI challenges for ourselves too (think toolbar customization, PWA theming support, additional actions, etc…). It wasn’t very future proof.
Beyond
As we know, these things are rarely “done”, if ever. But right now, I must say that I’m just incredibly proud of how far we’ve come and the work we’ve accomplished as a team. We had a specific vision in mind and we took big steps towards achieving that vision.
Firefox Quantum is looking great, and we’re keeping both eyes on the goals. If you have some critique or feedback you’d like to give or you just love the new Firefox, we’d definitely like to hear it. There will be lots of opportunities to iterate and improve, and we’ll continue moving forward, together.
