The challenge

Since the first release of the native mobile app, we had been gathering feedback from our users through Uservoice, our open-source community and our customer base. By far, the top feature request we heard time and time again was support for multiple Mattermost servers. At the time, version 1 of the app could only support one server due to performance concerns.

In addition to all the feedback we sifted through, the mobile app was also growing out of parity with the web app and the UI was also not in line with the latest UI language that was making its way into the web app. The first time experience of the app was also giving a poor first impression. With all that in mind, we identified the following core goals to guide the redesign:

Improve the first impressions of the app and polish the UI.

Make it easier for users to find what they were looking for and include support for accessing multiple servers.

Enhance the core messaging experience.

The process

Brainstorm + Design Sprint

While the technical team built the new foundation and infrastructure for v2 of the app, the design team began the process with a brainstorming session that led to a design sprint focused on solving the core problem of multi-server support and the other core goals above. In order to do this, we also needed to rework the core product navigation. In addition, knowing the entire app would be rebuilt, we took the opportunity to bring a refreshed look across the application wherever we could.

Competitive Research

As part of the design sprint, the team pulled together screenshots of other competitive or adjacent products to research how others have solved similar problems. As a team, we reviewed the research and made notes on the ideas we liked and wanted to include as part of our explorations.

Wireframes and Rapid Prototyping

The team went through multiple rounds of explorations and collaborated on divergent solutions that addressed the goals and problems identified. We started with wireframing the more structural navigation elements in support of multiple servers as well as a bottom tab bar navigation, and improved search experiences. While exploring options, interaction ideas were also tested out using prototyping tools and playing with them on real devices to validate ideas as we went.

Testing & Iterating

One of the joys of working on a platform like Mattermost is that we get to test our ideas out on ourselves. In addition, we had a thriving open-source community that was eager to test out designs, so we ran a number of guerilla tests during the design sprint to see which of the options resonated most. Along with that, our mobile engineers were heavily involved in the exploration and concept vetting process so their input was vital to validate feasibility and performance considerations.

We also ran some unmoderated tests in our user testing tools with external users to get some further validation on concepts as we began narrowing things down. Of the concepts we tested for multi-server navigation, we found the bottom sheet interaction to hit the right balance between user expectations and ease of implementation.

Final designs

In the end, over the course of many months working closely with engineers, product managers and other designers, we designed a new end-to-end experience for our users. Below are some samples of the high-fidelity screen designs.

4-star results

Since the release of version 2.0 of the mobile app, Mattermost saw a significant boost in app store ratings resulting in a 4-star average review in the App Store and Google Play store for the first time ever (as opposed to 3.4 average star rating previously).