Closed Bug 1399142 Opened 2 years ago Closed 2 years ago

Onboarding Tour: Update all illustrations and change the tour overlay colors

Categories

(Firefox :: Tours, defect, P3)

57 Branch
defect

Tracking

()

VERIFIED FIXED
Firefox 58
Tracking Status
firefox57 blocking verified
firefox58 --- verified

People

(Reporter: abovens, Assigned: gasolin)

References

Details

(Whiteboard: [photon-onboarding])

Attachments

(10 files, 2 obsolete files)

The graphics on the onboarding screens don't add a lot of value, in my opinion, and need some improvements.

- The "Performance" graphic seems like a sad animal sitting in the couch looking at a speed indicator inside a browser window. There's a broken lamp, and a party hat falling off its head... Not sure what to make of it.
- The "Library" graphic gives the impression of overload, rather than organization.
- The "Address bar" graphic shows a heart inside the search field: Firefox doesn't have a heart there.
- The "Customize" graphic shows a "Pocket" icon, which is actually one of the icons that cannot be rearranged, as it is part of the address bar (~ page action icon)

Can these graphics be improved?
Flags: needinfo?(mverdi)
Flags: needinfo?(smartell)
Component: Foxfooding → New Tab Page
Attached image whimsy.jpg
I appreciate these suggestions. Our intention with the illustrations are less about conveying the exact details of how Firefox works and more about expressing that Firefox is easy, friendly, approachable and has a sense of humor. For example (see attached) the Performance illustration echos a famous ad for Memorex tape and the Customize illustration is an homage to the painter Bob Ross. We've tested these illustrations as part of the overall onboarding experience and believe, whether or not you get the references, they help communicate the desired feelings. Therefor I don't think we should address this at this time.
Flags: needinfo?(mverdi)
Priority: -- → P5
Whiteboard: [photon-onboarding][triage] → [photon-onboarding]
Jennifer, were you seeing anything in user testing that would suggest that these icons could use improvement?
I can't remember if all tour elements were tested since the performance one came later.
Flags: needinfo?(jdavidson)
(In reply to Peter Dolanjski [:pdol] from comment #2)
> Jennifer, were you seeing anything in user testing that would suggest that
> these icons could use improvement?
> I can't remember if all tour elements were tested since the performance one
> came later.

The 57 tour elements have not been tested in user research. 

Currently, we plan to do a summative user research study after release, and a usability study focusing on the updated /new, /firstrun, and animation from /firstrun to /newtab as soon as the new designs are available to test. 

(
Side notes regarding the Firefox 56 tour and icons/illustrations:
1. Report on user research with the Firefox 56 tour -- it doesn't have any findings related to illustrations because nothing notable came up regarding them: https://docs.google.com/presentation/d/152_FOhsIExOZ483oMO7Xqp8vNVjA26bP5kTdDkxlFs4/edit#slide=id.g2452dce95f_1_22)

2. In past research on the Firefox 56 tour notifications, some participants described the icons and illustrations as `playful', which was a good thing: https://docs.google.com/presentation/d/1yu7qZXOB4-tL3ktMFPLitM5KumXkuGjtysEM_iGyWa4/edit#slide=id.g2180373339_0_28.
)
Flags: needinfo?(jdavidson)
Sean will do the revision to the Onboarding graphics once he returns from paternity leave on Oct 4th.
Flags: needinfo?(smartell)
Assignee: nobody → smartell
Priority: P5 → P1
Flags: qe-verify+
Priority: P1 → P3
QA Contact: jwilliams
Hi Ritu,

Smartell will be re-doing some illustrations for the onboarding tour as there was concerns that the critters are not conveying the content. He returned from pat leave last week and will do the illustrations this week. Unfortunately, this will not make the Beta 8 deadline. This is low risk visual changes but high priority for Photon (and jean can vouch for this). Can you please help us track this uplift accordingly?
Flags: needinfo?(rkothari)
Thanks for the heads up Nicole. Tracking this one as a blocking bug. Let's review the progress regularly, as with all must-fix items for 57, the sooner we have a fix the better. Thanks!
Flags: needinfo?(rkothari)
Summary: Onboarding graphics need improvements → Onboarding Tour: Change Performance and Library icons
After conferring with Sean Martell & pdol...here's an update: 

The following were the original suggestions: 
- The "Performance" graphic seems like a sad animal sitting in the couch looking at a speed indicator inside a browser window. There's a broken lamp, and a party hat falling off its head... Not sure what to make of it.
- The "Library" graphic gives the impression of overload, rather than organization.
- The "Address bar" graphic shows a heart inside the search field: Firefox doesn't have a heart there.
- The "Customize" graphic shows a "Pocket" icon, which is actually one of the icons that cannot be rearranged, as it is part of the address bar (~ page action icon)


Here's what this bug now covers:
- The "Performance" graphic seems like a sad animal sitting in the couch looking at a speed indicator inside a browser window. There's a broken lamp, and a party hat falling off its head... Not sure what to make of it.
- The "Library" graphic gives the impression of overload, rather than organization.

This one won't change, because the 'heart' represents the favicon of their favorite engine, and is website agnostic:
- The "Address bar" graphic shows a heart inside the search field: Firefox doesn't have a heart there.

And I'll create a new bug for this and tag it for Firefox 58, assigned to Sean:
- The "Customize" graphic shows a "Pocket" icon, which is actually one of the icons that cannot be rearranged, as it is part of the address bar (~ page action icon)

(Side note: I'm user testing the comprehension of the Onboarding Tour with the new Performance and Library images.)
Summary: Onboarding Tour: Change Performance and Library icons → Onboarding Tour: Change Performance and Library illustrations
Attached image new Performance illustration (obsolete) —
created by Sean Martell
Attached image new Library illustration (obsolete) —
created by Sean Martell
Here's the bug about removing the Pocket icon from the Customize page of the Onboarding Tour: https://bugzilla.mozilla.org/show_bug.cgi?id=1408539
Hi Michael, if its the final version, please provide svg version, then we can create the illustration for nightly and uplift to v57...
Flags: needinfo?(mverdi)
Priority: P3 → P1
Assignee: smartell → gasolin
Summary: Onboarding Tour: Change Performance and Library illustrations → Onboarding Tour: Update all illustrations and change the tour overlay colors
Attachment #8918442 - Attachment is obsolete: true
Attachment #8918443 - Attachment is obsolete: true
Fred,

Working with UX on this, we are changing the color of the overlays and all the tour illustrations. Attached are the .zip file of the 6 final tour illustrations and a screenshot of the css changes being made.
Flags: needinfo?(gasolin)
Attached image tour color comparison
purple mask color is changed and the tour overlay box color is changed.
I downloaded the file and they are too big now. Need help to shape normal svg with 352x303, sync tour image to 352x268 (and it will be nice to run the svg optimize so we can just replace them).

I can check the other changes before get the updated svg.
Flags: needinfo?(gasolin)
This PART I patch only contain tour overlay colors change. Need correct image format/size for PART II patch.
Hey Fred, here is the compressed version. Let me know if it doesn't fit.
Flags: needinfo?(mverdi)
Thanks Bryant! After update, the img size are keep in the same level (10k~80k) and I can't visually see the glitch. Will provide the patch soon.
Here's how it looks like for both new and update user tours http://g.recordit.co/CKmEjgHmoi.gif
Component: New Tab Page → Tours
Comment on attachment 8919125 [details]
Bug 1399142 - PART I: update the tour overlay colors;

https://reviewboard.mozilla.org/r/190040/#review195426

::: browser/extensions/onboarding/content/onboarding.css:152
(Diff revision 1)
>    grid-template-rows: [dialog-start] 70px [page-start] 1fr [footer-start] 30px [dialog-end];
>    grid-template-columns: [dialog-start] 230px [page-start] 1fr [dialog-end];
> +  box-shadow: 0 3px rgba(0, 0, 0, 0.04);
> +}
> +
> +#onboarding-overlay.onboarding-opened > #onboarding-overlay-dialog:-moz-focusring {

the style is added to remove the focus ring when click to show the overlay
Status: NEW → ASSIGNED
Priority: P1 → P3
(In reply to Fred Lin [:gasolin] from comment #23)
> Here's how it looks like for both new and update user tours http://g.recordit.co/CKmEjgHmoi.gif
Visited but got 403 Forbidden
Comment on attachment 8919125 [details]
Bug 1399142 - PART I: update the tour overlay colors;

https://reviewboard.mozilla.org/r/190040/#review196124
Attachment #8919125 - Flags: review?(fliu) → review+
Comment on attachment 8919207 [details]
Bug 1399142 - PART II: update illustration;

https://reviewboard.mozilla.org/r/190124/#review196128
Attachment #8919207 - Flags: review?(fliu) → review+
(In reply to Fischer [:Fischer] from comment #25)
> (In reply to Fred Lin [:gasolin] from comment #23)
> > Here's how it looks like for both new and update user tours http://g.recordit.co/CKmEjgHmoi.gif
> Visited but got 403 Forbidden

Here's the origin screencast http://recordit.co/CKmEjgHmoi
Pushed by flin@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/583e197f3fee
PART I: update the tour overlay colors;r=Fischer
https://hg.mozilla.org/integration/autoland/rev/6fef2d72c817
PART II: update illustration;r=Fischer
https://hg.mozilla.org/mozilla-central/rev/583e197f3fee
https://hg.mozilla.org/mozilla-central/rev/6fef2d72c817
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 58
Comment on attachment 8919125 [details]
Bug 1399142 - PART I: update the tour overlay colors;

Approval Request Comment
[Feature/Bug causing the regression]:
[User impact if declined]: new background color when user open the onboarding overlay
[Is this code covered by automated tests?]: N
[Has the fix been verified in Nightly?]: by reviewer
[Needs manual test from QE? If yes, steps to reproduce]: Open onboarding and see the background color looks white now 
[List of other uplifts needed for the feature/fix]: N
[Is the change risky?]: N
[Why is the change risky/not risky?]: CSS only change
[String changes made/needed]: N
Attachment #8919125 - Flags: approval-mozilla-beta?
Comment on attachment 8919207 [details]
Bug 1399142 - PART II: update illustration;

Approval Request Comment
[Feature/Bug causing the regression]:
[User impact if declined]: some illustration issues in bug description will remain in v57
[Is this code covered by automated tests?]: N
[Has the fix been verified in Nightly?]: N, can verify by check the screencast
[Needs manual test from QE? If yes, steps to reproduce]: open onboarding and check all tours. go to about:config to change pref "browser.onboarding.tour-type" from `new` to `update`, refresh and wait several seconds to check update user tour sets.
[List of other uplifts needed for the feature/fix]: N
[Is the change risky?]: N
[Why is the change risky/not risky?]: image only change
[String changes made/needed]: N
Attachment #8919207 - Flags: approval-mozilla-beta?
Comment on attachment 8919125 [details]
Bug 1399142 - PART I: update the tour overlay colors;

This is planned work for 57, Beta57+
Attachment #8919125 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Attachment #8919207 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Attached image screenshots.svg
Updated the screenshots SVG based on Mark's feedback
Attached image library.svg
The current library SVG looks as if it had the vectors shifted, I believe this one fixes that.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Hi Sean, these changes are landed in nightly and beta, we can do next illustration update in the following bug, like bug 1399142
Status: REOPENED → RESOLVED
Closed: 2 years ago2 years ago
Flags: needinfo?(smartell)
Resolution: --- → FIXED
Flags: needinfo?(smartell)
Blocks: 1408539
in comment 37, I mean bug 1408539
I reproduced this issue with Fx 57.0b8, on Windows 10 x64. 
I can confirm the illustrations are updated. I verified using Fx 58.0a1 (20171025100449) and Fx 57.0b11, on Windows 10 x64, mac OS X 10.13 and Ubuntu 16.04 LTS.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.