[UX] Visual design for new user onboarding progress bar

RESOLVED WONTFIX

Status

()

Firefox
General
RESOLVED WONTFIX
3 years ago
2 years ago

People

(Reporter: verdi, Unassigned)

Tracking

39 Branch
x86
All
Points:
---
Bug Flags:
firefox-backlog +
qe-verify -

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [ux][fxgrowth])

Attachments

(3 attachments)

(Reporter)

Description

3 years ago
Created attachment 8576960 [details]
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.

Updated

3 years ago
Flags: qe-verify-
Flags: firefox-backlog+
Whiteboard: [ux]
(Reporter)

Updated

3 years ago
Whiteboard: [ux] → [ux][fxgrowth]
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 :)
Created attachment 8676578 [details]
timelineMock_rev1

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

Comment 3

3 years ago
verdi: check out the progress bar idea that :jfrench had above. Feedback?
Flags: needinfo?(mverdi)

Comment 4

3 years ago
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.
Created attachment 8678289 [details]
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.
(Reporter)

Comment 6

2 years ago
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.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Flags: needinfo?(mverdi)
Resolution: --- → WONTFIX
(Reporter)

Updated

2 years ago
No longer blocks: 1142762
You need to log in before you can comment on or make changes to this bug.