UI mock-up - Account Setup Rev.2

alex alessandro at thunderbird.net
Thu May 2 06:40:05 UTC 2019

Hello folks,

Here's an updated version of the account setup workflow.


*First Screen*

I created 2 variations which we could use for some A/B testing. We could 
potentially release the version with a smaller and less prominent "Get a 
New Email Address" first, to later than replace it with a more prominent 
button once we have those potential providers partnerships.

A tabbed system will be used to show the user the proper info and fields 
of what they selected, and a "Other" option which will open less common 
actions. This might seems like a bit of a stretch, but I'd like to 
pursue the idea of having a unified "Account Creation Dialog", no matter 
if the user needs to create an email, add a calendar, an RSS feed, etc. 
The location and experience should be consistent to prevent unnecessary 
learning curves or visual inconsistencies between sections.

This section will be pretty modular, so there's no need right now to 
list which service/feature should or should not be there, since we can 
change them pretty easily and we will discuss those in a dedicated 
bugzilla tickets.

*Error messages*

To increase consistency and get the user comfortable with our paradigms, 
we should use the same notification style for warnings and errors we're 
currently using in the upcoming TB 68.

Using the new notification system and color scheme will make the 
messages feel more prominent and readable. We should also make those 
messages selectable, so the user can copy the errors for a web search.

*Manual Configuration*

This is tricky since there are many fields and it's really easy to 
overwhelm the user.

Splitting the "Incoming" and "Outgoing" fields in 2 tabs will help us to 
visually streamline what the user needs to input, and also will prevent 
the dialog to grow too much.
With this UI, we can keep the maximum height of the modal around 600px, 
which can fit on a 768px height laptop screen, and will help us prevent 
annoying scrollbars.

A potential "Get Help" button could be positioned if the manual 
configuration is necessary, or if an error message is particularly 
technical. For example, if the user gets a firewall warning, or an SSL 
warning, we could set that button to open a specific page in our website 
where we list common errors and how to fix them.


Alessandro Castellani
Lead UX Architect

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/tb-planning/attachments/20190501/d2fc89f1/attachment-0001.html>

More information about the tb-planning mailing list