Changes/Improvements to Onboarding

[HardeepAsrani]

What problem does this address?

Based on the feedback received, here are things that we need to address in the Onboarding wizard. It should be noted that we can estimate this issue and if the estimate is larger than medium we can split this into multiple smaller issues and proceed.

What is your proposed solution?

• Top Header Issue: The top header of the onboarding process interferes with the starter site preview. It gives the impression that the white bar is part of the starter site itself.

Please refer to this comment for the changed design: #288 (comment)

---

• Next Step Button: On full screen, the ‘Next Step’ button is not visible without scrolling down. This could frustrate users and increase the drop rate.

We can ensure that the button always stays in the view (floating on the bottom), and is inclusive of all the screens with similar buttons.

---

• Missing UTM Tags: We can revisit the code to confirm no external links are missing UTM tags, an example here.

---

• Textarea in Logo Section: The textarea in the logo section doesn’t make sense as it doesn’t allow URL input. It only activates with the ‘Browse’ button. Also reported at https://github.com/Codeinwp/neve-pro-addon/issues/2634

Please refer to this comment for the changed design: #288 (comment)

---

• Missing Shadow/Border: During the preview, the sidebar doesn't have any shadow/border, which doesn't look right. Similar to what we have in the header, we can have some shadow or border here to make the hierarchy clear as it stands in the Figma mockup.

---

• Thumbnail Size in Larger Display: The thumbnail ratio in larger displays isn't ideal and can be improved to look more natural than it currently is, or we could display more sites there to avoid it looking stretched.

Related Figma Board

Will this feature require documentation? (Optional)

None

[HardeepAsrani]

Before I assign the issue for dev work, can you look into this @Codeinwp/design-team and let us know your thoughts?

Also, we will need some design help on how you suppose we deal with the 1st (top header) and 4th (logo uploader).

[vytisbulkevicius]

For the:

Textarea in Logo Section: The textarea in the logo section doesn’t make sense as it doesn’t allow URL input. It only activates with the ‘Browse’ button.

Marius suggested:

Open the media modal automatically when this area is focused, or make the areas clickable link.

I also think that having the FULL URL there after you upload image doesn't make sense

I suggest showing only the name of the file without full URL as you can't change it there and it's not visible, scrolling in that input to see it full is not user-friendly.

Also created as an issue here - https://github.com/Codeinwp/neve-pro-addon/issues/2634

[JohnPixle]

1. Improvements to Logo upload flow

I worked a bit more on the logo upload UX and I have a more simple flow to propose. Created a prototype to outline how this works. I think it is much simpler.

Please review and let me know if it makes more sense.

https://www.loom.com/share/0c0b32199c004ffcb877fbf70b4be1b3?sid=d79424dd-d2ce-4ead-9554-e8d440a7811b

This screenshot summarises the UI changes needed.

2. Top bar

I have tried to tweak the top bar by adding some shadow and/or subtle bg color, but in all cases it will interfere with the site preview at some level. My suggestion is to evaluate if we should remove the top header altogether, from the two "previewing" steps. This would neutralise the distraction and focus on the actual preview.

Users can navigate to the previous step with the "back" link if needed. I am not sure if the top bar is so crucial that it would justify an interference of this kind.

I also added the link for the related Figma Board in the original comment.

Let me know your thoughts!

[selul]

@JohnPixle it looks good for me.

[HardeepAsrani]

@JohnPixle They look great, and thanks for the prototype.

[JohnPixle]

Thank you both, I also updated the prototype then to reflect the removal of the top bar.

Dont hesitate to ping me if you need any help or clarifications at any point!

[cristian-ungureanu]

Than you, guys for the clarifications. The changes shouldn't take longer than medium. 🚀

[cristian-ungureanu]

Hey @JohnPixle, I have a question regarding this raised issue:

Thumbnail Size in Larger Display: The thumbnail ratio in larger displays isn't ideal and can be improved to look more natural than it currently is, or we could display more sites there to avoid it looking stretched.

Maintaining the same aspect ratio of starter site cards on bigger displays doesn't look that good. Here's the result on a 2133px width screen:

I think the container should be limited too after a certain resolution.

[JohnPixle]

Hey @cristian-ungureanu! Absolutely, I think a max width must be set and additionally the width of the viewport must have an effect on the number of thumbnails per row, if possible. For example, if a larger viewport can fit 4 thumbnails per row, it should do so.

In Figma the thumbnails are sized at approx 350 x 420. You think we can set 400px as the max width?

Let me know your thoughts

[cristian-ungureanu]

Limiting the card to 400px will result in a greater gap between elements unless we switch to a flex container ( there is a grid now ). With a flex container, the number of elements per row will be automatically established by the browser and the 400px limitation would work with a disadvantage of not being able to control the left and right margins: https://vertis.d.pr/i/eODFE3

Alternatively, we can keep the aspect ratio from the design ( 0.83 / 1 ), not limiting the card width and either:

• limit the container after a certain resolution to a fixed width:https://vertis.d.pr/i/TLdmvm
• Have more columns in the grid ( we decide how many and there will be no margin issues as in the flex case): https://vertis.d.pr/i/I24V0x. The disadvantage here is that for a really large resolution, we'll have the same issue as I posted in my previous message.

[cristian-ungureanu]

Ah, I'm sorry @JohnPixle, there is another solution without switching to flex: https://vertis.d.pr/v/pfX3VO. The elements will be at least 400px width. If I limit them to max 400px, we'll have the margin problem again.

[JohnPixle]

@cristian-ungureanu no worries, thanks for taking an extra look into this. From what I understand this works well for our case, and we stay with the css grid 👍🏻

[cristian-ungureanu]

Hey guys, here are the changes that I've made. Let me know what you think: https://vertis.d.pr/v/RQ25Cp

@JohnPixle please let me know about the hover color of the buttons and also if the logo implementation looks good ( plus any other feedback, of course ) 🚀

[JohnPixle]

@cristian-ungureanu thank you very much, looking great.

I just have a couple of tweaks and I think we are good to go.

1. Remove blue outline from elements on focus.
Would it be possible to remove the blue outline of focus to these elements in the screenshot? (Go Back link and Advanced Settings). If you know that we have other instances like these, feel free to remove the outline where you spot it.

2. Image placeholder size
I agree with your suggestion. Lets finalise it with 150px height. Please make sure that the height of the box is the same with and without image. I have already updated the figma board and prototype.

3. Button Hover
Let's set the button's hover state to 75% opacity, it will be fine.

4. Thumbnails grid
Many thanks, looking great.

That's all from my side. Let me know if you need any clarifications at any point, and thanks for taking care of these ✌🏻

[pirate-bot]

🎉 This issue has been resolved in version 1.2.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀