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

• Introduce Get Started page that will be open if there are no workspaces Introduce Get Started page that will be open if there are no workspaces #15520
• Implement Language/Technology filter on Get Started page of dashboard Implement Language filter on Get Started page of dashboard #15525
• Devfiles from devfile registry should provide right icon instead of default Che one Devfiles from devfile registry should provide right icon instead of default Che one #15581
• Implement Import From Git option on Get Started page Implement Import From Git option on Get Started page #15527
• Redesign "Import Devfile" page Redesign "Import Devfile" page #15661
• Redesign "Create Custom Workspace" page Redesign "Create Custom Workspace" page #15662
  • Create a new Context Selector widget for UD Create a new Typeahea widget for UD #16518
  • Che Dashboard dev file editor isn't resized dynamically for a large screen Che Dashboard devfile editor isn't resized dynamically for a large screen #14683
• Apply Get Started design suggestions Apply design suggestion to Header on Get Started Page #15749
• Add Temporary Storage toggle button on Get Started page Add Temporary Storage toggle button on Get Started page #15855
• Footer is not displayed on Get Started page Footer is not displayed on Get Started page #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 #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! #15527 (comment) Beau

…

On Wed, Dec 18, 2019 at 8:35 AM Sergii Leshchenko ***@***.***> 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 <#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 <#14878>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMM2XIG2B63H3VN343BUJIDQZIRIDANCNFSM4JAMVWJA> .

-- *Beau Morley* Senior UX Designer User Experience Design Team bmorley@redhat.com

[sleshchenko]

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