Improve the launch & onboarding experience for first time, and subsequent users

[Faithkenny]

Overview

This ticket seeks to cover the user scenarios encountered when the ODE is launched.

We have revamped the launch flow, and interface design such that it's much clearer for users to understand what's happening after the ODE is opened. This flow ultimately lead the user to the welcome screen.

This also addresses the initializing message problem of issue #418

As this is the first impression of the product, it is designed to have a modern feel, and seamlessly integrate into the Frictionless Data brand & visuals.

Successful, and fail states for a first time run, loading and the welcome screen are addressed here

1. First time run - where installation and dependencies download is successful

https://github.com/okfn/opendataeditor/assets/81084607/8fb0a350-b290-444b-a484-87cc6a7c9807

2. First time run - where installation fails

https://github.com/okfn/opendataeditor/assets/81084607/cb54ac78-df11-4ce0-af14-25cc766a5e47

3. Subsequently, users have fewer steps before getting into the main product

https://github.com/okfn/opendataeditor/assets/81084607/c63a6321-4d89-42f9-8a01-43349ee7f7fa

These are the 2nd iteration of the proposed solution after internal review. Here is the Figma file if you'd like to dive in:

https://www.figma.com/design/cOpYjy35zB3dJf1GW1BC76/Open-Data-Editor?node-id=642-6671&t=CkmfNFDyL9B9AhIG-1

[pdelboca]

@roll @guergana in terms of implementation we can clearly separate this issue into 3 independent issues. If I would suggest a path I would say that we can implement the welcoming screen, the loading screen and lastly the error handling.

1. First time Run - Successful

We already have an codebase aligned with this idea, however we need to refactor some things a little bit. We currently have 2 steps:

1. Start the Electron Application + FastAPI Server.
2. Run the application (and waits until FastAPI server responds).

As I mentioned in #446 we need to migrate the logic that waits for the server to the desktop module so we can properly handle errors and display the messages. In terms of implementation, I suggest to refactor the current logic implemented in the onStart method of the store, extract the waiting for the server and move it to the desktop module. Leaving in the onStart method all the logic to load the configuration and stuff.

2. Handle Errors when loading the application

Another independent ticket is to handle the scenario where the application fails to load. After #446 we should have less scenarios that could fail but even so errors could happen and we should handle them. In terms of implementation I'm wondering if we should start the application (and show the error). Or simply show them in the context of the loading screen. Should we start the application with an "error" state to show an error dialog? I'm open to suggestions here.

3. Welcoming screen

This is just the implementation of a new Dialog that shows the welcoming message when the application starts + a feature to Do not show it again. I think this is the most straight forward implementation that we can handle perfectly with the current architecture of Dialogs.

[romicolman]

@pdelboca / @guergana and @roll: during the sprint planning, @Faithkenny mentioned he will make small changes to the installation failed screen.

@Faithkenny please, add changes today because tomorrow we will split the issue.

[Faithkenny]

All the latest changes

These changes have the system UI colors, correct button sizes - a baseline for other parts of the UI. Please see the Prototypes, and visit the Figma file

1. Failed state screen

https://www.figma.com/proto/cOpYjy35zB3dJf1GW1BC76/Open-Data-Editor?node-id=2553-31318&t=P1JSsOXHHHUJE48x-1&scaling=contain&content-scaling=fixed&page-id=642%3A6671&starting-point-node-id=2553%3A31624&show-proto-sidebar=1

2. Welcome screen

Prototype - https://www.figma.com/proto/cOpYjy35zB3dJf1GW1BC76/Open-Data-Editor?node-id=2553-3561&t=Jo9ylRlrHbBcCQ5G-9&scaling=scale-down&content-scaling=fixed&page-id=642%3A6671&starting-point-node-id=2553%3A3561&show-proto-sidebar=1

3. 2nd and subsequent times

Prototype - https://www.figma.com/proto/cOpYjy35zB3dJf1GW1BC76/Open-Data-Editor?node-id=2553-31680&t=Jo9ylRlrHbBcCQ5G-9&scaling=scale-down&content-scaling=fixed&page-id=642%3A6671&starting-point-node-id=2553%3A31680&show-proto-sidebar=1

[guergana]

hello @Faithkenny @romicolman I don't have the fonts for the new design, where can i get/download them? :pray:

[romicolman]

Here are the fonts :) hk-grotesk copy.zip

[guergana]

hello @Faithkenny In this preview: https://www.figma.com/proto/cOpYjy35zB3dJf1GW1BC76/Open-Data-Editor?node-id=2553-29591&t=P1JSsOXHHHUJE48x-1&scaling=contain&content-scaling=fixed&page-id=642%3A6671&starting-point-node-id=2553%3A3561&show-proto-sidebar=1 I can only see the design but I don't have access to downloading the different parts (images) or checking font types and sizes. Is there another link where I can have a more detailed access to the prototype that is not only a preview?

[Faithkenny]

Hey @guergana. Here is Figma file with the detailed access you need - https://www.figma.com/design/cOpYjy35zB3dJf1GW1BC76/Open-Data-Editor?node-id=642-6671&m=dev

I have also marked them as ready for dev - this gives you all the css values, padding and spacing annotations, color styles, and font properties you need to develop with ease.

Happy to jump on a call to assist here

[guergana]

Hey @guergana. Here is Figma file with the detailed access you need - https://www.figma.com/design/cOpYjy35zB3dJf1GW1BC76/Open-Data-Editor?node-id=642-6671&m=dev

I have also marked them as ready for dev - this gives you all the css values, padding and spacing annotations, color styles, and font properties you need to develop with ease.

Happy to jump on a call to assist here

Thanks! I have access now.