Background

Pumble is a free team messaging app that allows teams of all sizes to communicate and collaborate. Unlike other team messaging apps, it offers unlimited user and message history, user and workspace administration tools and 24/7 web support – all for free. It’s available on all platforms, primarily as a web browser app, but also accessible on desktop - Windows, Mac, Linux, and mobile.

One year ago, I joined the Pumble team as the leading product designer for iOS and Android devices, ensuring the best smartphone experience.

What wasn’t working

The most user-friendly business communication app for all kinds of teams, Pumble strives to keep companies productive and simplify their workload. To achieve this, one of its core attributes is flexibility, offering a more focused experience to everyone, anywhere.

And while Pumble evolved a lot over the last course, we found mobile devices to be a bit behind the desktop app. Pumble on iOS and Android did not feel as productive, joyful and responsive.

  • Outdated patterns: With the release of the latest iOS 17 and Material 3 design system, many of the current patterns have been deprecated, whereas new library components have been introduced. This made the app not feel up-to-date with the latest updates.
  • Missing features: Many of the features launched on the desktop app, such as in-call messaging, raising a hand, and integrations, were missing on iOS and Android devices. It impacted people’s ability to catch up, search effectively, and be productive on the go.
  • Accessibility concerns: The colour contrast on mobile devices wasn’t adhering to the guidelines and recommendations, especially for the dark theme. The font size wasn’t appropriate, and often left the text truncated. This made it a difficult task for users with vision impairments to stay productive and make a difference between important messages and ordinary ones.

Redesigning the look and feel

I started tackling this challenge with design explorations and getting to know our customers, taking into account our product roadmap. In the visual world, the design system has been updated to accommodate the latest additions. I have also generated colour tokens with assigned semantic roles, adhering to the recommended colour contrast ratio and ensuring ongoing consistency.

Throughout the process of redesigning the app, I was in daily sync with the development team, including them in the get-go of the process, and collecting their feedback throughout the lifespan of a product. My background in computer science helped me discover possible technical constraints.

Note: Due to confidentiality reasons, sensitive information such as the user data, as well as the research phase, cannot be shared publicly.

App bar structure

Tab bars let people navigate among different areas of an app, and also reflect core tasks that could be accomplished. As each additional tab increases the complexity of the app, we decided to ease people locating the information by moving the “You” tab up in the navigation bar.

Old vs new app bar structure

We redesigned the DMs, Mentions & Reactions and Search tab, too, and decided to use a floating button for composing a message as our most important action on the screen.

Tabs screen

Message input field

Pumble’s message input field supports text formatting and attaching a variety of media types, but having all shortcuts in one place made it overcrowded. Thinking of future improvements and additional features, we organised the field into different subsections.

Old vs new message input field

On top of that, we updated icons to the newest Material and SF Symbols. In terms of accessibility, we adjusted the touch area and designed pixel-crisp custom symbols, for a fine user experience.

A message input field

Channel conversation and direct messages

We knew that redesigning team communication, a core feature of the app, should be not only intuitive and cohesive, but also convey how it works and looks on the desktop app, too. As we are designing for the limited screen size, our main goal wasn’t just placing what fits on the screen, but rather what the end user’s goals really are and the most efficient way to provide that.

That’s why we emphasised adhering to the accessibility traits, from touch area size, over colour contrast and font sizing, to layout consistency.

A channel conversation

We also enriched our colour palette for dark mode, ensuring our content is comfortably legible and pleasing.

A channel conversation for dark mode

Additional features

We conducted a design audit, updating each part of the app - all icons, every button, and each component. Apart from redesigning the UI and flow of the mobile app, we also worked on adding features that were present on the desktop app.

In-call messaging and hand raise

Send messages, documents or links during a call to other participants. Users can express themselves and share the updates throughout the working session.

A group call screen An in-call chat screen
Integrations screen An app profile screen

Integrations with favourite apps

Connect tools such as Google Calendar, Email and Zapier to Pumble, to help supercharge the workflow without leaving the workspace. With the slash icon, global and message shortcuts are an interaction away.

Looking forward

Through design audit, we provided a path for how we will shape the Pumble mobile app experience in the upcoming years. Looking at the product roadmap, I’m excited to be part of it.