Improve UX for onboarding

[virgile-dev]

This is a Feature Proposal)

:tophat: Description

The onboarding experience for Sovereign was lacking a proper landing page to give some context to the user registration.

Here is what we are proposing after the first iteration : The 3 first screens act as a slider that explain the 3 main actions people can take on soverign. The last one is a info modal that is displayed when people click on i at the top right corner.

Special thanks to Piotr, Alex, Vicente and all the contributors that took part in the design workshops. If you want to take part in the design works of democracy earth join our slack and join the #design channel

Here is what we have now :

Vote on the design proposal : https://vote.democracy.earth/#feedItem-kTXJHZBYYFskj72kK

[aecc]

They look really nice!, maybe you can explain what are the 4 new screens? Specifically the 4th one and how to reach there. There is a small typo in "D. Be Informed" btw, word "tranparent"

[virgile-dev]

@aecc just did ! Thanks for the typo detection.

[SFSandra]

Aesthetically very pleasing, a clean and warm design. As a user I wonder which screen enables me to see votes I've cast in different elections I've participated in...related to @aecc 's point, above.

[AlexJupiter]

@SFSandra I totally agree that a way to enable someone to see the votes they've cast in different elections would be useful. What we're proposing above though is before someone has even signed up.

After this, I'd love to move onto redesigning other key parts of the product like what you propose :).

[virgile-dev]

Hi everyone !

It seems that people are quite happy with what is being proposed :)

Let's start coding. How you guys want to proceed ? Should Piotr code the whole thing at once or should we break it into little pieces ?

@AlexJupiter what should be the next design iteration ? Personally, For a while I've been frustrated with this https://github.com/DemocracyEarth/sovereign/issues/205

[thearkadia]

@virgile-dev what's the recommended way of getting the Mobile UI to always load? I'd like to test it on our project https://github.com/thearkadia/The_Ark

[virgile-dev]

@thearkadia maybe @santisiri can answer this.

[piotrfonte]

Getting back to this starting next week. Can anyone confirm that there has been no change of spec and we’re still building the thing as per screenshots above? cc: @virgile-dev, @AlexJupiter?

[AlexJupiter]

@piotrf exciting! :). Yep I believe there is no change of spec and the designs above are your latest ones.

[virgile-dev]

Hey @piotrf @AlexJupiter , Did you guys think of how these designs will coexist with the user modals for account editing, forgot password etc... ? These are triggered by these : dashed-eye, user-avatar

[AlexJupiter]

@virgile-dev for the first stage we could just implement the on boarding as initially proposed, and then come back to the account editing later? What do you think @piotrf? I guess I'm keen to get this implemented, I think it will really help to explain to users what Sovereign is all about the first time they hear about it.

Also, just to confirm, we are cutting the ability to sign up anonymously for now yes?

[virgile-dev]

We might implement anonymous login this week end with Metamask #279

[AlexJupiter]

Exciting to be working with @LucasIsasmendi to be implementing this. Here are the links to the Figma file: https://www.figma.com/file/bmy63a4jEcPfzFPmGn5vTzLN/Onboarding-v1

[piotrfonte]

Who’s best to walk me through the front-end a little bit? I need to know where I can change what not to break things.

In any case, I’d probably like to keep all the current components the way they are so to have them available when logged in (to answer your question @virgile-dev) but I’d like to set up an entirely new React auth component with its new children to display when logged out (is this even reasonable?). So:

1. I’d create auth.jsx with signup.jsx, signin.jsx, recovery.jsx, ecc. as children
2. I’d load the new auth if signed out (where and how should that if statement look like, anyone?)
3. I’d then try to hook up the new auth to the auth functions we already have

It would be helpful if, whoever has the know-how, would tell me how to set up a clean slate React component that displays Hello world when logged out, and I can then take it from there.

[piotrfonte]

Btw, created this branch to work on: https://github.com/DemocracyEarth/sovereign/tree/feature/238-onboarding

[piotrfonte]

Nvm, I think I figured it out. I now have the app display contents of a newly created Onboarding.jsx when logged out. Can carry on.

[AlexJupiter]

@lucasIsasmendi might be able to help you out if any further blockers arise. At least we spent some time on this together trying to make some progress.

[AlexJupiter]

@piotrf how are you progressing with this?

[piotrfonte]

Assembling the views that look like we want them to look but do nothing. I’ll ping you once I have them, then I may need somebody to help me plug in auth calls, fix validation, ecc. But I’ll know better later.

[piotrfonte]

I wonder what browsers should I test this stuff on?

Btw, here’s a sneak peek:

[piotrfonte]

To do next:

• [ ] dotted navigation / indicators for the slideshow
• [ ] replicate all forms — I suspect this to be time consuming, and a pain but we’ll see
• [ ] integrate details modal
• [ ] navigation between signup/login/recovery flows

WIP:

[AlexJupiter]

@piotrf looking fantastic!!

In terms of browsers, I would suggest:

• Latest desktop: Safari, Chrome, Firefox and Edge.
• Latest mobile: Chrome, Samsung, Stock Android, Safari

Ping me in Slack if you want to use my Browserstack account.

[piotrfonte]

I wonder who’s best to ask for help with routing between pages. I want both Log In and Sign up from the above GIF to redirect to their respective urls. In react-router it would be as simple as <Link to={'/login'}>Login</Link>. What’s the current way of doing this in Sovereign?

[virgile-dev]

Hey @piotrf nice to see you back here 👋 I'm thinking we should extend the images to the bottom of the screen. This is a great start though. @santisiri can help out with routing I think.

[piotrfonte]

WIP some more, I’m importing already existing auth forms, and showing them with state change. This means that, for the time being, you won’t be able to link directly to say… login form, users will always need to go through the carousel screen first.

[piotrfonte]

I think I’m done here. I’d appreciate if y’all could now test it thoroughly on a variety of browsers and devices, especially the login/signup/recovery flows. It’s all on origin/feature/238-onboarding branch. Make sure to do npm install first as I added a few dependencies there, mainly:

• https://github.com/akiran/react-slick for the slideshow bits
• https://github.com/reactjs/react-modal for the modal bits
• https://github.com/styled-components/styled-components for the styles

Here’s how I see it:

[AlexJupiter]

@piotrf I just tested on Chrome and it works great!! Awesome, awesome stuff.

I realise that we designed this with only mobile in mind, do you think we need an improved desktop experience here?

@santisiri @virgile-dev what do you two think of this?

[virgile-dev]

This looks really great @piotrf congrats that's an awesome first contribution. I'm not able to test it locally somehow, would love to check how it renders in desktop. I'm checking with @santisiri how this can be merged.

[virgile-dev]

Hey @piotrf ! Finally got your branch running locally, it's looking good. Thanks a lot for your contribution. I tested it on a mac with the Firefox browser v.60.0.1

Here are is my feeback ordered in priorities.

Blocking On desktop, just after login in the left sidebar doesn't show up.

Polishing

• I think the design works on desktop but could use a few improvements:
• It's not very intuitive to have to click and slide to see the different elements of the slider, it would be nice to be able to click on the dots to navigate it
• For the about pop over we could make a better use of the space on the screen on desktop
• The filter applied on the images in the background have look a bit weird like
• Circle icons, the icon is not centered in the middle

[santisiri]

hi @piotrf let me know when you can do a PR for this.

[piotrfonte]

@santisiri This has been ready for testing for a while. I had reached out to the dev and design Slack channels to help out scouting bugs. Now I don’t know how far behind this branch is and, frankly I won’t have time to look at it in the near future.