ProtonMail

Sechs Privacy-Apps in vier Monaten

<b>4 Monate</b> 6 Apps

zweiwöchentliche Übergabe neuer Features an die Entwickler

<b>Design System</b> und UX Pattern

um 3 Apps auf zwei Betriebssystemen und die übergreifende Konto-Funktion zu vereinheitlichen

<b>40+</b> Nutzer-Interviews

um die Usability mit Prototypen zu vertesten und die Zustimmung der Nutzer abzufragen

Proton AG

Visit website

BRANCHE

Privacy Tech, Communication

Zeitraum

12 weeks in 2020

TEAM

Design Lead
UX / UI Designers
Illustrator

Produkt-Design Mobile User-Testing

Über das Projekt

Proton ist ein in der Schweiz ansässiger Kunde, der sich auf sichere Kommunikation spezialisiert hat. Das Unternehmen bietet datenschutzorientierte Alternativen zu etablierten Online-Diensten wie Gmail oder Outlook. Obwohl die Lösung des Unternehmens von den Nutzern sehr geschätzt wird, blieb sie in puncto Benutzerfreundlichkeit hinter ihren wichtigsten nicht auf Datenschutz ausgerichteten Mitbewerbern zurück.
Unsere Aufgabe bestand darin, benutzerfreundliche mobile Anwendungen auf der Grundlage starker Sicherheitswerte neu zu konzipieren. Wir überarbeiteten das Kernprodukt ProtonMail und entwickelten in Zusammenarbeit mit den Produktteams des Unternehmens die neuen Produkte Kalender und Drive. Wir lieferten alle zwei Wochen an die Entwicklung für Android- und iOS-Geräte, einschließlich Smartphones und Tablets unterschiedlicher Größe.

<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">Die Design-Komplexität </span> <br class="not-on-s"> für eine ganze Produktfamilie reduzieren </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">Einheitlicher Styleguide</div> <p class="s-text text-grey-60 paragraph">Um Konsistenz zu gewährleisten, haben wir einen umfassenden UI-Leitfaden und Designsystem entwickelt. Der unter anderem Standards und Richtlinien für Typografie, Farben und Layouts umfasst. Zusätzlich wurde ein Look&Feel entwickelt, der sich von der Konkurrenz unterscheidet und die Produktmarke Proton klar kommuniziert.</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 & Adaption für Tablet</div> <p class="s-text text-grey-60 paragraph">„Mobile App“ Nutzer standen im Vordergrund der Entwicklung. Darüber hinaus haben wir die Apps für Tablets optimiert, damit die Nutzer auch auf größeren Bildschirmen das gleiche nahtlose Erlebnis genießen können. Wir bieten den Nutzern ein einheitliches Erlebnis auf allen Plattformen, unabhängig vom verwendeten Gerät.</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">Optimiert für iOS & Android</div> <p class="s-text text-grey-60 paragraph">Die Apps wurden separat für iOS und Android entwickelt. Die Android-Version hatte Vorrang, da die Mehrheit der Proton-Kunden Android-Geräte verwendet. Beide Versionen wurden strengen Tests und Optimierungen unterzogen, um sicherzustellen, dass sie sich für die jeweiligen Plattformen eignen und allen Nutzern das gleiche hochwertige Erlebnis bieten.</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“ Modus</div> <p class="s-text text-grey-60 paragraph">Einer der häufigsten genannten Nutzerwünsche war die Einführung des „Dark“-Modus. Bei der Gestaltung haben wir sehr genau auf die Farbschemata und den Kontrast geachtet, um ein optisch ansprechendes und benutzerfreundliches Erlebnis zu gewährleisten.</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">Eine integrierte Produktfamilie </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>Spagat zwischen Dienstprogramm<br> und Direktnachrichten</h3> <p>Unsere Designstrategie für die Neugestaltung von ProtonMail bestand darin, ein Gleichgewicht zwischen einem nützlichen Tool für die Produktivität und einem Messenger für Direktnachrichten zu finden. Unsere Lösung war, dass Produkt mit organisatorischen Funktionen wie Etiketten und Ordnern zu optimierten, während wir gleichzeitig ein Chat-ähnliches Erlebnis in der Thread-Ansicht mit visuell starker Zuordnung zu den Empfängern schafften.</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"> Eine unerwartete Funktion kann die Privatsphäre beeinträchtigen. </div> <div class="text"> Unsere Nutzer-Interviews ergaben, dass der Schutz der Privatsphäre eines der Hauptanliegen der Nutzer von Proton ist. Die Gestaltung einer kleinen Funktion wie die E-Mail-Vorschau kann die Sicherheit der Nutzer erheblich beeinträchtigen. Die Möglichkeit, eine E-Mail vor dem Öffnen in der Vorschau anzuzeigen, kann verhindern, dass Viren den Computer infizieren und den Datenschutz gefährden. </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>Fokus auf<br> das Organisieren</h3> <p>Anstatt eine komplette Überarbeitung durchzuführen, haben wir die bisherigen gestalterischen und technischen Entscheidungen sorgfältig überprüft. Wir haben nur dann Änderungen vorgenommen, wenn sie klar definierten Nutzerzielen dienten. Unter anderem haben wir das Menü und die E-Mail-Aktionen neu strukturiert, die Icons überarbeitet, Labels und Ordner entkoppelt und die Absender prominenter gestaltet.</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>Aufgaben einfach organisieren<br> dank unterschiedlichster Kalenderansichten</h3> <p>Die Anzahl der Layouts für die Übergabe nahm ständig zu, da wir versuchten jeden Fehler und jeden Edge-Case in den möglichen Kalender-Darstellungen zu berücksichtigen. Dazu gehörten mehrere sich überschneidende Ereignisse, Konflikte zwischen verschiedenen Kalendern, wiederkehrende und mehrtägige Ereignisse und individuelle Erinnerungen und Benachrichtigungen.</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>Geräteübergreifend synchronisieren<br> Einfaches teilen und Offline-Zugriff</h3> <p>Es fühlt sich an wie jeder andere Dateispeicherdienst, nur dass alles standardmäßig verschlüsselt ist. Dateiinhalte, Dateinamen, Ordnernamen und Pfade bleiben privat. Der Benutzer kann Dateien ganz einfach mit einem Klick für andere freigeben und Berechtigungen und Bearbeitungsrechte verwalten. Der Speicher ist so konzipiert, dass er vollständig offline zugänglich ist. Außerdem haben wir einen klaren Überblick über den verfügbaren Speicherplatz gestaltet - sowohl online als auch auf dem lokalen Gerät.</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/de/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>Geschäftsführer</a> </div> <div class="flex-item-right"> <div class="text"> <div class="headline l-text"> <span class="color">Sprechen wir über</span><br>Ihr Projekt. </div> <div class="teaser n-text text-grey-60"> Teilen Sie Ihre Ideen mit uns, wir helfen gerne! </div> <div class="actions"> <a href="https://boanastudio.com/de/contact" class="button primary">Kostenlose Beratung</a> </div> </div> </div> </div> </div> </section>