ProtonMail

Six privacy apps in four months

<b>4 months</b> 6 apps

shipping biweekly new features to development

<b>Design System</b> and UX Patterns

aligning three mobile apps and overall account functionalities

<b>40+</b> user interviews

to test usability with prototypes and ensure desirability by users.

Proton AG

Visit website

INDUSTRY

Privacy Tech, Communication

Timeframe

12 weeks in 2020

TEAM

Design Lead
UX / UI Designers
Illustrator

Product Design Mobile User Testing

About the project

Proton is a Swiss client that specializes in secure communication. The company offers privacy-focused alternatives to established online services like Gmail or Outlook. However, despite being highly valued by users, their solution lagged behind its main non-privacy-focused rivals in terms of usability. Our task was to reimagine user-friendly mobile apps based on strong security values. We redesigned their core mobile product, ProtonMail, and created new products such as Calendar and Drive in collaboration with their product teams. We shipped biweekly to development for Android and iOS devices, including smartphones and tablets of varying sizes.

<section class="padding-largest no-padding-bottom module-portolio-detail-headline bg-grey-05"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Breaking down design complexity</span> <br class="not-on-s">for a whole product family </h2> </div> </section> <section class="section modular-portfolio-detail-list bg-grey-05"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="topic color bold">Unifying style guide</div> <p class="s-text text-grey-60 paragraph">To ensure consistency, we developed a comprehensive UI guide and design system. This includes standards and guidelines for typography, color, and layouts. Additionally, we incorporated a look&feel that would differ from its competitors and communicates the Proton product brand.</p> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-library-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-library-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-library-1x.jpg}"> </picture> </div> </div> </div> <div class="item-wrapper"> <div class="item"> <div class="topic color bold">Mobile first & tablet adoption</div> <p class="s-text text-grey-60 paragraph">We designed with mobile users in mind. In addition, we optimized these apps for tablet, ensuring that users can enjoy the same seamless experience on larger screens. We provide users with a consistent experience across all platforms, regardless of the device they use.</p> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-responsive-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-responsive-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-responsive-1x.jpg}"> </picture> </div> </div> </div> <div class="item-wrapper"> <div class="item"> <div class="topic color bold">Optimized for iOS & Android</div> <p class="s-text text-grey-60 paragraph">The apps were developed separately for iOS and Android. The Android version was prioritized due to the majority of Proton customers using Android devices. Both versions underwent rigorous testing and optimization to ensure they felt native to their respective platforms while providing the same high-quality experience to all users.</p> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-android-iphone-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-android-iphone-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-android-iphone-1x.jpg}"> </picture> </div> </div> </div> <div class="item-wrapper"> <div class="item"> <div class="topic color bold">Light & Dark Mode</div> <p class="s-text text-grey-60 paragraph">One of the most popular user requests was the addition of a dark mode feature. When designing the dark mode option, we paid close attention to the color schemes and contrast levels to ensure a visually pleasing and user-friendly experience.</p> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-light-dark-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-light-dark-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/02._full-width-with-margin-image/proton-light-dark-1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list no-padding-sides no-padding-bottom bg-grey-05"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/03._image-full-width/proton-diag-grids-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/03._image-full-width/proton-diag-grids-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/03._image-full-width/proton-diag-grids-1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section class="padding-largest no-padding-bottom module-portolio-detail-headline"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Mail, Calendar & Drive — </span> <br class="not-on-s">An integrated family </h2> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/05._tile-images/proton--conversational-tool-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/05._tile-images/proton--conversational-tool-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/05._tile-images/proton--conversational-tool-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/05._tile-images/proton--conversational-tool-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Between utility tool<br> and direct messaging</h3> <p>Our design strategy for the ProtonMail redesign involved finding a balance between a utility tool for productivity and a conversational tool for direct messaging. We accomplished this by optimizing the product with organizational features, such as labels and folders, while also creating a chat-like experience in the thread view with visualized recipients.</p> </div> </div> </div> </div> </section> <section class="modular-callout "> <div class="callout-container"> <div class="callout flex-container"> <div class="flex-item-left bg-grey-05"> <div class="callout-icon svg-color"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="#141414"><path d="M592 288H576V212.7c0-41.84-30.03-80.04-71.66-84.27c-2.805-.2852-5.59-.4229-8.336-.4229C451.9 127.1 416 163.9 416 208V288h-16C373.6 288 352 309.6 352 336v128c0 26.4 21.6 48 48 48h192c26.4 0 48-21.6 48-48v-128C640 309.6 618.4 288 592 288zM496 432c-17.62 0-32-14.38-32-32s14.38-32 32-32s32 14.38 32 32S513.6 432 496 432zM528 288h-64V208c0-17.62 14.38-32 32-32s32 14.38 32 32V288zM224 256c70.69 0 128-57.31 128-128c0-70.69-57.31-128-128-128S96 57.31 96 128C96 198.7 153.3 256 224 256zM224 48c44.11 0 80 35.89 80 80c0 44.11-35.89 80-80 80S144 172.1 144 128C144 83.89 179.9 48 224 48zM320 464c0 18.08 6.256 34.59 16.41 48H32c-17.67 0-32-14.33-32-32c0-97.2 78.8-176 176-176h96c18.09 0 35.54 2.748 51.97 7.818C321.5 319.5 320 327.5 320 336v25.52C305.1 355.5 288.1 352 272 352h-96c-65.16 0-119.1 48.95-127 112H320z"/></svg> </div> </div> <div class="flex-item-right"> <div class="callout-content"> <div class="s-text text-grey-40 topic"> STRATEGY INSIGHT </div> <div class="m-text color bold headline"> Privacy could be impacted by the most unexpected feature. </div> <div class="text"> User interviews revealed that privacy is a top concern. Small features, such as email preview, can significantly impact user safety. The ability to preview an email before opening can prevent viruses from infecting computers and compromising data privacy. </div> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton-organisational-features-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton-organisational-features-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton-organisational-features-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton-organisational-features-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Honing in on<br> organisational features</h3> <p>Rather than conducting a complete overhaul, we carefully reviewed the previous design and technical decisions. We only proposed changes when they served clearly defined user goals. Among other things, we restructured the menu and email actions, revisited the icons, decoupled labels and folders, and made the senders more prominent.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container"> <div class="flex-item-left"> <div class="vertical-middler"> <h3>Organise tasks<br> via various calendar views</h3> <p>The number of artboards required for shipping kept increasing as we tried to account for all the edge cases and potential errors. These included multiple overlapping events, conflicting calendars, recurring and multi-day events, customized reminders, and notifications.</p> </div> </div> <div class="flex-item-right img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton-organize--tasks-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton-organize--tasks-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton-organize--tasks-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton-organize--tasks-1x.jpg"> </picture> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton--easy-sync-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton--easy-sync-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton--easy-sync-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/Proton-mail-calendar-drive-design-mobile-ios-android-ux/07._tile_images_2-4/proton--easy-sync-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Sync across devices<br> Easy sharing & offline access</h3> <p>It works just like other file storage services, except everything is encrypted by default. File content, file names, folder names, and paths remain private. The user can easily share files with anyone with one click and manage permissions and collaborator privileges. The storage is designed to be fully accessible offline. We also offered a clear overview of space available — both online and on a local device.</p> </div> </div> </div> </div> </section> <section id="cta-your-project" class="section padding-largest modular-call-contact "> <div class="wrapper"> <div class="flex-container"> <div class="flex-item-left"> <picture> <source media="(max-width: 767px)" srcset="/user/themes/boanastories/img/sales/s-profile-j2-mobile.jpg" /> <source srcset="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg 1x, /user/themes/boanastories/img/sales/s-profile-j2-2x.jpg 2x" /> <img src="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg" alt="Johannes Holl" /> </picture> <a href="https://boanastudio.com/team/johannes-holl" class="xs-text text-grey-60 image-caption"><b class="bold text-grey-40">Johannes Holl</b> <span class="not-on-s">• </span>Managing Director</a> </div> <div class="flex-item-right"> <div class="text"> <div class="headline l-text"> <span class="color">Let’s talk about</span><br>your project. </div> <div class="teaser n-text text-grey-60"> We can help reduce complexity and identify quick wins upfront. </div> <div class="actions"> <a href="https://boanastudio.com/contact" class="button primary">Get free consultation</a> </div> </div> </div> </div> </div> </section>