Flex Entry Page

[sharfatehi]

Hello!

I'm looking for general feedback on the direction of the Flex Entry page.

A little background: This is a quick and dirty iterative design, there was very minimal research done (some card sorting to help categorize). We have plans to redo this page again in the future once we have time for more formative research. The main goal was to redesign using paste components, utilizing the space better and considering how it will scale.

Things that have changed:

• Layout; Instead of the large welcome banner at the top, I have created a side panel for things you would set and forget (sso setup, billing, etc). By using the side panel, and the disclosures we are creating room for growth.
• Copy; simplified the language and added some more context to the descriptions. moving away from a marketing feel with the welcome message and just describing what this page is.
• Buttons/Anchors; Instead of [buttons] everywhere, we are using the text style buttons to navigate into the pages( this reduces clutter and repetitiveness on the page), we are also using anchors with the pop-out icon to indicate when you are navigating into console for some of the settings.
• Organization; the cards are organized by usage.
• Icons; Using streamline icons.

This is some what time sensitive, but if there is a lot of feedback, i'm happy to set up a meeting or try and join office hours.

Attached is the before and after.

 

[sharfatehi]

[richbachman]

Hi @sharfatehi.

Thanks for posting this. I'll run this by the team for feedback. Is it possible to get a Figma url for this file? Feedback may be easier to capture there. Feel free to send that via slack if you're not comfortable posting it here. Thanks!

[sharfatehi]

@richbachman Hey! Definitely should have posted that, sorry!
Here it is: https://www.figma.com/file/3k9W4nhA6hopEIwyr8udiW/CCOps-Entry-Page?node-id=255%3A19812

[richbachman]

All good. Thanks!

[serifluous]

@sharfatehi thanks for sharing! Your list of things that have changed is super useful.

By using the side panel, and the disclosures we are creating room for growth.

By "room for growth", do you mean you'll have more content in this area in the future (which is why you need to be able to collapse content)? I just want to make sure before we make a suggestion because the spacing in the mockup you have of the disclosure right now doesn't come out of the box in the Disclosure component, and your team might have to use the Disclosure primitive.

But we might be able to make other recommendations depending on what the use case is for disclosures here.

moving away from a marketing feel with the welcome message and just describing what this page is.

:chefkissingfingers:

Buttons/Anchors; Instead of [buttons] everywhere, we are using the text style buttons to navigate into the pages( this reduces clutter and repetitiveness on the page), we are also using anchors with the pop-out icon to indicate when you are navigating into console for some of the settings.

Since these actually do navigate to pages, using anchors here is great 👍

(Adding a few comments in Figma, too)

[sharfatehi]

Hey @serifluous, thanks for the feedback!

It is possible that there will be more in that side panel, (I am currently working on an RBAC solution and it is possible the nav link will be in this panel). One of the other reason for the disclosure is having the ability to minimize the importance of some of those things, connecting to SSO and selecting a billing plan are very much set it and forget it things. I am considering having the disclosures open until those items have been chosen and then upon entry closing the disclosures. Thoughts on this?

[serifluous]

Yep! That's totally doable—it's more or less what we do on our roadmap page right now: https://paste.twilio.design/roadmap

Re: Disclosures, your team will have to use the Disclosure primitive to build the Disclosures as you've designed. This is how the Disclosures in the Paste doc site sidebar, roadmap page, and Console nav sidebar are currently built.

Otherwise, if you use our styled Disclosure component, they have a background color when expanded. This component does need another design pass, though, and we've seen at least one other example of a product where they've needed to use the Disclosure on a non-white background. So...in the future we might be able to provide this style out-of-the-box, but for now, the Disclosure primitive is your best bet for getting Twilio navigation-like disclosures.

[sharfatehi]

Gotcha! Thanks for all the feedback :)

I did end up changing the disclosure background to the same blue, which wasn't ideal, but it worked. Would have liked to be able to remove the BG color, but sounds like you're working on it!