[Design] Difficulty in identifying how soon a challenge starts or closes when using the new filters

[tschaffter]

What product(s) is this feature for?

OpenChallenges

Description

Along with new filters like Starting Soon, Closing Soon, etc. we have a new sorter: by Start Date.

However, the challenge cards don't include any date information so it's difficult to identify how soon the challenges start/close or even if the sorting is done in ascending or descending order (we use future dates to past dates).

Anything else?

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[tschaffter]

Added to Sprint 23.10

[vpchung]

I thought of two options:

1. Move the status from the footer into the same space as the tagline/headline (left column). One of the benefits of this is that it would allow there to be more space in the footer for the list of incentives.

2. Keep the status where it is (right column).

In both designs, there would be some allusion to the start/end date, either explicitly (top row) or implicitly (bottom row):

[!NOTE] I have also removed the button border from the status (that Adam previously mentioned as a possible design flaw) and instead utilized a radio button to signify the status.

[vpchung]

@tschaffter @rrchai @gaiaandreoletti @mdsage1

[tschaffter]

I prefer Option 2, see notes below:

• Option 1 would increase the height of the card, so technically Option 2 should have a smaller height. I prefer Option 2 because the cards are more compact.
• I would remove the parenthesis and start the line with a capital letter: (starts in 2 weeks) => Starts in 2 weeks
• The format of the date mm/dd/yyyy used for active challenges make confuse non-US users. Instead we could use Ends in 2 months|weeks|days.

[vpchung]

Latest iteration

[tschaffter]

Shall we get rid of the vertical space between the description and the card footer? Below is the production card for reference where the vertical space is not included. Unless it's part of the new design? The font on the new card seems smaller (e.g. description) compared to the production card too. Not sure if the difference comes from a different zoom in/out.

[vpchung]

Below is the production card for reference where the vertical space is not included. Unless it's part of the new design?

The screenshots I provided are from our Figma mockups, which have not been updated to reflect the changes made in the app, thus explaining the extraneous space.

I will update the mockups in future iterations.

[tschaffter]

I like the new design. We can discuss the font size and line spacing as part of the implementation review process.

[vpchung]

Just for you, @tschaffter 😬

[tschaffter]

The implementation of the design change will be tracked in https://github.com/Sage-Bionetworks/sage-monorepo/issues/2240