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.

Design prototype and video preview

Video walkthrough of the new UI


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 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, come discuss in or drop me an email at👋

London based Design Lead. Interested in design, machine learning, music, science.