Enhancement: New User Onboarding #2353

Closed
mattttt opened this Issue Jul 15, 2015 · 18 comments

Comments

Projects
None yet
2 participants
@mattttt
Contributor

mattttt commented Jul 15, 2015

newuser-userflow

This workflow accommodates the following scenarios:

  • Grafana Org admin invites users to an existing Org.
    • Newly invited user receives invite via email.
    • Newly invited user received invite via copy/paste.
  • Self-service model
    • New user signs up on "Sign Up" tab of Grafana Login screen.
    • New raintank user signs up on raintank website
@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Jul 15, 2015

Contributor

Here are some wireframes of interface elements referenced in the above user flow:

Org Admins: Invite User(s)
orgadmin-newusermodal

Org Admins: Pending Invitations (Clickable Prototype: http://invis.io/PU3KB5XKM )
orgadmin-pendinginvitations

Email Invitation:
emailinviteexample

New User: Complete Signup (Existing Org)
completesignup-existingorg-prefilled

New User: Complete Signup (New Org)
completesignup-neworg

Contributor

mattttt commented Jul 15, 2015

Here are some wireframes of interface elements referenced in the above user flow:

Org Admins: Invite User(s)
orgadmin-newusermodal

Org Admins: Pending Invitations (Clickable Prototype: http://invis.io/PU3KB5XKM )
orgadmin-pendinginvitations

Email Invitation:
emailinviteexample

New User: Complete Signup (Existing Org)
completesignup-existingorg-prefilled

New User: Complete Signup (New Org)
completesignup-neworg

@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Jul 15, 2015

Contributor

Here is an invision prototype of the Pending Invitations show/hide functionality.

http://invis.io/PU3KB5XKM

This page extends the core grafana list styles, but these pages are built already and in use at Raintank. They should work very nicely as a new Grafana list page. Strong CTA, filters and tabs.

Contributor

mattttt commented Jul 15, 2015

Here is an invision prototype of the Pending Invitations show/hide functionality.

http://invis.io/PU3KB5XKM

This page extends the core grafana list styles, but these pages are built already and in use at Raintank. They should work very nicely as a new Grafana list page. Strong CTA, filters and tabs.

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Jul 16, 2015

Member

really nice work matt! Will start now!

Member

torkelo commented Jul 16, 2015

really nice work matt! Will start now!

@torkelo torkelo self-assigned this Jul 16, 2015

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Jul 16, 2015

Member

One thing we can think about is terminology. The page name is "Organization Users", this is also the term used in the code for an org "membership" . The tab in your pic is also named "Users". But the button and modal call them "Members".

Its tricky as a user account in grafana is called a "User". A org membership is as I said above just a org user. Not sure what the best naming is here

Member

torkelo commented Jul 16, 2015

One thing we can think about is terminology. The page name is "Organization Users", this is also the term used in the code for an org "membership" . The tab in your pic is also named "Users". But the button and modal call them "Members".

Its tricky as a user account in grafana is called a "User". A org membership is as I said above just a org user. Not sure what the best naming is here

torkelo added a commit that referenced this issue Jul 16, 2015

@torkelo torkelo added this to the 2.2 milestone Jul 16, 2015

torkelo added a commit that referenced this issue Jul 16, 2015

@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Jul 16, 2015

Contributor

Agreed, need to agree on consistently terminology. .

Contributor

mattttt commented Jul 16, 2015

Agreed, need to agree on consistently terminology. .

torkelo added a commit that referenced this issue Jul 16, 2015

torkelo added a commit that referenced this issue Jul 17, 2015

feat(invite): more work on invite, basic creation works, added new ta…
…b directive from angular-ui and made new tab style, #2353

torkelo added a commit that referenced this issue Jul 18, 2015

torkelo added a commit that referenced this issue Jul 18, 2015

torkelo added a commit that referenced this issue Jul 19, 2015

torkelo added a commit that referenced this issue Jul 20, 2015

torkelo added a commit that referenced this issue Jul 20, 2015

torkelo added a commit that referenced this issue Jul 20, 2015

torkelo added a commit that referenced this issue Jul 20, 2015

torkelo added a commit that referenced this issue Jul 21, 2015

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Jul 29, 2015

Member

I am trying to get the first step of this into a workable state (the add user to org part).

The problem I am having is how the dialog and button should work for already existing users, and how to add an existing user via username.

An existing user will just be added directly, so no invite will be created (we can still send a email notice about the user being added).

But the dialog and naming of buttons is strange in this case, as there wont be a pending invite created.

Tried to rectify this but not sure I like it:
image

image

But the the final button is strange to call "Invite Users" in this case. Also would be great to have some kind of auto complete search for existing users (but not show their email address, kind of like how you add users in Trello, but this could wait for another pass at this feature, so maybe keep it simple for now)

Member

torkelo commented Jul 29, 2015

I am trying to get the first step of this into a workable state (the add user to org part).

The problem I am having is how the dialog and button should work for already existing users, and how to add an existing user via username.

An existing user will just be added directly, so no invite will be created (we can still send a email notice about the user being added).

But the dialog and naming of buttons is strange in this case, as there wont be a pending invite created.

Tried to rectify this but not sure I like it:
image

image

But the the final button is strange to call "Invite Users" in this case. Also would be great to have some kind of auto complete search for existing users (but not show their email address, kind of like how you add users in Trello, but this could wait for another pass at this feature, so maybe keep it simple for now)

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Jul 29, 2015

Member

Another thing that is weird about this that I cannot set the EmailVerified flag to true as the user could have been sent the link via other channels. One option that I just though of, but is going to complicate the implementation is to have two invite codes, one manual (used i the link we show), and one in the email we send, but then we have the feature that they can change email in the signup form, which will invalidate the email verification.

Member

torkelo commented Jul 29, 2015

Another thing that is weird about this that I cannot set the EmailVerified flag to true as the user could have been sent the link via other channels. One option that I just though of, but is going to complicate the implementation is to have two invite codes, one manual (used i the link we show), and one in the email we send, but then we have the feature that they can change email in the signup form, which will invalidate the email verification.

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Aug 4, 2015

Member

@mattttt any thoughts?

Member

torkelo commented Aug 4, 2015

@mattttt any thoughts?

@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Aug 4, 2015

Contributor

Still waiting on it to be available on dev-portal, and havent grabbed a build myself. I'll actually have another note to chat on the meeting tomorrow.

Contributor

mattttt commented Aug 4, 2015

Still waiting on it to be available on dev-portal, and havent grabbed a build myself. I'll actually have another note to chat on the meeting tomorrow.

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Aug 4, 2015

Member

@mattttt I think it will not appear on dev-portal any time soon since it is till in testing branch stage in upstream grafana. But it should be very easy for you to test locally, you can use your gmail as a smtp server

Member

torkelo commented Aug 4, 2015

@mattttt I think it will not appear on dev-portal any time soon since it is till in testing branch stage in upstream grafana. But it should be very easy for you to test locally, you can use your gmail as a smtp server

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Aug 4, 2015

Member

@mattttt but before that I think just conceptually we can start brainstorming how the flow should work for usernames, as well as how to handle the fact that none of the current flow will allow us to say the email is verified

Member

torkelo commented Aug 4, 2015

@mattttt but before that I think just conceptually we can start brainstorming how the flow should work for usernames, as well as how to handle the fact that none of the current flow will allow us to say the email is verified

@torkelo

This comment has been minimized.

Show comment
Hide comment
@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Aug 4, 2015

Contributor

Yep, been slammed with other stuff, and have let this slide. Will spend some brain power on it today.

Contributor

mattttt commented Aug 4, 2015

Yep, been slammed with other stuff, and have let this slide. Will spend some brain power on it today.

@woodsaj woodsaj referenced this issue in raintank/grafana Aug 4, 2015

Closed

Allow Org Admins Add Users to their Orgs #319

@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Aug 4, 2015

Contributor

@torkelo : But the the final button is strange to call "Invite Users" in this case.
^^ I dont actually think this is strange, because you're still inviting the user to your organization - so even if they're a grafana user, they're still being invited into a new group.

We could be more specific and say "Invite Users to Org Name" on the button.

Contributor

mattttt commented Aug 4, 2015

@torkelo : But the the final button is strange to call "Invite Users" in this case.
^^ I dont actually think this is strange, because you're still inviting the user to your organization - so even if they're a grafana user, they're still being invited into a new group.

We could be more specific and say "Invite Users to Org Name" on the button.

@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Aug 4, 2015

Contributor

Tested this today, a few things to change/update:

  • Invitation email needs to be styled/updated.
  • Copy Invite to clipboard not working in Safari. It is working in Chrome.
  • Created two new classes in grafana.less (long-tag and body-copy-emphasis), so check those out and make sure they're where you'd want them. I was having some specificity issues so just put them at the base level.
Contributor

mattttt commented Aug 4, 2015

Tested this today, a few things to change/update:

  • Invitation email needs to be styled/updated.
  • Copy Invite to clipboard not working in Safari. It is working in Chrome.
  • Created two new classes in grafana.less (long-tag and body-copy-emphasis), so check those out and make sure they're where you'd want them. I was having some specificity issues so just put them at the base level.
@mattttt

This comment has been minimized.

Show comment
Hide comment
@mattttt

mattttt Aug 4, 2015

Contributor

@torkelo Submitted my changes in PR #2437

Contributor

mattttt commented Aug 4, 2015

@torkelo Submitted my changes in PR #2437

@torkelo torkelo added the in progress label Aug 10, 2015

torkelo added a commit that referenced this issue Aug 10, 2015

torkelo added a commit that referenced this issue Aug 10, 2015

torkelo added a commit that referenced this issue Aug 10, 2015

feat(invite): lots of work completing the new email template system a…
…nd css inlineing, converted new_user_invite.html to new system, #2353

torkelo added a commit that referenced this issue Aug 11, 2015

torkelo added a commit that referenced this issue Aug 17, 2015

torkelo added a commit that referenced this issue Aug 27, 2015

torkelo added a commit that referenced this issue Aug 28, 2015

torkelo added a commit that referenced this issue Aug 28, 2015

torkelo added a commit that referenced this issue Aug 28, 2015

torkelo added a commit that referenced this issue Aug 30, 2015

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Aug 31, 2015

Member

Accept invite view:

image

SignUp step1 view: (only email)
image

SignUp step2 view (With backend options verify_email_enabled=true, and auto_assign_org=false
image

Above is the final signup form (which when completed actually creates the user), if email verification is enabled an email is sent after step1 and a verification code field is added to step2, if email verification is not enabled this field and email is not sent.

If auto_assign_org is set to the above sign up form will not contain the org name field.

After completing signup the user will be created and pending invitations to other organizations will be applied. If there were pending invitations you will be taken to this view:

Select active org
image

Member

torkelo commented Aug 31, 2015

Accept invite view:

image

SignUp step1 view: (only email)
image

SignUp step2 view (With backend options verify_email_enabled=true, and auto_assign_org=false
image

Above is the final signup form (which when completed actually creates the user), if email verification is enabled an email is sent after step1 and a verification code field is added to step2, if email verification is not enabled this field and email is not sent.

If auto_assign_org is set to the above sign up form will not contain the org name field.

After completing signup the user will be created and pending invitations to other organizations will be applied. If there were pending invitations you will be taken to this view:

Select active org
image

torkelo added a commit that referenced this issue Aug 31, 2015

torkelo added a commit that referenced this issue Aug 31, 2015

@torkelo torkelo closed this Aug 31, 2015

@torkelo

This comment has been minimized.

Show comment
Hide comment
@torkelo

torkelo Aug 31, 2015

Member

merged to master

Member

torkelo commented Aug 31, 2015

merged to master

@torkelo torkelo removed the in progress label Aug 31, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

donh pushed a commit to donh/grafana that referenced this issue Nov 12, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment