Che: Revamped Getting Started experience in the dashboard

[slemeur]

Goal

The goal of this epic is to improved the getting started and onboarding experience.

Today, the first time that Eclipse Che is invoked, users are brought to a Create a Workspace view. This view has a lot of options and steps that are catered to experienced users. This may prevent new and novice users from testing out Che because it is too difficult or time consuming to set up their first workspace.

The objective of this epic is to create a landing page where first time users could jump right in by:

• Start using Che by trying samples,
• Importing their own code,
• or just launch the IDE.

We also want to take the opportunity to rework the UX and the UI of the create workspace view.

Main User Stories

• As a user, I'd like to start Che from ready-to-go samples so I can learn more about Eclipse Che in few minutes.

• As a user, I'd like to get guided into importing my source code so I can start using Eclipse Che to edit it.

• As a user, I'd like to be able to create a custom workspace (from a devfile) so I can quickly reuse an existing workspace definition.

Subtasks

• [x] Introduce Get Started page that will be open if there are no workspaces https://github.com/eclipse/che/issues/15520
• [x] ~Implement Language/Technology filter on Get Started page of dashboard https://github.com/eclipse/che/issues/15525~
• [x] Devfiles from devfile registry should provide right icon instead of default Che one https://github.com/eclipse/che/issues/15581
• [x] ~Implement Import From Git option on Get Started page https://github.com/eclipse/che/issues/15527~
• [x] ~Redesign "Import Devfile" page https://github.com/eclipse/che/issues/15661~
• [x] Redesign "Create Custom Workspace" page https://github.com/eclipse/che/issues/15662
  
  
  
  • [x] Create a new Context Selector widget for UD https://github.com/eclipse/che/issues/16518
  
  
  • [x] Che Dashboard dev file editor isn't resized dynamically for a large screen https://github.com/eclipse/che/issues/14683
  
  
• [x] Apply Get Started design suggestions https://github.com/eclipse/che/issues/15749
• [x] Add Temporary Storage toggle button on Get Started page https://github.com/eclipse/che/issues/15855
• [x] Footer is not displayed on Get Started page https://github.com/eclipse/che/issues/15776

[beaumorley]

Below are design artifacts used to come up with a final design recommendation for Che Getting Started experience:

• Design Concepts - presented at Che Community meeting 10/14
• User Flows - used to ensure capture all onboarding scenarios
• User Study Findings
• Final Design Recommendation - final design

Design Concepts

Design process and 2 design concepts were presented at the Che Community call on 10/14. To review 2 design concepts, see recording from call. https://youtu.be/4ah2OENYxaQ

User Flows

Next, user flows were defined to ensure all onboarding scenarios were covered in final design.

User Flow 1 - New User Using Hosted Che

User is a novice programmer who is looking for a new IDE. They hear about Che 7.0 and go to eclipse.org/che to check it out. They launch Che by selecting “Saas Option”.

User Flow 2 - New User Using Installed Che

User currently uses Eclipse as their IDE. They are interested in kubernetes and want to try it out using Che 7.0. They have installed a local environment.

User Flow 3 - New User Who Wants a Custom Stack

User currently uses VSCode as their IDE. They are interested in using Che for a new project they are working on. They have installed a local environment and made sure the right plugins are installed.

User Flow 4 - Already Using Che But Want to Try Something New

User currently uses Che as their IDE. Already have several workspaces for their projects. They are interested in learning about Quarkus and want to try it out using Che 7.0.

User Study

Then a final group of users were shown the concepts for final feedback.

• Interviewed 5 developers week of 10/28
• more than 5 years experience, currently using VSCode for an editor
• Showed 2 Get Started concepts and 2 options for placement of a Get Started screen

What they said:

• When asked how they like to learn, developers like to try different approaches but all said they would likely try a sample
• Several liked the idea of choosing their language or technology first
• However, when trying a sample, they are concerned that it will be out of date or broken
• They like to look at the GitHub data on the sample when deciding whether to try it
• Rating, number of contributors, last modification date , number of downloads
• All developers liked to customize their workspace
• Add plugins, change the IDE
• May customize at any time (not just when onboarding)
• Several developers said they were comfortable with the terms “template” and “dashboard” because it made the IDE more familiar to them and they liked the navigation because it exposed the dashboard

  | IDE | How they learn | Concept | Side nav or full screen? | Other comments
-- | -- | -- | -- | -- | --
P1 | VSCode | Start from scratch or take a sample to test | Samples | Likes a modal for integrating getting started | I like to try examples that work!Wants more explanatory text on screen I would like the onboarding as a modalLikes option to go directly to IDE
P2 | VSCode | Sample | Samples | Side nav | What is the best starter app?Wants to import own sample
P3 | VScode | Existing repo | Languages | Side nav |  
P4 | VScode | Blank project | Samples/Stack | Full screen with option to go directly to IDE | Likes to read blogs and docs to learnLikes less info on the screenReads the Readme in the repo before he tries a samplePut create workspace at the top! Likes open IDE
P5 | VScode | Open repo I am working on | Samples | Side nav - “all IDEs have them”, can see there is a dashboard which is familar | Wants keybindingsWould choose sample based on most downloaded

Final Design Recommendation

This design process led to a final design recommendation.

• Load the Onboarding content when there are no workspaces in place of the current dashboard content
• Display templates with samples within cards in the main canvas area
• No limit to the number of samples as the page can scroll
• Provide dropdown controls for filtering by Technology or Language above the samples
• “Import from Git” and “Create Custom Workspace” as buttons at the top for advanced users
• Keep existing side nav and footer
• Add “Getting Started” option to side nav

[sleshchenko]

@beaumorley Thanks for providing a new Design Recommendation. I created the corresponding issues I see we can implement in our sprints as steps. Could you help us with Import From Git workflow, more see https://github.com/eclipse/che/issues/15527.
And also I guess some changes are needed in Create a custom workspace page

If it's good enough to start with it and then will see?

cc @l0rd @slemeur

[beaumorley]

Hello,

I just commented on issue 15527 with some questions and included a first
stab at a mockup that is an update of the screen you shared in the issue . I'm happy to
update if you have feedback!

https://github.com/eclipse/che/issues/15527#issuecomment-567017537

Beau

On Wed, Dec 18, 2019 at 8:35 AM Sergii Leshchenko [e-mail]
wrote:

@beaumorley https://github.com/beaumorley Thanks for providing a new
Design Recommendation. I created the corresponding issues I see we can
implement in our sprints as steps. Could you help us with Import From Git
workflow, more see #15527 https://github.com/eclipse/che/issues/15527.
And also I guess some changes are needed in Create a custom workspace page
[image: Screenshot_20191218_111643]
https://user-images.githubusercontent.com/5887312/71090522-df6fed00-21ab-11ea-8b04-08691c225bfd.png
If it's good enough to start with it and then will see?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/eclipse/che/issues/14878?email_source=notifications&email_token=AMM2XIDBK6LWRHB5LZDVWBLQZIRIDA5CNFSM4JAMVWJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHGD4CQ#issuecomment-567033354,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AMM2XIG2B63H3VN343BUJIDQZIRIDANCNFSM4JAMVWJA
.

--
Beau Morley
Senior UX Designer
User Experience Design Team
[email protected]

[sleshchenko]

I'm closing this epic since every issue is already fixed :tada:
If there are any minor improvements needed - it could be done out of the epic.