Skip to content

fix: push create workspace UX to templates page #2142

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

Merged
merged 12 commits into from
Jun 9, 2022

Conversation

f0ssel
Copy link
Contributor

@f0ssel f0ssel commented Jun 7, 2022

@kylecarbs and I have discussed wanting to clean up this flow. The main driver is that Users should have more context than just a template name, and we must provide that flow naturally in the product. The flow now becomes:

  • Land on workspaces page
  • Click "Create from template" and be brought to the templates page
  • Select the template
  • Click "Create New Workspace" button
  • See template already selected for you and no longer a selector

Example:

chrome_Dvgpap4BzV

@f0ssel f0ssel marked this pull request as ready for review June 7, 2022 23:42
@f0ssel f0ssel requested a review from a team as a code owner June 7, 2022 23:42
@f0ssel f0ssel requested a review from kylecarbs June 7, 2022 23:47
@ketang
Copy link
Contributor

ketang commented Jun 8, 2022

I like the extra context. The rationale is solid. I don't like that it adds a step: the "Create New Workspace" button. This in particular is annoying because the user has already communicated they want to create a workspace. You're not so much changing the flow as redirecting them to a different starting point. Can you pass the creation intention state through the templates page and make it so that selecting the template takes them to the last step instead of the template page?

for (const template of event.data) {
if (template.name === ctx.templateName) {
return template
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use Array's filter here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, for loops are gonna die hard for me lol

Copy link
Member

@Kira-Pilot Kira-Pilot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good!

@presleyp
Copy link
Contributor

presleyp commented Jun 8, 2022

Should the CreateWorkspacePage stories get updated in light of this?

@presleyp
Copy link
Contributor

presleyp commented Jun 8, 2022

I don't think this is the ideal UX for this flow. Neither the status quo nor this seems to address what I'm assuming is the crux of the problem - not the need to know every detail about a template, but the need to have some way of choosing between templates. I would suggest a post-launch meeting of frontend people and people with customer insight for really brainstorming how to solve this from first principles, like being open to introducing a totally new design. In the meantime, if it were me, I'd keep the status quo but add a link to the view below saying if you don't know how to choose a template, browse the templates page. But I won't stand in the way of merging this PR.
Screen Shot 2022-06-08 at 10 32 21 AM

@f0ssel
Copy link
Contributor Author

f0ssel commented Jun 8, 2022

The idea here is we don't want to optimize for clicks to workspace creation. We want Users to have full context on their template choice. By giving the dropdown and a link back to the details, we optimize the clicks but break the flow of information and guidance through the product, what at least my rational. Basically @kylecarbs and I came to the agreement that Users should see the template details before making a decision, so this flow was invented from that conversation.

I by no means think this is the best design for the product, but one that makes sense with the pages and design we have today. Totally open to feedback and want to make sure we are on the same page on a change like this.

Also the "create workspace page" is really ugly pre-template selection:
image

@f0ssel
Copy link
Contributor Author

f0ssel commented Jun 8, 2022

I like the extra context. The rationale is solid. I don't like that it adds a step: the "Create New Workspace" button. This in particular is annoying because the user has already communicated they want to create a workspace. You're not so much changing the flow as redirecting them to a different starting point. Can you pass the creation intention state through the templates page and make it so that selecting the template takes them to the last step instead of the template page?

I think you are just describing the button we have today? Otherwise I'm misunderstanding. This does add another click and I was very aware of that, but think my above comment explains the rationale a bit more.

Some backstory: Originally we had a link to the templates page similar to this but the issue I had was the templates page looked like a read-only table and there was no clear action. Once we added hover and arrows to the rows, to me, it make a much more obvious call to action (click a template) when landing on this page, so I thought this flow became more viable. Without the improvements to the templates page I think the flow was broken.

@f0ssel
Copy link
Contributor Author

f0ssel commented Jun 8, 2022

I also think it's important to implicitly educate new Users that a workspace is created from a template and that templates are the origin of workspaces - for example you can't change templates on an existing workspace. I think the existing selector could give the impression that this can be changed later (like images selector in v1) when you cannot.

@presleyp
Copy link
Contributor

presleyp commented Jun 8, 2022

I think my issue with this solution is that the Create from Template button is a bit confusing because it's really just a link to the Templates page. I also think we can do better overall than we have been doing if we think about what info the average user needs to figure out which template to choose, and make it easier for them to see that info from multiple templates at the same time.

Here's a smattering of ideas, not meant to all be used together:

  • The workspaces and templates pages could give the user more instruction. We could have the flow you're going for, but replace the Create From Template button with a piece of text that says something like "You can create a new workspace from a template on the Templates Page." On the Templates Page, have a piece of text that says something like "Choose a template to create a new workspace."

  • We could keep the Create New Workspace button and form, but have it open to a library or carousel of template cards that display the most helpful info about a template, like name and description. Clicking the card would highlight and select it, but each could also have a link to expand the card into a full page modal that displays all the template info.

  • The Create New Workspace button could go in the navbar, to teach the user that it's not a function that belongs to the workspaces page.

Not married to any of these, just trying to start us thinking outside the box. I know that for the short term we don't want to take on a big new design.

@f0ssel
Copy link
Contributor Author

f0ssel commented Jun 8, 2022

The workspaces and templates pages could give the user more instruction. We could have the flow you're going for, but replace the Create From Template button with a piece of text that says something like "You can create a new workspace from a template on the Templates Page." On the Templates Page, have a piece of text that says something like "Choose a template to create a new workspace."

I think this is first step is totally reasonable and simple, I can try to mock this up (no promises on it being pretty) and see how it goes. It is in line with what I want to achieve from a change like this.

@f0ssel
Copy link
Contributor Author

f0ssel commented Jun 8, 2022

We could keep the Create New Workspace button and form, but have it open to a library or carousel of template cards that display the most helpful info about a template, like name and description. Clicking the card would highlight and select it, but each could also have a link to expand the card into a full page modal that displays all the template info.

We originally did have some mock ups like this. I think a good example of this is a create workspace page where selecting a template is similar to the GCP Marketplace page in function:
chrome_QQDoIDOsLF

@kylecarbs
Copy link
Member

I think that's a beautiful eventual, but hard to deliver that much context where we are right now. We lack avatars, have descriptions (but no nice way to set them), and don't have a designated author either.

@f0ssel
Copy link
Contributor Author

f0ssel commented Jun 8, 2022

@presleyp These aren't very pretty but I think I'm totally fine with this concept:

image

image

My biggest issue is I'm not sure what text should be in these places / what I can do to make this look less meh.

@f0ssel
Copy link
Contributor Author

f0ssel commented Jun 8, 2022

I think that's a beautiful eventual, but hard to deliver that much context where we are right now. We lack avatars, have descriptions (but no nice way to set them), and don't have a designated author either.

Totally, that would be a long ways away. My goal in this change is to just correct the flow generally with what we have.

@presleyp
Copy link
Contributor

presleyp commented Jun 9, 2022

I think it's fine for now! @BrunoQuaresma, look okay to you?

@f0ssel
Copy link
Contributor Author

f0ssel commented Jun 9, 2022

Asher and Dean are also in favor of the current iteration. I'll get this merged if there's no final objections and anyone who wants to revisit is welcome to.

@f0ssel f0ssel merged commit b7234a6 into main Jun 9, 2022
@f0ssel f0ssel deleted the f0ssel/remove-new-workspace branch June 9, 2022 23:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants