Adding a Server

Owned by Matt Birtch
Last updated: Oct 13, 2021 by Marina Karpenko (Deactivated)
4 min read

Design Complete

Important Links

https://mattermost.atlassian.net/browse/MM-33135

Figma Design File

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.