1142773 - [UX] Visual design for new user onboarding progress bar

Status: RESOLVED WONTFIX

(Firefox :: General, defect)

Description

[Verdi [:verdi] Best to slack me]

Attachment: progress bar

Bug 1126319 specifies a progress bar that measures a user's place in the Firefox installation and setup process. We need a final visual design for this.

The progress bar will be need to be implemented on the web, in the stub installer and the migrator. An example of how this might work can be seen in this interactive mockup of the whole flow - http://people.mozilla.org/~mverdi/projects/firstrun/prototype

I've attached an image of that example progress bar from that prototype.

Comment 1

[Jonathan French (:jfrench)]

I wonder if you could leverage the new font-awesome fa-firefox as the 'dot' (maybe a bit larger), with a progressive saturation transition as it travels down the bar? So it starts grey, and ends fully orange.
http://fontawesome.io/icon/firefox/

eg. grey - grey/orange - orange/grey - orange

Or perhaps a full fledged firefox brand logo if it made more sense from a legal and compliance standpoint. Anyway, just an idea :)

Comment 2

[Jonathan French (:jfrench)]

Attachment: timelineMock_rev1

Maybe something like this :) I have the psd if you'd like it for Invision.

Comment 3

[Chris More [:cmore]]

verdi: check out the progress bar idea that :jfrench had above. Feedback?

Comment 4

[Chris More [:cmore]]

The only feedback about the logo progress bar vs a simple dot is that the dot will have to be big enough to be able to distinguish it as a logo.

Comment 5

[Jonathan French (:jfrench)]

Attachment: timelineMock_rev1_psd

Here's the psd also for context :) If you turn off the 2nd blocker layer, it illustrates the relative size increase for the new fox-dot. I built the mock over the existing Invision progress bar and its dimensions.

Comment 6

[Verdi [:verdi] Best to slack me]

I'm sorry to take so long to answer here. We've decided on a different approach to onboarding which doesn't need a progress bar. More details here - https://wiki.mozilla.org/Firefox/Onboarding and in Bug 1229599.