IBM Verse

I led the UX and visual design for the Android app, partnered with iOS and web teams, and mentored designers as part of IBM’s larger design shift.

These tools were powerful but visually dated and hard to navigate. The company’s new design philosophy, grounded in IBM Design Thinking, aimed to modernize that experience with a more human-centered approach.

My team’s challenge was to design an experience that felt as capable as enterprise users expected yet as intuitive as the consumer apps that were reshaping expectations. My role was to translate that vision into a mobile experience that balanced clarity, readability, and speed across a wide range of Android devices while staying aligned with the Verse brand and the larger IBM design system.

Users needed a way to process large volumes of information quickly without losing focus or context. Verse aimed to solve this by helping users see what was most important through social analytics, smart search, and predictive prioritization across web, Android, and iOS.

For Android, the main design challenges were:

• Keeping text legible and layouts consistent across a wide range of screen sizes and densities.
• Building a cohesive visual identity across six related mini apps while preserving clear distinctions between them.
• Providing at-a-glance access to essential information without requiring users to open the app.

The formula-based layout system ensured consistent readability across devices, and the color-coded visual language gave users instant context across multiple apps.

Adoption exceeded expectations by 12 percent in the first rquarter, and the widget designs tested especially well among high-volume users, who said they could “see their day” without opening the app.

Designing for readability

Email is about reading. To improve legibility, I built the layout system around optimal line lengths, roughly 45 to 70 characters per line, instead of fixed breakpoints. Working with developers, I turned those principles into a formula that calculated margins dynamically by device size and orientation. This mathematical approach kept the experience consistent across every screen.

Creating a family of connected apps

One of the guiding philosophies of mobile design in the IBM Collaboration Solutions business group is that “mega apps,” or apps that are a combination of multiple functions, are rarely useful. For this reason, we decided to break the Android IBM Verse app up into six separate apps. We needed these apps to look like they belonged to the same family, but at the same time to be visually distinct so that a user knew at a glance which app they were using. To accomplish this, I gave each of the apps a different color palette: dark blue for the app that handles security, settings, syncing, and authorization, lighter blue for Mail, purple for Actions, teal for Calendar, orange for People, and green for To Dos. In addition to giving each app a distinct look and feel, this also helped to identify artifacts from one app when they showed up in another. For example, when a calendar invitation was visible in the user’s inbox, it would be marked with a teal icon. Likewise, if the user marked a mail message as Needs Action, it would have a purple icon to tie it to the Actions app visually.

Designing for context at a glance

One of the primary goals of IBM Verse is to help users quickly find and focus on essential content. To aid in this, I designed widgets for both the Android and iOS apps.

These widgets allow users to get high-level information about their day without having to open the app. On the Android widget, which we had more ability to customize, I color coded each section of the widget with the color palette of the related app.

The top section of the widget shows one of eleven different states depending on the user’s schedule for the day. As a meeting approaches, a countdown appears, and as the meeting gets even closer, it becomes bold.

The widgets also show the number of new messages, calling out those from contacts who either the user or the social analytics have identified as important to the user, as well as the number of messages that the user has marked as “needs action” or “waiting for.”

Rethinking how users connect with people

Rather than being a traditional contacts app that only lists your contacts, the People app aims to help the user quickly find content from and communicate with the people who are most important to them.

While a traditional All Contacts view does exist, these views can be difficult for business users who have hundreds or even thousands of contacts. For this reason, the primary view of a person’s contacts is the “Important to Me” view which gives users quick access to the contacts who are most important. This view is a combination of people the user has identified as important as well as suggestions of people who have been identified as potentially important to the user through social analytics.

After selecting a contact – either from the All Contacts or Important to Me views – the user can view their contact information just like they would in a regular contacts app, but can also see a list of messages that he has exchanged with that person, and a list of attachments from those messages. Adding the Messages and Attachments views allows users to more quickly find content from their important contacts without having to search in the main Mail interface.

Designing motion that supports understanding

When people navigated to a person’s profile – whether by choosing it from the “Important to Me” or “All Contacts” views or through another entry point in the suite of apps – I wanted to present the user with something more interesting than the lists of information that many other contacts apps initially showed. To accomplish this, I increased the height of the header from the usual size of the App Bar so that it could contain a large image of the contact, their name in large text, and their Sametime status.

Of course, if this large header were always visible, it would be a colossal waste of space, so I also designed an animation to take place whenever the user switched to the Messages or Attachments tabs or when the user scrolled down. This animation reduced the size of the header and gracefully transitioned it into a traditional App Bar.

Bringing the concept to life before code

After the design of the IBM Verse app had begun, but before development was well underway, there was a need for the product leadership team to present the concept of IBM Verse to market analysts and the press. This was problematic because the was no code to demo. To mitigate the lack of code, and to enable the team to give a presentation that was more interesting than static screenshots in a PowerPoint deck, I created a demo video.