In early 2018, we were working on a feature we called “guest rooms”. Guest rooms were group conversations that people could join by link, without having to sign up for Wire.
Guest rooms brought multiple changes, especially to the details page of a group conversation that showed all its information. To create guest rooms, users had to be able to create, share and revoke links to the conversation. “Guests” also had to be marked as such in the list of group participants.
Because the old group details view already had a bad layout that was not future proof, we decided to use the development of guest rooms to redesign it entirely.
The old layout
We started by looking at the current state of the view and discussing what needed to be changed. The main issues were:
Information density: Because of the avatar grid, only very few people could be displayed at once
Distribution: Because of the limited horizontal space per person, even short names had to be truncated
Scalability: No space for future things like additional group settings or additional information about a participant
Especially with the new business focus of Wire, we had to get rid all the interface experiments that were made in the past and make use of common patterns and elements.
The new design
To improve the experience, we did the following changes:
We replaced the grid with a list that gave less importance to the avatars and more space to additional information
We added a new “options” section that would not only contain guest room settings but many more settings in the future
We also received feedback about the way you could rename group conversation with the old interface. People had a hard time discovering the feature. Most people used the default group conversation name “Paul, Maria, Laura“ because they had no idea they could customize it.
So we removed the conversation name from the navigation bar and put it into its own textfield with an edit icon permanently visible on the right. It seemed to have worked because shortly after updating the apps with the change, we received messages from customers thanking us for “adding the ability to rename groups”.
The desktop client
The group details view on desktop was just as bad. In fact, it was basically an exact copy of the mobile one, fitted into a pop-over.
It was clear to us that just replacing the content of the pop-over wouldn’t be enough. Bigger, more capable conversations needed more space to show and manage all their members and settings. So we decided to replace it with a full-height sidebar on the right of the conversation.
The sidebar had two modes. If the window was wide enough, it would sit next to the conversation view and both could be used at the same time, making better use of the available horizontal space on desktop. If it was too narrow, the sidebar would overlay the conversation and had to be dismissed to interact with the conversation again.
Since its introduction, the sidebar has been proven to be a great way to display contextual information on demand. At the time that I’m writing this, we are also using it to display the profile of a person after clicking their name in a mention, or the list of people who liked or read a message, to name a few.
The new layout of the group details view also proved to have been the right direction. We received a lot of positive feedback about this change. We also already added multiple new capabilities like enhanced notification settings, a read receipt setting or the ability to add and manage bots.
