Web: design - gitcoin.co/activity

[owocki]

as an end user, i want to see an activity feed of whats going on on the site, so i can see the recent action.

design - a Venmo type feed of recently bounty actions.

this will be used during livestream and also potentially asynchronously somewhere else.. it could live at gitcoin.co/activity

please see #notif-gitcoin on slack for inspiriation

bounty

• design delivered in sketch files
• design must adhere to the brand guidelines (see https://github.com/gitcoinco/creative )
• design must be responsive

[mkosowsk]

A big 👍 to this, really would show off work in the community :)

[gitcoinbot]

__This issue now has a funding of 0.15 ETH (77.09 USD @ $513.94/ETH) attached to it.__

• If you would like to work on this issue you can claim it here.
• If you've completed this issue and want to claim the bounty you can do so here
• Questions? Get help on the Gitcoin Slack
• $4501.25 more Funded OSS Work Available at: https://gitcoin.co/explorer

[jakerockland]

@owocki top is web, bottom is mobile -- thoughts?

[owocki]

Looks purdy to me.

I wonder if we'll want to add icons for each discreet action (tipping vs funding a issue vs submitting work).

@PixelantDesign any comments?

[jakerockland]

@owocki I was thinking about adding icons for each action but wasn't sure if you guys wanted to introduce an icon set/if that would just make things busier/noisy but if so maybe to the left of the @USERNAME of each activity item?

[PixelantDesign]

Looking good @jakerockland!

TYPE
Would you mind updating the font to Muli. Here is a link to the Gitcoin UI Toolkit

Funding Info and Time stamp: Let's try to get it all on one line and in Navy Blue #0D0764

ACTIVITY FEED
We have an activity feed on the Explorer details page and now the profile by @willsputra. The content is a little different but would be great if we could use the same style containers for the list. See screenshot below:

You might also be able to expand the activity grid (see will's feed).

ICONS
I think it would be nice to be able to see at a glance what's being started, funded, etc. We're using the latest Font Awesome, maybe there are some icons there that we can leverage and colorize. Placement wise, maybe the far right of the row makes sense for the icons to live.

Otherwise, looking good!

Here is Will's activity feed for reference:

[jakerockland]

@PixelantDesign Thanks for the feedback, should be able to make these changes tomorrow evening and post an updated design here. 😄BTW, this Gitcoin UI Toolkit you linked to is fantastic. Thank you. 🙌

Small note about the font, I think the brand guide here needs to be updated, that's why I was using Futura 😓

[willsputra]

Looks good @jakerockland! 🎉

I'll just add in a tiny comment: maybe we could try using the blue/green color for displaying ETH/USD value (see https://gitcoin.co/explorer)?

[jakerockland]

@owocki @PixelantDesign @willsputra I believe I've taken everyone's feedback into account with this updated design, I'm definitely happier with it than the initial. Any other revisions to make?

[PixelantDesign]

Very cool! Love it! Lets build!

[PixelantDesign]

Hmm... ok don’t hate me... I’m wondering if a different icon than the Like thumbs up would make more sense for tips. Thoughts?

Also, should payment received be ETH?

[jakerockland]

@Pixelant Happy to update the design but the thumbs up seemed like the best choice to me 😅 I ideally would like a top hat icon but Font Awesome font doesn’t support that. When you say payment received should be ETH do you mean the ETH icon? I was a bit hesitant to use that as an icon representing payment as sometimes payment is in DAI, etc.

Also on a different but related note, how does one submit work for a bounty like this where there isn’t necessarily a PR to be made (or do I make a PR to the /creative repo)? @owocki

On Apr 19, 2018, 5:58 PM -0600, Pixelant [e-mail], wrote:

Hmm... ok don’t hate me... I’m wondering if a different icon than the Like thumbs up would make more sense for tips. Thoughts?
Also, should payment received be ETH?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[PixelantDesign]

@owocki what were all of the states of the activities you were hoping to highlight in the feed? As of right now looks like there are only four.

@jakerockland Here are some ideas about other metaphors that might work:

Start Work
Stopwatch - Empty State
https://fontawesome.com/icons/stopwatch?style=solid

Stop Work
Stop Watch - Filled State

Submit Work - code file
https://fontawesome.com/icons/file-code?style=solid

For Fund and Submit, Great points bout DAI.
Maybe use the same icon but we can use distinguishing colors during the build phase?

[owocki]

@owocki what were all of the states of the activities you were hoping to highlight in the feed? As of right now looks like there are only four.

sorry, i should have put this in the original ticket

• opened issue
• started work
• stopped work
• submitted work
• accepted work
• increaed funding
• canceled bounty
• new tip
• tip received

in the future,

• new dev grant
• new dev grant contributor
• dev dev grant project update

for the 'future' ones, i dont think we need to worry about them now.. we will tackle those later

[owocki]

@PixelantDesign @jakerockland what should we do if the activity feed has 1000 items? should we have pagination or a 'show more' button?

[owocki]

https://github.com/gitcoinco/web/issues/925

[jakerockland]

@owocki Yeah I think pagination for every 50 items to "show more" or something along those lines is best. Just to clarify on outstanding revisions to make for this issue, is it just assigning a Font Awesome icon for each of the items in the above list?

Also @PixelantDesign I'm a bit hesitant about the idea of using color to distinguish between things like funding and release of funds with the same icon. It seems strange to me to use a design language that is mostly iconography but then in a small handful of cases also involves color as it seems like there are only a few activity types where we would want the same icon but different color. Thoughts?

[owocki]

defer to @PixelantDesign on the icon bit

[PixelantDesign]

@jakerockland @owocki @mbeacom

I think pagination makes sense. We should decide how much Activity a user can go back and see. Is it realistic that someone will want to go all the way back to the beginning?

Should probably add a count at the top of the list

what do you all think of this at the bottom of the list (without the circles)?

Here are some ideas for iconography
opened issue - a box
started work - hourglass
stopped work - hourglass
submitted work - box with arrow? Or code icon on a page
accepted work - once a hunter accepts, it gets paid out, so we could just use the dollar icon here as well
increased funding = + dollar icon
canceled bounty - maybe an x or ghostbuster sign?
new tip - lighting bolt, since users already associate this with our tips feature
tip received - lightning bolt in a box? Open to ideas here

I think it’s okay if we don’t stick to the font awesome icons. Better to have an icon that makes sense vs. sticking with a defined set.

[jakerockland]

@PixelantDesign @owocki will update the design tonight to include examples of all types of activity of interest, I like the suggestions on icons, but will think about on this a bit more -- I agree that we can move from just the font awesome icon set if it is a better fit to do so.

[jakerockland]

@owocki @PixelantDesign so here is an updated design that I think addresses all the types of activity you note. Just want to clarify the "opened issue" activity noted above is the same as "funded an issue"? My understanding was that it is and so it seemed more fitting to use the $ icon for that activity. @PixelantDesign what are your thoughts on the icon usage here in general?

Any other revisions here?

[owocki]

ust want to clarify the "opened issue" activity noted above is the same as "funded an issue"?

thats right!

Any other revisions here?

lets not let perfect be the enemy of good. i say :shipit: and lets get it coded!

[jakerockland]

@owocki awesome! how do I submit work for bounties like this one and for #892? Do I need open a PR?

[owocki]

@jakerockland no need to open a PR.. just leave that field blank when you submit the issue

[PixelantDesign]

Looks good @jakerockland, is the X for "Cancel"? It sort of looks like I can close out that activity feed item.

[jakerockland]

@PixelantDesign Hmm yeah I see what you mean -- swapped the icon here which I think is better.

Also have attached the .sketch files here!

ActivityStreamDesign.zip

[gitcoinbot]

__Work for 0.15 ETH (95.69 USD @ $637.91/ETH) has been submitted by__:

1. @jakerockland

Submitters, please leave a comment to let the funder (@owocki) (and the other parties involved) that you've submitted you work. If you don't leave a comment, the funder may expire your submission at their discretion.

• Learn more on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $5372.11 more Funded OSS Work Available at: https://gitcoin.co/explorer

[jakerockland]

@owocki pinging you re: @gitcoinbot

[owocki]

Submitters, please leave a comment to let the funder (@owocki) (and the other parties involved) that you've submitted you work. If you don't leave a comment, the funder may expire your submission at their discretion.

this copy is probably a little superflous.. im going to change it

[gitcoinbot]

__The funding of 0.15 ETH (95.93 USD @ $639.52/ETH) attached to this issue has been approved & issued to @jakerockland.__

• Learn more at on the gitcoin issue page
• Questions? Get help on the Gitcoin Slack
• $5288.29 more Funded OSS Work Available at: https://gitcoin.co/explorer

[PixelantDesign]

@jakerockland do you want to PR the creative repo?

[jakerockland]

@PixelantDesign I can if you'd like? Apologies I'm a bit unclear if that's wanted with the issue closing/opening?

[owocki]

@PixelantDesign just left for an international trip so i'll answer for her. yes that 'd be graet jake! https://github.com/gitcoinco/creative