1813418 - Normalize search widget previews for all variants

Status: VERIFIED FIXED

(Firefox for Android :: Search, defect)

Description

[Chris Peterson [:cpeterson]]

From github: https://github.com/mozilla-mobile/fenix/issues/27877.

In https://github.com/mozilla-mobile/fenix/pull/27480 we saw that there are differences between the search widget previews for each variant. Based on this comment, we should check why the icons are different sizes.

Tagging UX to add the official designs for each search widget preview.

┆Issue is synchronized with this Jira Task

Change performed by the Move to Bugzilla add-on.

Comment 1

[Chris Peterson [:cpeterson]]

Mike shared the icon sizes in this GitHub comment: https://github.com/mozilla-mobile/fenix/issues/27877#issuecomment-1330273350

For the convenience of the UX team members, here are icons and its sizes:

Release is 1,312x232.
Beta is 1,008x252.
Nightly is 1,280x200.
Dev 1,304x216.

Some additional things I noticed: it is not just a difference in size, widgets also have different shades. Release has the deepest, Beta has none.

And the Beta widget doesn't have a microphone icon.

Comment 2

[cwong]

Hi, I put together some updated designs for the search widget preview along with new icons and corrected the different shades and details. Could we also update the mic icon? The current one used looks like it's an older icon. Not sure if this change also needs to be updated on the actual widget as well.

https://www.figma.com/file/ORQ1e04zJZFOITsULYlsF2/Search-engine-widget-preview-%5BAndroid%5D?node-id=8%3A741&t=kUHHvpcbQEZOMYvD-1

Comment 3

[Alexandru Putanu [:aputanu]]

Attachment: device-2023-02-24-101333.mp4

Hi @cwong, thanks for taking a look! I noticed the mic icons we use for the actual widget differ from the one used in the previews you linked in Figma. From the codebase I see the icon we use for Focus to be more recently added (Fenix icon, A-C icon). Should we open a ticket to update the Fenix search widget icon to match the one from the previews and also improve consistency with Focus?

Comment 4

[cwong]

Hi Alexandru, yes that would be great! Let's update the Fenix search widget icon as well as Focus to keep it consistent. Thank you!

Comment 5

[Alexandru Putanu [:aputanu]]

@cwong I noticed for the debug variant of the search widget, we previously used the Firefox Preview logo, while the actual search widget for Fenix has the Android logo with the Firefox Phoenix wings (see attachment). I believe in the previews you provided the Firefox Developer Edition logo is used, do you think we should keep it or maybe continue using the Preview icon?

Comment 6

[cwong]

@Alexandru Hmm, based on the original ask, I only mocked up variants for Firefox, Beta, Nightly and Dev, so I am missing the Firefox Preview variant in the Figma file I provided. Just want to make sure I'm understanding correctly, is Firefox Preview different than Firefox Developer or are they the same thing? If they are different then we should definitely continue using the Preview icon!

Comment 7

[Alexandru Putanu [:aputanu]]

Firefox Preview is a version which is no longer built, however the wordmark is still used in the current Dev/debug version which is what got me confused, sorry about that.

Comment 8

[BMO Automation]

Attachment: [mozilla-mobile/firefox-android] Bug 1813418 - Normalize search widget previews and microphone icon (#1087)

Comment 9

[cwong]

@Alexandru, No worries! Are there anymore assets missing/needed?

Comment 10

[Alexandru Putanu [:aputanu]]

No other assets missing, opened a PR with the updated widget previews and mic icon. Thank you!

Comment 11

[cwong]

(In reply to Alexandru Putanu [:aputanu] from comment #10)

No other assets missing, opened a PR with the updated widget previews and mic icon. Thank you!

Great! Thank you :)

Comment 12

[BMO Github Automation]

Authored by https://github.com/Alexandru2909
https://github.com/mozilla-mobile/firefox-android/commit/16a80621ad4b0e5f4ec71676a8292c5351c4704c
[main] Bug 1813418 - Normalize search widget previews and microphone icon

Comment 13

[Delia Pop (Android QA)]

Attachment: Widget_Preview.png

Verified fixed on the latest Nightly 113.0a1 from 04/05 and a Firefox Preview (Debug build) build locally from main.
Devices used:

• Google Pixel 6 (Android 13)
• Lenovo Yoga Tab 11 (Android 11)
• Xiaomi Redmi Note 8T (Android 11)
• Huawei MediaPad M2 (Android 5.1.1)
  The Nightly widget preview matches the Figma design. Although there's currently a mismatch in regards to Firefox Preview, Alexandru will open a separate ticket to handle the issue.