Application Creation : Improve the details during the setup & in progress states

[serenamarie125]

Updated Description
Once the Setup/Progress dialog/modal is displayed, improve the details provided to the user. Indicate if there should be specific messages for each stage regarding in progress & complete. This will allow the user to beginning intermediate progress

Historical:
As part of the design thinking session around Goal B - Providing better guidance for the next steps once an application is created - Improve dashboard page, to include more obvious actions, address issues with after app creation was prioritized as an issue to address. The following suggestions should help provide context on the design direction:

• After creating an application, don’t use the dashboard as a landing page. Provide a more guided experience for this use case.
• Dashboard should provide status of user’s activities like pending task, failure jobs and status of his/her applications **
• Once setup application has been performed and dashboard appears in front of the user, a ChatBot might come up and suggest the user about the next steps and recommended links which user might want. ***

[serenamarie125]

#4070 Muru this is an associated issue. Please close out that issue, and track that work here.

[serenamarie125]

Look at this document for context : https://docs.google.com/document/d/199NSMJUOCyjbO-BBtW0rIomO33ITn43O3VRiYJ8KobU/edit

[muruGanesan]

@serenamarie125 , @catrobson , @Veethika, @sunilmalagi
Please look at the updated flow and provide your feedback.
https://redhat.invisionapp.com/share/7VO5831SYNF#/320872289_Pipeline

[catrobson]

Is there documentation or notes that go along with these screens? I'm unclear on your proposal given just screens with some numbers on top with no notes/callouts/additional doc.

[muruGanesan]

@catrobson, @serenamarie125, updated with interaction notes. Please let review the same and provide your feedback.

[muruGanesan]

I updated based on the UX review comments:
https://redhat.invisionapp.com/share/7VO5831SYNF#/320872291_Start-App.

[muruGanesan]

@serenamarie125, @catrobson
Updated based on "OpenShift.io Sprint Demo" date 26 Sep 18. [I added open che i.e. 'open code ready editor' - button in 'Application setup' page]
https://redhat.invisionapp.com/share/7VO5831SYNF

[muruGanesan]

@stacymcauliffe, could you please review this UX recommendation and help me to align the content consistent with other flows.

[christianvogt]

dev story: https://openshift.io/openshiftio/Openshift_io/plan/detail/793

[muruGanesan]

@sunilmalagi, Could please review my wireframe and help me to align to PF standard?

[sunilmalagi]

@muruGanesan Done, I have made the changes accordingly and sent you the sketch file. You can incorporate the same in your flow and upload the same into G-drive.

[muruGanesan]

@sunilmalagi, Thanks for your help.
Here is the latest Invision file:
https://redhat.invisionapp.com/d/main#/projects/prototypes/15439853
Here is the Sketch file (google drive - other than UXD team may request):
https://drive.google.com/drive/folders/1Ql-Rhtp60nG-xaOiN6mPpJ_gml9CxzMP

[vikram-raj]

@muruGanesan I don't have permission to the invision link.

[muruGanesan]

@vikram-raj,
Here is the public link: (I hope this works)
https://redhat.invisionapp.com/share/7VO5831SYNF#/320872288_Launcher-2

[joshuawilson]

@muruGanesan I've commented on the design.

[serenamarie125]

@muruGanesan let's chat on this in our review tomorrow - i'm not sure this is the design that we reviewed internally

[muruGanesan]

@muruGanesan let's chat on this in our review tomorrow - i'm not sure this is the design that we reviewed internally

Sure Serena. I haven't changed much. I added one additional screen i.e. 'set up' completed page. But we can review and finalize tomorrow.

[muruGanesan]

@vikram-raj, @joshuawilson,
FYI
I have updated the flows based on our design review. But it is NOT finalized.
https://redhat.invisionapp.com/share/7VO5831SYNF#/320872288_Launcher-2

CC: @serenamarie125, @catrobson

[joshuawilson]

I still don't understand why this is a modal and not a fixed tab that I can find again. That was the original plan. This is not useful if I can only see it once.

[muruGanesan]

I still don't understand why this is a modal and not a fixed tab that I can find again. That was the original plan. This is not useful if I can only see it once.

@joshuawilson,
We proposed modal because

1. 'set-up' page takes long-time
2. The user can access this page anytime to see the status of the application setup.

Note:
I also added my comments in 'Invision' [point 12] please review the same.

[joshuawilson]

@muruGanesan "Open in a new Window" is a BAD solution. We don't want more then one instance open intentionally. It is a "single page app". It is disruptive work between more then one instance.

What do you mean 'set-up' page takes long-time? for whom? design or engineering?

Opening OpenShift, che, and github, as external applications is the only thing we support. This page should do more then take you to those 3.

[catrobson]

@joshuawilson this is a modal within the application, not a new window (Not sure where you got new window from?).

The decision was to navigate to the dashboard and open this modal upon creation of an application. The user could close this modal to see their dashboard again, and can re-open this modal from the dashboard if they want to return to it at any point in time. I've commented in InVision that we haven't captured the trigger for opening this modal from the dashboard in the design. This design direction was taken because at this point, without true history and event tracking, adding a page for application status into the navigation did not seem to make sense - the status is for a specific application being created the first time, which can be easily linked off of the dashboard rather than trying to build that into its own area of the application and creating more confusion about objects, naming, etc.. We will need to look at how pipelines and history of pipelines are handled as a separate issue in my opinion.

The setup of an application is possibly a long running event. Due to this, the modal can show you step by step each part of setting up the application. The user can close the modal and continue with other work while this is in process, and return to see more information at any point in time during that process.

Regarding OpenShift/Che/Github as external applications you can link to as your application gets set up, these are the logical next steps we want to point users to, or they can return to their dashboard where they should also be able to easily identify and move towards this next steps (done in a separate issue). This page also shows you overall status of your application setup. Are there other requirements you feel are missed?

[joshuawilson]

As long as the user can easily get back to the modal, that is my concern. Thanks for clearing it up.

[muruGanesan]

@serenamarie125, I look forward to collecting your inputs after your discussion with Steven S and Chtistian about the external links during the application setup.

[muruGanesan]

@serenamarie125, based on the latest discussion, I updated the flow. Could you please review and provide your comments?
https://redhat.invisionapp.com/share/7VO5831SYNF#/332276211_Existing_Flow

CC: @sunilmalagi

[muruGanesan]

@joshuawilson, @vikram-raj, @christianvogt
Please note, this story covers the 'App setup' progress screen ONLY & Story #4193 deals about, 'how to access this module from Dashboard'

HERE IS THE UX PROPOSAL:
https://redhat.invisionapp.com/share/7VO5831SYNF#/333489085_Overview-Page

[pleae feel free to connect with me if anyone has any doubt]

[muruGanesan]

@joshuawilson, @vikram-raj, @christianvogt,
Based on our UX design review meeting (03Dec18), I added a 'hint box' to educate the user.
Please refer to the latest mockup:
https://redhat.invisionapp.com/share/7VO5831SYNF#/332276211_Existing_Flow

[joshuawilson]

That doesn't tell them were it can be found since it is hidden in a kabab menu. If we force the kabab menu open when they start then it might make sense, but who would want that menu open every time after they have seen it the first time. We need some kind of "first time trainer" like they have in games, after the hint, it goes away.

[joshuawilson]

I just saw on a different design that you add "view Setup Progress" to the page and it is not hidden in a kabab menu.

Why are there 2 design docs for the same thing?

[muruGanesan]

I just saw on a different design that you add "view Setup Progress" to the page and it is not hidden in a kabab menu.

Why are there 2 design docs for the same thing?

There were TWO options.
We finalized on ONE design i.e. there will be a link "view Setup Progress" (which appears on the Space Dashboard). There won't be any 'Kebab menu' for the 'in progress' column.

[joshuawilson]

That image is from User should be able to view progress of application creation at any time before it's complete #4193 and not listed in the design link provided. Once I saw it, I agreed to the changes in this one.

[serenamarie125]

Closing as design is approved by stakeholders, and there is an associated planner issue exists : https://openshift.io/openshiftio/Openshift_io/plan/detail/793

[muruGanesan]

@serenamarie125, @joshuawilson, @christianvogt
I am reopening his issue.
Based on our discussion on the issue #4193, I will make some changes to 'the content' of the setup page.

CC: @sunilmalagi, @stacymcauliffe

[muruGanesan]

Based on engineering input & UX review, Here is the proposed new flow:
https://redhat.invisionapp.com/share/7VO5831SYNF#/333742556_Setup_page_-_in_Progress

Please review and provide your feedback.

NOTE:

• This is NOT final &
• It is a low fidelity wireframe.
  Once we review and agree final visual design will be delivered.

@joshuawilson, @christianvogt, @vikram-raj, @nimishamukherjee , @sbose78
CC: @serenamarie125, @stacymcauliffe

[muruGanesan]

Here is the final wireframe. Please review and let me know if anyone has any query.
[NOTE: I am planning to close this ASAP]
https://redhat.invisionapp.com/share/7VO5831SYNF#/333742797_Overview-Page

CC: @joshuawilson, @vikram-raj , @sbose78 , @gastaldi , @nimishamukherjee, @serenamarie125

[muruGanesan]

Hi @joshuawilson, @christianvogt,

The above link is a final version of the UX recommendation.
Please assign to the respective team/person.

CC: @joshuawilson, @vikram-raj , @sbose78 , @gastaldi , @nimishamukherjee, @serenamarie125,

[christianvogt]

@muruGanesan thanks for this.
The ui team will be focused on dev console unless direction changes. We will eventually circle back to this.