Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project: Homepage redesign #2417

Closed
xdamman opened this issue Sep 11, 2019 · 33 comments
Closed

Project: Homepage redesign #2417

xdamman opened this issue Sep 11, 2019 · 33 comments
Labels

Comments

@xdamman
Copy link
Contributor

@xdamman xdamman commented Sep 11, 2019

Wireframe Home page open collective B

Feedback so far

  • Work on About + open source sections, maybe make it less prominent?
  • Need a link to documentation, to blog, to our github repo (maybe use the icons now within About section for that)
  • Need for a /transparency page
  • Add another call to action to create a collective after “They are using Open Collective”
    Make it visually a different section after that.
  • Spend money in the header instead of disburse (more correct but less common in international English)

I will close comments by the end of this week and share a new wireframe for review.

@xdamman xdamman mentioned this issue Sep 11, 2019
0 of 4 tasks complete
@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Sep 11, 2019

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Sep 11, 2019

You can already make copy suggestions in this google doc.

@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Sep 13, 2019

Also feedback:

  • include the numbers in the transparency page not at the bottom. I think there's a general feeling that they are nos very accurate.
@znarf znarf added the project label Oct 2, 2019
@Memo-Es

This comment has been minimized.

Copy link

@Memo-Es Memo-Es commented Nov 12, 2019

Latest illustration update

These are the drafts applied to the current homepage to solve the conceptual links to the messaging and interface design. The illustrations that are approved will be taken to production.
@xdamman @piamancini

The main illustration (Make your community sustainable) is still on the conceptualization. Bellow inside the table it's shown the progress around this concept ↓

Homepage-illustrations

Concept Option 1 Option 2 Option 3
Make your community sustainable Community  gif2   
Collect money Collect money 3   g1   Collect_money_2
Spend money Spend money     
Manage money Manage money     
Open Collective for fiscal sponsors      
They are using Open Collective (Discovery)   Discovery   
We are open source (Open source & open data)    

*Note: It is sufficient if we only have one option for each concept if it's solid enough, the other options can be used in other parts of the platform.

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Nov 12, 2019

Looking good! Please let me know when the time is right to do copy edits and the best way to do them.

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Nov 13, 2019

Make your community sustainable: I like both options. I like the animation. I'd just have colors that pop more. Make it feel more like (citizen) spring than autumn.

I like the option 2 for collect money because it's about collecting money together.

For spending money I don't understand the image. It feels like someone alone on his computer. That doesn't convey a sense of community. It is also about spending money together.

For manage money, I'd love to see more than one area so that the person arranges the stars between different places (collectives / circles / working groups). Here again, conveying a sense of together would be good.

Discovery: looks great, I'd just here again show multiple collectives, 2 or 3 of those "stains" with stars.

@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Nov 13, 2019

Make your community sustainable: I like both options. I like the animation. I'd just have colors that pop more. Make it feel more like (citizen) spring than autumn

@xdamman yes totally, these are black and white pen and paper examples to see if they fit. color scheme will be bright. You can see some color examples here

I like the option 2 for collect money because it's about collecting money together.

+1

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Nov 15, 2019

Where is the 2 minute animated explainer video going to fit in on the front page?

https://www.youtube.com/watch?v=IBU5fSILAe8

@Memo-Es

This comment has been minimized.

Copy link

@Memo-Es Memo-Es commented Nov 20, 2019

Illustrations update

Concept Option 1 Option 2 Option 3
Make your community sustainable Main illustration in WIP
Collect money Collect money 3 g1 Green light for production (considering the color usage proposal) Collect_money_2
Spend money Spend money Spend-money
Manage money Manage money
Open Collective for fiscal sponsors Conceptualization in progress
They are using Open Collective (Discovery) Discovery Green light for production (considering the color usage proposal and adding 1 or more stains with stars)
We are open source (Open source & open data) os2 os
Join us (new) Conceptualization in progress

To manage money, I'd love to see more than one area so that the person arranges the stars between different places (collectives/circles/working groups). Here again, conveying a sense of together would be good.

  • We are thinking of a sort of composition using these three concepts that convey the sense of community more compellingly. We are basing this approach on the "Collect money" illustration.

What-can-you-do-on-open-collective

Where is the 2 minute animated explainer video going to fit in on the front page?

@alanna

  • This video has excellent messaging. We would like to have input from @xdamman and @piamancini if it makes sense to update it with the new illustrations now. If we do this, it would require an illustration/animation side-project...
    I vote for updating the explainer video and launch the home without it while it's ready.
@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Nov 20, 2019

This is really cool!

Just a short feedback about the We are open source illustration: I think the option (2) is better because the first one assumes that you know the "official" open source logo, while the second one makes it clear what the values of open-source are without knowledge pre-requisites.

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Nov 20, 2019

The illustration for spending money is still confusing to me.
I don't think it should have a computer.

People spend money on things and on people, to shops, etc.
I'd make it more "real" rather than "online".

For the video, what about having a link in the cover below or above the "create collective":
"▶️ watch the explainer video" ?

@Memo-Es

This comment has been minimized.

Copy link

@Memo-Es Memo-Es commented Nov 26, 2019

Update

Note: Color usage is not final*

Homepage

Concept Illustration Concept Illustration
Make your community sustainable collectivestars Collect money collect copy
Spend money spend copy Manage money manage copy
They are using Open Collective (Discovery) Discovery OC for fiscal sponsors starpatternhands
We are open source os Join us Community
@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Nov 27, 2019

This is looking great!
The font, lines, etc of the homepage should be more in sync with the feel of the illus. (I am assuming there hasn't been any figma design done yet)

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Nov 27, 2019

Great to see the progress.
The first illustration looks amazing.

For the rest I think there are too many illustrations. We are overdoing it. Less is more.
I'd remove the one for "They are using Open Collective" and the one for "Fiscal Hosts"

The illustration for managing money comes across as I'm keeping all that money for me.
I'd love to see that more about moving the stars between different "buckets" and also with more than one person because we are managing money together.

The colors for the join us don't work. It should blend better with the design (or vice versa)

@Memo-Es

This comment has been minimized.

Copy link

@Memo-Es Memo-Es commented Nov 27, 2019

I agree that we could remove "They are using Open Collective" (Even though it was partially approved)

Discovery: looks great, I'd just here again show multiple collectives, 2 or 3 of those "stains" with stars.

Anyway, we could use it elsewhere on the platform...

As for the colors, these are preliminary versions as I noted in the last comment.
The final design version will come after Karim is done with the "Create collective flow", we are prioritizing it for now.

@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Nov 28, 2019

I'd love to see that more about moving the stars between different "buckets" and also with more than one person because we are managing money together.

@Memo-Es the one with the stars un the different jugs can work for this. I liked that one

@Memo-Es

This comment has been minimized.

Copy link

@Memo-Es Memo-Es commented Dec 11, 2019

Update

Note: These illustrations are preliminary, cropping and color usage will likely change during final production*

@xdamman @alanna @piamancini

Homepage

@nonsodaniel

This comment has been minimized.

Copy link

@nonsodaniel nonsodaniel commented Dec 11, 2019

@znarf I would like to work on this issue as a frontend developer

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Dec 11, 2019

@Memo-Es what's the best way for me to suggest detailed changes to the text? Not changing the design at all just phrasing.

@flickz flickz assigned flickz and unassigned flickz Dec 23, 2019
@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Jan 7, 2020

@Memo-Es where is the Subscribe button - where do I click to submit my email?

image

@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Jan 7, 2020

As per @xdamman: The "Learn more" links under collect, disburse and manage should not be there.
@flickz we can remove them.

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Jan 7, 2020

@alanna @Memo-Es see this google doc for editing the copy: https://docs.google.com/document/d/1i1eP5PLfM2Tshp6Oiqnpt8lXAazJ-twFj8iQQg2SYWI/edit?usp=sharing

@flickz a few comments on the latest version that you've implemented and that I could see on https://opencollective-frontend-miltkcgtrf.now.sh/v2

@xdamman xdamman mentioned this issue Jan 7, 2020
0 of 3 tasks complete
@znarf

This comment has been minimized.

Copy link
Member

@znarf znarf commented Jan 7, 2020

"make your community sustainable" should be centered

@xdamman If I check the design, it's not, so it's a design issue. @Memo-Es can you check?

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Jan 8, 2020

I've edited the google doc with the copy here. It would be great to see these changes incorporated into the designs so we can see how it will look.

One thing missing from this page: the explainer video! I think it should go below the hero section, above "What can you do on Open Collective?". It's a great video and people have come to expect one.

@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Jan 13, 2020

@Memo-Es can you add latest approved design and copy here?

@Memo-Es Memo-Es changed the title New homepage wireframes Project: Homepage redesign Jan 13, 2020
@Memo-Es

This comment has been minimized.

Copy link

@Memo-Es Memo-Es commented Jan 13, 2020

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Jan 14, 2020

Looks great!

Just a few copy changes....

  • Watch explanatory video > Watch: 2 min explainer video
  • Discover more Collectives, Create a Collective (capital C)
  • Not only does our platform help you be transparent > Transparency is key to our product and our company
  • Subscribe to our newsletter
@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Jan 15, 2020

@Memo-Es What's the behavior when clicking on "Watch video", does it opens a modal?

@Memo-Es

This comment has been minimized.

Copy link

@Memo-Es Memo-Es commented Jan 16, 2020

@Betree Yes, a modal window with the video

@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Jan 23, 2020

@Memo-Es can you provide a design for the different states of this button? It currently does not react to hover/active...etc Or should we update the existing dark styles? (see https://styleguide.opencollective.com/#!/StyledButton/7)

Peek 23-01-2020 14-58

@BenJam

This comment has been minimized.

Copy link

@BenJam BenJam commented Jan 28, 2020

Very excited to see this #2417 (comment) and I love the new art style 💃

@Memo-Es

This comment has been minimized.

Copy link

@Memo-Es Memo-Es commented Feb 7, 2020

This version is live here https://opencollective.com/
So I hereby proceed to close this issue 🎉

There is a new small project called "Homepage polish" for other small fixes.

@Memo-Es Memo-Es closed this Feb 7, 2020
@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Feb 7, 2020

🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants
You can’t perform that action at this time.