1788274 - Expire new colourways on January 17 to align with release calendar and resolve date vs year confusion in expiry time

Status: RESOLVED FIXED

(Firefox :: Theme, defect, P1)

Description

[Tiffanie Shakespeare [:tif]]

Attachment: Screen Shot 2022-08-31 at 9.18.19 AM.png

steps to reproduce/what did you do?

• step 1 - Open to Firefox View
• step 2 - Observe

Within the colorways section on the right...

• the Expires outline, part of it blends in with my orange theme and looks off
• Expiration date - is it Jan 23rd or Jan 2023?
• "Try colorways" is confusing / unexpected b/c I've already tried it - my current theme is orange
• is "colorways" considered a proper noun since it's the name of this feature? the button has it lowercase
• regardless of Jan 23 or Jan 2023 - having a prominent expiration date makes me feel a sense of urgency that i immediately dismiss b/c the date is so far into the future. i'm curious about this date and why something sooner wasn't chosen.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Firefox View' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Ray Fambro]

(In reply to Tiffanie Shakespeare [:tif] - slack @tif preferred from comment #0)

Created attachment 9292492 [details]
Screen Shot 2022-08-31 at 9.18.19 AM.png

steps to reproduce/what did you do?

• step 1 - Open to Firefox View
• step 2 - Observe

Within the colorways section on the right...

• the Expires outline, part of it blends in with my orange theme and looks off
• Expiration date - is it Jan 23rd or Jan 2023?
• "Try colorways" is confusing / unexpected b/c I've already tried it - my current theme is orange
• is "colorways" considered a proper noun since it's the name of this feature? the button has it lowercase
• regardless of Jan 23 or Jan 2023 - having a prominent expiration date makes me feel a sense of urgency that i immediately dismiss b/c the date is so far into the future. i'm curious about this date and why something sooner wasn't chosen.

Thanks for the comments!

• Great catch on the orange color in the pill potentially giving a washed out effect against the background. This is something we can look into.
• Expiration date is Jan 23, 2023. We didn't see a need to include the year, as it shouldn't be applicable in the context of this UI.
• "Try colorways" refers to the colorways in this specific collection. Assuming your orange colorway came from a previous collection? Once you select a colorway from the active collection, this CTA changes to read "Change colorway".
• Yes, but it's lower case in the button because we are using sentence casing.
• Helpful feedback on the date! We are planning to do some user research to get more insight around what might make this strategy more compelling. Having an expiration incites "exclusivity" and the hope is that it will trigger more interest because of this. In the future, we may play around with shorter timeframes for collection durations.

Comment 3

[:Gijs (he/him)]

(In reply to Ray Fambro from comment #2)

(In reply to Tiffanie Shakespeare [:tif] - slack @tif preferred from comment #0)

Created attachment 9292492 [details]
Screen Shot 2022-08-31 at 9.18.19 AM.png

steps to reproduce/what did you do?

• step 1 - Open to Firefox View
• step 2 - Observe

Within the colorways section on the right...

• the Expires outline, part of it blends in with my orange theme and looks off
• Expiration date - is it Jan 23rd or Jan 2023?
• "Try colorways" is confusing / unexpected b/c I've already tried it - my current theme is orange
• is "colorways" considered a proper noun since it's the name of this feature? the button has it lowercase
• regardless of Jan 23 or Jan 2023 - having a prominent expiration date makes me feel a sense of urgency that i immediately dismiss b/c the date is so far into the future. i'm curious about this date and why something sooner wasn't chosen.

Thanks for the comments!

• Great catch on the orange color in the pill potentially giving a washed out effect against the background. This is something we can look into.

bug 1770534 covers this for the sync tab setup but we can morph it to include this item? In general we prefer 1 thing per bug and this bug is a bit of a big list of various different things (even if all relating to the same UI).

• Expiration date is Jan 23, 2023. We didn't see a need to include the year, as it shouldn't be applicable in the context of this UI.

Sure, but Tif is right that it's confusing to folks - they don't know that we decided not to include the year, they just read "January 23" and wonder if the number is a date or a year. This is tricky to fix because we don't fully control the intricacies of the date format. :flod, do you know if there's a way to get a less confusing date that still only has these 2 elements (ie month + date), using fluent's primitives (see current string)? Like making it say "January 23rd" or something instead?

The other more trivial solution would be to change the date. I don't actually know why we're using the 23rd - it doesn't correspond to any release date. Ray, do you know if we can pull it forward or back by 1 or 2 days to help resolve the ambiguity?

• "Try colorways" refers to the colorways in this specific collection. Assuming your orange colorway came from a previous collection? Once you select a colorway from the active collection, this CTA changes to read "Change colorway".
• Yes, but it's lower case in the button because we are using sentence casing.
• Helpful feedback on the date! We are planning to do some user research to get more insight around what might make this strategy more compelling. Having an expiration incites "exclusivity" and the hope is that it will trigger more interest because of this. In the future, we may play around with shorter timeframes for collection durations.

Beyond the zap gradient and the date, is there anything product thinks needs to happen here? I'd like to make sure this ticket is actionable for engineering - it sounds like you think all the other items are not ones we want to address right now but I'd like to confirm before morphing bugs.

Comment 4

[Francesco Lodolo [:flod]]

(In reply to :Gijs (he/him) from comment #3)

Sure, but Tif is right that it's confusing to folks - they don't know that we decided not to include the year, they just read "January 23" and wonder if the number is a date or a year. This is tricky to fix because we don't fully control the intricacies of the date format. :flod, do you know if there's a way to get a less confusing date that still only has these 2 elements (ie month + date), using fluent's primitives (see current string)? Like making it say "January 23rd" or something instead?

Fluent uses the Intl libraries, the only two options for days are numeric and 2-digits.
https://tc39.es/ecma402/#table-datetimeformat-components

There is no format that allows to output an ordinal number from the date formatter, you'd need to build it from scratch for English (combining Intl.DateTimeFormat with Intl.PluralRules).

let date = new Date(Date.UTC(2023, 0, 23, 0, 0, 0, 0)); 
let options = {
    month: 'long',
    year: 'numeric',
    day: '2-digit'
};
console.log(new Intl.DateTimeFormat('en-US', options).format(date));

Even this would output cardinal numbers, i.e. January 23, 2023.

Comment 5

[Ray Fambro]

Gijs, let's change the date to Jan 17. Our intention was to align with the release cycle, so good catch.

The zap gradient and the date change are the items that we can action on now. Let's morph the bugs :)

Comment 6

[Dão Gottwald [:dao]]

Attachment: Bug 1788274 - Expire new colourways on January 17 to align with release calendar and resolve date vs year confusion in expiry time. r=amy

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0fd826d2e238
Expire new colourways on January 17 to align with release calendar and resolve date vs year confusion in expiry time. r=amy

Comment 8

[Cristina Cozmuta (:CrissCozmuta)]

https://hg.mozilla.org/mozilla-central/rev/0fd826d2e238