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: Create collective flow (design) #2366

Open
xdamman opened this issue Aug 26, 2019 · 34 comments
Open

Project: Create collective flow (design) #2366

xdamman opened this issue Aug 26, 2019 · 34 comments

Comments

@xdamman
Copy link
Contributor

@xdamman xdamman commented Aug 26, 2019

New flow to create a collective to embrace the new business model discussed in #2251.

This closes #2331 #2295 #2251

Links

Design

Next steps:

  • Work on the specifications to make sure we don't forget anything big
  • @opencollective/design to work on wireframes (with me)
  • Call with the team to discuss the first wireframes once ready to share
  • Second iteration on wireframes
  • Call to approve the wireframes
  • Design the different screens
  • Implementation
  • Design fix ups based on implementation feedback
  • Staging
  • Last checks and fixes
  • Production
@Memo-Es Memo-Es pinned this issue Aug 26, 2019
@alanna alanna unpinned this issue Aug 27, 2019
@alanna alanna pinned this issue Aug 27, 2019
@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Aug 27, 2019

Sorry unpinned by mistake

@znarf

This comment has been minimized.

Copy link
Member

@znarf znarf commented Aug 27, 2019

What is our policy for "pinned" issues? Why pinning this one over the 374 others? ping @Memo-Es

@znarf znarf added the project label Aug 27, 2019
@Memo-Es Memo-Es unpinned this issue Aug 27, 2019
@Memo-Es

This comment has been minimized.

Copy link

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

What is our policy for "pinned" issues? Why pinning this one over the 374 others? ping @Memo-Es

Sorry, I thought it was a personal feature and no one else could see it

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Nov 20, 2019

@xdamman finally got a chance to watch the Friday video where you cover this.

  • Create new fiscal host is redundant to selecting 'our organization' as bank account owner in the previous screen. It should assume that if you click 'fiscal sponsor' instead of 'our organization' that means you're not creating a new host.
  • I'm still confused about what's going to happen to open source Collectives who don't want to join OSC (want to self-host or join OC EU etc) - what will their path be, because they will likely click "open source" on that first screen. Maybe add an option on the 'apply to OSC' screen next to "github" and "manual verification" that says "use another host or start your own", which sends you back to the other flow?
@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Nov 25, 2019

  1. It's redundant but it's ok because it's a very different user story. It's one thing to use your organization as a fiscal host for your collective, it's an entirely different ballgame to become a fiscal host for others (need to define formal policies, terms of service, application process, pricing strategy, ...)
  2. There is a already a "request manual verification" button below the "Verify using Github stars" one

    If they pick manual process, they can apply to OSC or to any other host (or use their own) like any other new collective.
@Memo-Es

This comment has been minimized.

Copy link

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

Wireframes update

In a call with @alanna we talked about making ridiculously easy to create a collective so we discussed a 1-step-version and a contact extra step. (after choosing open source vs any other initiative)
Next, are the results and the comments.

Create Collective Contact
Create collective Contact

@alanna
First screen is much better! For “what does your Collective do” that’s the short description, right? We should just make sure it’s character limited to match the short description field.
The second screen looks ok, but do we really need it as part of the setup process? Can’t they add that info later if they want? The basic contact from is already built in and 99% of Collectives will just stick with that anyway.
I think we should be making this setup flow as simple as possible and focus on guiding creators to add to their Collective once they reach their actual page.

Any thoughts? @xdamman @piamancini

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Dec 5, 2019

Here's my opinion:

One major goal of the Collective onboarding redesign is to reduce barriers to new Collectives getting on board.

A big way we're achieving that is to make the initial setup super simple, then focusing on encouraging core contributors to build out their Collective based on their priorities, once their basic page is set up. If that's about financial contributions, they'll set that up. If it's about adding team members and creating updates, they'll do that. Different Collectives will have different focuses and that's OK.

So I think we should make the initial setup super simple and take out everything that's not absolutely necessary, really strip it down. I think what's on this single screen is enough:

Screen Shot 2019-12-05 at 3 52 30 PM

Then, we can really invest in the experience of new users once they reach their new Collective page, having really good action buttons for all the ways they can build up and enhance their Collective from there. I think this will be a much improved onboarding process and help guide people to the areas that are most important for their communities.

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Dec 5, 2019

Just to clarify, I still think we need the "open source" or "other initiative" screen before this, so we can have a good experience for the large number of Collectives who are coming to us looking to join Open Source Collective. The designs already shared above for that flow are great. I hope this is a temporary state, and in the future we have many other communities just as large as Open Source, but for now we should make sure it's an easy flow for them.

@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Dec 5, 2019

100% agree with @alanna on this one. I think asking for contact details here is a distraction.

The smart default of having a contact form will probably fit most collectives, at least at the begining. We should make it easy to change.

@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Dec 5, 2019

I agree - having to think about what's their preferred contact details at the beginning can make them have to go back to their communities to figure this out, therefore distracting them from starting a collective. This doesn't seem essential at this point in the flow.

@Memo-Es

This comment has been minimized.

Copy link

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

Update

This is the version presented in today's demo, it features a 1-step collective creation with special attention on the collective values (See values modal). And the start of the onboarding inside the collective page.

Link to the prototype
@xdamman @alanna @piamancini

Sign in → Type of collective → Create collective → Values modal → Onboarding 1 → Onboarding 2 → Onboarding 3 →
1 Sign in 2 Type of collective 5  Create collective 6 Values modal Onboarding 1 Onboarding 2 Onboarding 3
@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Dec 7, 2019

I think this is very well resolved @Memo-Es . It allows for @xdamman's request to have the contact form details in the flow, without blocking it with them.

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Dec 8, 2019

Looks good!

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Dec 8, 2019

Looks good.

However, there is a confusion in the last step “choose the way people can contact Agora”. Social media accounts are not ways to contact the collective, they are primarily ways to receive updates.

What was wrong with the wireframe of Karim for that particular step? I understand there was a confusion between the concept of recipient and core contributor (since we don’t distinguish yet between the two), but adding a step “add core contributors” before seems to solve that, no?

I also really think that we don’t understand each other in those conversations. The experience of the team and focus is mostly with open source communities. When was the last time that you started or joined a non open source collective? What was your experience? From my experience, one of the very first steps they do is create a gmail address (or protonmail) so that they can be contacted. They absolutely need an email address.

I understand that today most collectives on opencollective.com are open source and those don’t need (and probably don’t even want) yet another way to be contacted. So maybe we can skip that step for open source collectives?

Another way to solve this issue is to put this feature out of the open collective core and ask hosts of non open source collective to finance the development of such feature. This would mean that we need to think more in terms of enabling hosts to customize the experience.

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Dec 8, 2019

From my experience, one of the very first steps they do is create a gmail address (or protonmail) so that they can be contacted. They absolutely need an email address.

We already have contact functionality built in. There's a nice button and form. Users will not have a problem contacting a Collective even if they don't add extra contact info. The screen in the flow here gives them many options for adding more ways to communicate if they want.

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Dec 9, 2019

That's definitely not the best for non open source collectives. It would go a very long way for them to be able to share in other places (posters, flyers, emails, ...) an actual email address. But let's move on. We will make this part of another project lead by non open source hosts.

I hope this is a temporary state, and in the future we have many other communities just as large as Open Source, but for now we should make sure it's an easy flow for them.

Same. But there is a chicken and egg here. In order to make other types big we need to make a statement and drive attention to them. So I'd love to see a third option on the selection of type of collective:

  • For Open Source Projects
  • For Local Groups of #ClimateJustice Movements
  • For all other initiatives (maybe this one can just be a link below in the same style as "skip")

In the same way that there is a special flow for open source projects, there could eventually be a special flow for #ClimateJustice movements (not now though).

A big way we're achieving that is to make the initial setup super simple, then focusing on encouraging core contributors to build out their Collective based on their priorities, once their basic page is set up. If that's about financial contributions, they'll set that up. If it's about adding team members and creating updates, they'll do that. Different Collectives will have different focuses and that's OK.

I agree with that. So instead of having an onboarding like this

step 1 step 2 step 3

Why not simply have good calls to action within the page where sections are empty at first?
Maybe also add a place with check marks showing a list of TODOs (not as a modal that can be quickly dismissed then people don't know how to ever get back to it)

  • Add a logo
  • Add a fiscal host
  • Edit tiers

This is also a good opportunity to improve how people can get to /edit (the gear on the avatar is not obvious).

@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Dec 9, 2019

Why not simply have good calls to action within the page where sections are empty at first?
Maybe also add a place with check marks showing a list of TODOs (not as a modal that can be quickly dismissed then people don't know how to ever get back to it)

I think this design achieves that without getting in the way of users. We want them to add contributors but we want them to be able to skip it as well. It's like when you set up a phone, you can go through all the steps of click skip and finish later.

At this stage, we would like to start implementing instead of going back to the drawing board. I don't think the current design is going to be substantially better by adding CTAs - which by the way, you see already when you are logged in as an admin. Sure they, can be improved, but the goal of making it very easy for collectives to start is achieved here.

If you don't think the contact is important now, we can remove that step. I don't quite follow what you want to say above in relation to that.

I am ok with the idea of adding open source, climate change and others. Where would you take the climate change ones to? How different is is from the others path?

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Dec 9, 2019

Personally I don't think we need more complexity at this point, and I don't see the necessity of adding more options to the initial "open source or other" selection screen. The only reason we have that branching option is because we have a completely seperate technical implementation of the onboarding process for open source projects, i.e. the Github verification flow. There's no need for a separation for other categories unless they have a similar specialised flow.

I look forward to a time when there are many verticals who create their own unique onboard flows and it's no longer up to Open Collective to build and design them, but we're not there yet. The goal now is to make onboarding as easy and simple as possible, while not damaging the existing open source onboarding process. I think the design where it is now achieves this, and we should move forward. Otherwise we are delaying what will be a big improvement for our user experience and letting the perfect be the enemy of the good.

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Jan 8, 2020

Here are my comments based on latest renderings from @Memo-Es

@Memo-Es

This comment has been minimized.

Copy link

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

@xdamman Could you elaborate a little bit more on this one?

68747470733a2f2f642e70722f667265652f692f49773059344d2b

I made the prototype private because we are working on it right now, also tomorrow will share a google doc for copy editing

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Jan 9, 2020

That screen is about “Contact” as the top of the modal suggests.

Twitter is before all a tool to communicate and follow updates. So that’s not the right place to ask for their twitter account. It should be asked along with their website url, facebook page, etc. (Btw, most collectives don’t have a twitter account, most however do have a facebook one)

So, when it comes to contact the collective, open source collectives will most likely opt to redirect people to write an issue on their repo, e.g. https://github.com/opencollective/opencollective/issues
All other collectives, either already have created a generic email address, have a website with a contact form or, most likely scenario, they don’t have anything yet and they would love to have an easy way to contact them privately. Others, would rather avoid having people to contact privately and force people to use the conversations feature to reach out to them.

So that’s the purpose of that step in that modal.

@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Jan 9, 2020

Let's also add the contact form in the design, hello@ email is not ready to be shared publicly yet but we have a contact form already developed.

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Jan 9, 2020

This screen is only showed to the creator of the collective so I’d definitely share the info@ email there. We don’t have (yet) to communicate it publicly on the collective page, we can keep that for another issue. But at least they would know that they can communicate on their own channels that email address.

Yes, maybe this modal can be larger and show more explicitly a small version of the contact form and asking, with examples, what they prefer (send those messages to an existing email address of your choice, to one we create for you info@, or, and this need probably an updated design, to an external url such as github issues or a facebook page)

@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Jan 9, 2020

But at least they would know that they can communicate on their own channels that email address.

The issue still stands if they share it by other means (social networks, their website...). We shouldn't encourage the public use of this address while the spam issue hasn't been properly investigated.

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Jan 9, 2020

Huh. We need to fix that. Is there an issue for it yet? (Couldn’t find any with a quick search on “email”) Should we consider putting a bounty on it and reach out to people with experience with such topics?

In the meantime, can you live with it? I’m part of a gazillion of collectives and spam issues has never been an issue for me so far. If not, we can omit it and just say “message will be sent to all core contributors”. But that doesn’t make me happy ;-)

(Also given that through this interface one clearly won’t be able to assume anymore that there is an info@ for every collective, mass spamming potential is reduced)

@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Jan 9, 2020

The problem is not about admins getting spammed, it's about email providers (Google) flagging our server as sending spam. We rely too much on emails (signup/SignIn) to take the risk of letting that happen. Without saying, sending spam is against Heroku's TOS and we don't want them to take action against our servers neither. So it's not just a preference, it's a real blocker.

I should have created an issue for it at the time, I'll do that tomorrow to ensure that we take action. Because of its nature it will be hard to outsource this issue, but some expertise with Mailgun and the email protocol would be really helpful. A first step would be to contact Mailgun, they probably have some answers to this.

@Memo-Es

This comment has been minimized.

Copy link

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

A couple of issues that were left pending in Friday's demo:

  1. The Open Collective way
    Right now, we are displaying three central values that conform to the Open Collective way: Your data is yours, safe space, and transparency.

Create collective

@alanna and I discussed this issue, and she thinks that if such representation of values ends up in the final design, it should be something more aligned to what we have here: https://docs.opencollective.com/help/about/values
  1. Where can people find (Collective)?
    After the last round of feedback with both @xdamman and @alanna, I worked on this option:
    Onboarding - Where can people find Collective
  • Do you have a website?
    This is one of the most critical touchpoints for fiscal hosts to choose whether if they host a collective or not. Besides is the most common referring point of the general community.

  • Turn on conversations in your collective
    We introduce the conversations feature to the new collective creator, after the onboarding they can go and start creating conversations/updates.

  • Connect your social platforms
    The fields here directly feed the following contact buttons in today's collective page:

Annotation on 2020-01-12 at 22-17-29

We removed the @opencollective address option due to the spam issue.

Any thoughts? @piamancini @Betree

@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Jan 13, 2020

LGTM thank you @Memo-Es

@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Jan 13, 2020

LGTM too. Let's acknowledge that the contact address is meant to be re-added as soon as we resolve the SPAM issue.

@xdamman

This comment has been minimized.

Copy link
Contributor Author

@xdamman xdamman commented Jan 13, 2020

As discussed in the weekly design call, let's remove the switch to activate conversations as they will be activated by default.
Let's also replace the github field with a facebook one for non open source projects (we can tell by their tag if they picked something else than open source on the first screen)

(can we have an illustration for that?)

@Betree

This comment has been minimized.

Copy link
Member

@Betree Betree commented Jan 13, 2020

@xdamman Actually there was already an issue for the SPAM problem, it was just not public: opencollectiveinc/opencollective-security#28

@piamancini

This comment has been minimized.

Copy link
Contributor

@piamancini piamancini commented Jan 13, 2020

@Memo-Es please don't block this on the climate illustration - put a placeholder please when this is ready for us to start production so we can move faster. Illustrations are taking quite a while. Thanks!

@Memo-Es

This comment has been minimized.

Copy link

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

The document for copy editing is online @alanna can you help me check it? Also @xdamman
https://docs.google.com/document/d/1_ScKV5EKtlO-hkEuXln6fgAStWxAbV6pD1PqLaSrTPE/edit?usp=sharing

I will upload the updated prototype once Cuiki finish giving maintenance to some buttons in the design system we are using inside the flow

@alanna

This comment has been minimized.

Copy link
Contributor

@alanna alanna commented Jan 23, 2020

I made a bunch of changes and comments on the Google doc.

@Memo-Es Memo-Es changed the title Create collective flow project Project: Create collective flow Feb 5, 2020
@sbinlondon sbinlondon changed the title Project: Create collective flow Project: Create collective flow (design) Feb 5, 2020
@sbinlondon sbinlondon moved this from To Do to Overview in Create Collective Flow Feb 5, 2020
@Betree Betree added this to In progress in Design tasks Feb 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Create Collective Flow
  
Overview/Context
Design tasks
  
In progress
Linked pull requests

Successfully merging a pull request may close this issue.

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