Redesigning Matrix/Riot chat

A bit of history

I first came across Matrix on Hacker News a couple of years ago when I was working on Ubuntu Phone, and was looking for an encrypted open-source chat platform we could use. I loved the ethos of Matrix — my first experience of realtime chat was using IRC at my uncle’s internet cafe in Helsinki in the mid-90’s, and chatting to people across the world felt like magic. Matrix being an open-source protocol with federated servers really reminded me of that collaborative, positive open ecosystem of the early days of the internet.

IRC, while still around, has mostly been superseded by proprietary chat platforms that offer improved user experience, particularly on mobile. Many of these apps are great, but I think chat is such a fundamental part of the internet and our lives that it feels like there should be user friendly options which aren’t owned and controlled by private entities. In general I think we will see decentralisation of many platforms emerge and play out over the next decade.

As Matrix is an open source protocol, there are several apps that can be used as clients. Riot one of them, developed by New Vector, the core developers of Matrix, and it was the one I first tried. If you’ve tried Riot, you’ll probably agree that while fully usable, it hadn’t benefited from much design love ❤️recently.

The platform itself is super promising and I think the user experience of Riot at the moment holds it back from fulfilling its true potential. I got in touch with the founders, power duo Matthew and Amandine — and after finding out we felt aligned about what’s needed, started working new designs for Riot.

Design prototype and video preview

Video walkthrough of the new UI

The video above is a quick taste of early design work on Riot’s new UI/UX. You can also play with the prototype yourself — https://invis.io/QXJMW88MR4P

Typography

For the main typeface of Riot app I’ve proposed the late Vernon Adams’ wonderful Nunito. It looks great in all sizes, is very readable and has a full set of weights as well as Cyrillic support.

New layout and main timeline

The current Riot interface felt too busy — there is a fair amount of cognitive load for a new users to understand what everything in the UI is and how to navigate around. With the redesign I’ve tried to focus on clarity, better hierarchy, contrast, colour and spacing to help with visual skimming — as well as establish design patterns to make life easier for people starting to use Riot.

Main timeline with reactions, mentions, link previews

Autocompletion for user mentions and commands

Communities

Communities are a new feature in Riot. Having a single room for a broad topic doesn’t always scale as messages easily get lost in the timeline — or you end up drowning in unrelated rooms. Having an encapsulated community with separate rooms, still specific to that community, can be useful. Communities can also be used for instance for splitting work and non-work chats, or any other filtering purpose. A nice feature in Matrix is that a community could be wholly private, or it could be open but only have rooms specific to that community, or have a mix of global rooms and community specific rooms — it’s up to the users to use them how they like.

New login screen

The existing login screen has been updated to make it clearer. Communities can also customise the backdrop of their login screen for their own flavour.

We like mountains

My stuff

…Or you don’t have to use communities at all — you can use the default “My stuff” community to create your own selection of rooms — or just chat with your friends and family!

Guest mode

Guest mode is useful for anyone on the web to see what has been discussed in any public community, before deciding to jump in to participate. It’s also a low friction mode for communities to grow.

Anyone can read public communities and rooms on the web, but not interact until logged in

Search results and mentions

The right hand panel is used for search results, mentions, room member list and files, and is closed by default when not in use.

Search results across contacts, rooms and messages (with context)

Mentions panel — mentions pills also have the mini-avatar

Next steps

There is still a lot to do — things I’m looking to tackle next are redesigned settings, better onboarding flows and making most of community focused onboarding, as well as designing some nice transitions and micro-interactions (hello After Effects and react-spring!), better E2E encryption key management, Android and iOS app designs, pushing what we can do with apps and integrations in Riot further (which are already pretty cool) — and of course work with Riot team on a smooth implementation of the new designs. Look out for Part 2 and 3 of this post later this summer!

Get in touch! 💬

We wanted to share the designs early so we can gather feedback from users of Riot, and make the app into a better experience together. The designs are being actively iterated on and the implementation is just starting — so please leave feedback, ping me on riot @jounih:matrix.org, come discuss in #riot-design:matrix.org or drop me an email at jouni@helminen.co👋