Loading/Error Screen

[sharfatehi]

I've been workin on a loading and error screen for Flex account creation / server side set up.

Here is a link to the flow. https://twilio.invisionapp.com/share/CY10KGCCKBH5#/screens/448145437_Serverside_Setup_1

I was told to utilize the new empty state patterns : https://docs.google.com/document/d/1IATJtMSq0tfp6oUKIE2NLKtya6xfltbLeqOQ66xXxXA/edit

I am looking for feedback on weather or not i've used the new pattern correctly, mine are full page experiences vs. in page, so different from what I am seeing in the doc.

Let me know, thanks!

[kate-porter]

Hey @sharfatehi - sorry for the delay on this one! Chatting with the team about it now and we will get back to you shortly.

[sharfatehi]

Awesome, thank you!!

[kate-porter]

Hey @sharfatehi - after chatting with the team, we don't think this is quite an empty state. What you really have here are a full-page loading state followed by a full-page error state. We have these listed in our Patterns backlog, and they are both currently open for contribution if you're interested and have the bandwidth!

You can certainly lean on some aspects of the Empty State pattern that you think fit this use case, but our recommendation would be to reach out to the #ux-product-design channel in Slack and ask other designers if they've done anything similar in their products. And if they haven't, go wild! ;)

You could use the Empty State pattern with the "Something went wrong" illustration for the error, but since there is no other content on the page (like a navigation or anything), I'd recommend taking it out of the card.

And one other recommendation I might throw out there would be to include some type of animation in the loading state to indicate to the user that something is happening (like a loading bar or an animation of the Flex dashboard coming together). A static loading screen can make the user feel like something might not be working, especially if the loading screen may be there for awhile.

I hope that helps - let us know if you have any other questions on this!

[sharfatehi]

Thank you for all the feedback! This was all very helpful :)

[sharfatehi]

Hey @katieporter thanks again for the feedback! I tried reaching out on the #ux-product-design channel and was directed to the empty states doc, no one else followed up with any feedback on weather or not they had done a page like this before.

I also spoke with our team and read through some of your feedback with them. We ended up with this flow (https://twilio.invisionapp.com/share/CY10KGCCKBH5#/448145437_Serverside_Setup_1), super minor changes were made. we removed the containers around the messaging, and added a progress bar on the loading page, as you suggested. We were happy to utilize some fo those empty state illustrations and felt they worked well in our flow from Console to the Flex UI. I would love to get your thoughts on it, one last time before I ship it. Thanks :)

[kate-porter]

Nice, these updates look great!

My only suggestion would be to swap out the "No results found" illustration for the "Something went wrong" illustration on the error screen.

You also might take a look at the "Create an object" illustration for the loading screen - I think it fits a little bit better with the copy. But the one you used also works.

Are you working in Figma? If so, you can link the "Brand Illustrations" library to your project to get easy access to those illustrations.

[sharfatehi]

Ahh good idea, I'll swap those out. Thanks! I am not working in Figma 😬 ..yet, I have been told to request access to Bynder to see all the illustrations. I have just done that, so i'll get those illustrations and swap them out soon :)