Firefox Cloud reUX

Oct.06.2019 | 5m Read | ^UX

Oct.05.2019 Redesign of's into a unifying cloud platform.

PART 1: usability issues.

PART 2: UI updates.

The redesign (or reUX) samples the original web site, but then moves to draw inspiration from dark interfaces found in professional tools like Maya, Resolve, Visual Studio Code. It then modernizes and transitions them from traditional desktop architecture and landing pages to a Platform as a Service (PaaS) cloud.

Newly designed icons for enterprise, apps, and various devices are also included.

PART 1, Usability

000 firefox issues

This purple and pink is somewhat retro. I know retro/80's style is in right now, but is that really what Mozilla wants to dominate the Firefox brand? Splash pages are for user acquisition and conversion (ie, email/login submission), but there's nothing to do here beyond download Firefox.

Cloud Page Issues:

001 firefox issues

Lockwise isn't linked and neither are the other 2 large icons. Also, the best practices have been to avoid any language that may trigger a sales or monetary requirement like 'Join'. But either way, it's not linked so you can't actually join which is even stranger. Quantum, Rust coding (ie, memory models), and fresh addons is what's new. I remember Private Browsing from many years ago. Tor or (The onion router) support has surpassed and replaced this (which also features and combines with Private Browsing).

Menu Issues:

002 firefox issues

Firefox doesn't have Tor, Brave and the Tor Browser project does. And even then I don't consider Tor that private or secure since governments and intelligence agencies run servers for them. There are vulnerabilities that states with super-computers or networking teams of data engineers and/or cyber security personnel can use inevitably to reveal user data (with or without corporate cooperation).

Is privacy really still the selling point of Firefox? Perhaps it's more that the browser is fun to use and is cutting edge? I can go with either, but I feel like fun and cutting edge is an easier sell these days.

Component Issues:

003 firefox issues

Newer UI's are getting larger and streamlined, not only to work with phones and tablets, but also much more common touchscreen laptops and TVs. Size and simplicity are key, especially since fingers and pens only have a minimal width. A lot of these sections can be replaced with a headroom or a main nav to sub nav architectural pattern. Tabs are also another option.

Brand Issues:

004 firefox issues

The greatest asset Mozilla has is the Firefox brand and identity. That includes both the vibrant blue and orange colors with the shapes of fire and a fox. These new icons are outlined in such a way to have non-distinct silhouettes (ie, diamondish with circle and a line). These could be icons for roughly any brand and suit a multitude of purposes. Plus you're giving up the colors and the fire and the fox for no discernable benefit. It might be considered fine now with only a few icons like this, but what about when you have 10+?

Content Issues:

005 firefox issues

Is this copy just filler or is there a reason we have this down here? It's 2019 and everyone I know in marketing would rather replace this with with video (ie, testimonial) and place it at the top of the page. I personally don't see getting respect or the dangers of web surfing as the prime motivation for browser selection.

Like most apps, the user priority should be 1: speed/responsiveness, 2: layout compatibility/bugs, and 3: plugin ecosystem/ease of use.

PART 2, Redesign:

New Firefox flat logo/icon.

More Fire, More Fox.

This logo was designed to retain design elements and coloration of Firefox at it's peak popularity, while also including a simplified -- yet clear -- flat design. Swag and likeability with a strong user connection was also a high priority. Looks good to me for a solid first pass.

NOTE: smaller resized icons still need darker outlines and sub-pixel detail to really tighten the separation and pop, but gradients aren't needed for this.

UX Redesign:

New UX sketch based off the logo

Logo-based Sketch.

Now that the logo is done we can use it to begin to sketch-in and formulate icons and components. It's rough, but this is just to begin the initial layout and blocked forms. Digital shading can be applied to both accentuate and segment sections.

New UX featuring a apps in a modern, flat 2.0 UI.

From Cluttered to Clean.

First, the subdued purple and orange really knock back the interface and unleash the colors of the various icons and branding. A modern Flat 2.0 or Flat+, is a Flat style with depth indicaTors to separate out components and content using a minimal of depth cues. In this case, both the main carousel, it's active item, and the footer have such cues.

A flaming fox is clear and included in every icon which solidifies branding while also establishing both a professional, yet personable experience. Plus it's like Pokémon or My Little Pony -- gotta collect them all! Some of the apps are renamed to be more clear/original

Then the various device and types of the Firefox browser are simply color coded, but now sport newly minted icons for each device...

▼ Firefox Sub-Icons:

  • ☑⁡⁡ Mobile: a modern phone with no back button.
  • ☑⁡⁡ XR: a slim form facTor XR device on a gender neutral head.
  • ☑⁡⁡ Nightly: moon with puzzle piece missing.
  • ☑⁡⁡ Coder: bug with a removal 'x' on it.

▼ App Name Changes:

  • ☑⁡⁡ Lockwise to Lockpass: Sounds more like password, also a pass for locks.
  • ☑⁡⁡ Protected Network to Secure-Fi: less characters and more relevant name.
  • ☑⁡⁡ Developer to Coder: Less characters, similar name to the popular IDE Visual Studio Code.
  • ☑⁡⁡ Reality to XR: Less characters and covers evolving experiences without causing an uproar.

NOTE on AR/VR/MR/XR: This industry is rapidly expanding and evolving. VR or Virtual Reality and AR or Augmented Reality are overlapping more and more. Still many professionals and users still vocally (and abusively) demand distinction between various experiences.

MR or Mixed Reality MUST include interacting with reality outside of an augmented overlay and audio, ie, changing stage lights, on/offing fans, scent stimulation, and/or robotics or mechatronic locomotion like a conveyor belt. XR or eXtended Reality (or even just X Reality) is the direct and proper way to refer to the umbrella of all these experiences.

Like this post? Read more from the ^UX topic.

       : NEWS