Adding a Server
Design Complete
Important Links
Background
For users who do not yet have a Server added to the application, this server screen is an important starting point. The design documented in this page replaces the existing Server Screen in v1 of the app.
Eventually, we will be adding a few on-boarding screens to help bridge the gap between downloading from the app store and adding your first server and as a way to improve the first impressions of the app. But in lieu of that, we will be improving the ‘first server’ experience as outlined below.
Server/Workspace Terminology
With the advent of Mattermost Cloud, the term ‘Workspace’ has come to represent a Mattermost Cloud instance. We will need to determine how we want to represent this in the mobile app. For now, it has been left as ‘Server’.
Adding the First Server Screen
If no previous servers have been added, the app starting point is this ‘First Server’ screen (similar to our current server screen). This screen’s updated design has the following states below.
Design
iOS
Android
States
Default State
Before entering any information, the Server/Wokspace screen displays like this.
Keyboard Up
When an input is focused on and the keyboard is up, the content slides up to focus on the input fields.
Connect Button Enabled
When a valid URL and name are entered, the Connect Button is enabled.
Connecting state
Once the ‘Connect’ button is tapped, the keyboard dismisses and content slides back down to be vertically centered. In addition the button transitions to a loading state with the spinner displaying within the button.
Error state
If an invalid URL is entered, the input field is displayed in an error state with an error message proximal to the input.
Error state
If Display Name is not entered, the input field is displayed in an error state with an error message proximal to the input.
Display Name must also be unique in the user’s server list
Theming and Dark UI
Since this screen is viewed prior to authenticating, we don’t know the user’s preferences for themes. So we will use the following themes based on the user’s OS settings:
Light Mode: Uses the ‘Sapphire’ theme (formerly ‘default’)
Dark mode: Uses the ‘Midnight’ theme (formerly ‘Windows Dark’)
Transition to the Login Screen
Once a server is properly connected, we transition to the Login Screen. The animation below demonstrates this. More details on the Login Screen can be found on the Login UX page.
Animation
Adding Subsequent Servers
Once the first server is added, adding subsequent servers is done through tapping the Server button in top-left corner of the Home Screen, then tapping ‘Add a Server’. This will then open a modal with same details as the Server screen above with some minor language/layout changes. See more details on the Multi-Server Support page.
Tablet Layout
Future Considerations
Creating a Cloud Workspace from the mobile app
For phase 1 of v2, creating a new cloud workspace will not be allowed due to the complications of payment flows and billing not being a part of the mobile app yet. However, we should look at enabling this as a feature in the near future.