L
M
;

ABOUT

Mattermost is the leading open source collaboration platform with a thriving community.

This was an exercise I did as a trial for a senior UX position. 

UI TRIAL DIRECTIONS

Here is the design workflow I followed while working on the project.

  • Complete creative freedom if the app was being designed from teh ground up.
  • Must at least loosely follow brand guidelines.
  • Create a design outlining the full experience.

DESIGNS

Server URL screen. Note solid line text entry instead of boxed. Mattermost logo and brand is a solid color now. Note progress “dots.”

Choose your login in method screen. Note the username/email setting is separated with an “or.”

Sign in screen.

DESIGNS

Standard channel view. Note cleaner look. Note simplified text entry area. Note “+” button that covers all media in a single button. Note “!” in channel name.

Text entry view. Note “Send” button appears when text is entered. Note “<” button to unhide media attachment. Note “@” and “Return” on keyboard.

Thread screen. Note original message pinned to top.

DESIGNS

Options menu (When a message is held). Note cleaner appearance, solid icons, and rounded emoji containers.

User profile screen. Note right justification like channel info. Note role management and status. Note in-window messaging.

Channel info screen. Note “!” denoting channel shortcut. Note locally assigned roles. Note separated member/management and options.

DESIGNS

Channel selection. Note unread option is switched on. Note bottom universal menu. (Left to right: Profile, Recent Mentions, Channel, Saved, Options.)

Channel selection. Note unread option is switched off. Note simplified search bar.

Recent mentions screen. Note simplified date and time. Note channel identifier (!). This layout can be copied for saved messages.

CONCLUSION 

Over the course of this project, I got the chance to design a real-world product from the ground up. Using knowledge and research from my Mattermost UX findings, this step was a fun and educational experience.

This Mattermost project was supervised by Andrew Brown.