II&V Get In Touch

Get In Touch

Prefer using email? Say hi at hello@sebastianrauer.com

Proton Mail

UI and UX of the OS X desktop mail client application "Bridge"

Once you’ve installed and added your account(s) to the Bridge will you need to configure your email client. The ProtonMail Bridge works with most email bridge applications and applications that support IMAP / SMTP connections.

“ We would like to have an easier configuration process”

  • short briefing summary

Main view of the old bridge application


The onboarding and configuration process

  • User launches the application for the first time
  • User sets up his/her ProtonMail account so that communication between the mail bridge application (e.g. Outlook) and the user account can take place
  • User brings ProtonMail to the foreground to see the status of his account and all related information (e.g. third-party bridge application configuration parameters)

What are the pain points?

After some tests with users ranging from hardcore computer science nerds to not too tech savvy people I came to a conclusion.

First: the overall UI is not supporting the information sufficiently, given by the bridge application. There are, for example, some views with quite a lot digits in it. Also the icons where hard to understand.

Second: the approach of having no suggestion on what to do next in an empty view is not helpful and even misleading. If an user is faced with an empty view he or she feels lost.

Third: The overall positioning and naming conventions of menu and help buttons seems a bit random.

Outcome

Equipped with the pain points and needs of the user I started to strip down the bridge application.

So there where two main tasks to solve: making it easier for not-so-tech savvy people to configure the bridge application and making it more accessible to everyone by applying modern UI standards.

The overall process of adding an account got a lot easier just by having some guidance. Instead of seeing an empty view, there is now an corresponding illustration with the possible next steps. See the comparison between the old and the new view:

Like the above example I reviewed every single view and created a new seamless and reliable interface for the bridge application.

That was fun!

This project had (almost) everything: Research, testing, prototyping, wireframing, design.. It was really fun to improve an already axisting product.


Hi there,

It's Seb! Since 8 years I shape how humans interact with digital products on desktop and mobile devices. Also writing about technology, culture and ethics.

I work in the field of UX research and concept, information architecture and detailed UI design. In order to get reliable results fast I use early prototyping, testing and co-creation methods to constantly validate design and development with important stakeholders. To round that up I have a profound understanding of front end development in order to support dev and create deeper prototyping.

Together with my wife and son I live and work in Potsdam, Germany.

Download CV