Desde hace 3 años más o menos soy usuario de Proton, el reconocido servicio de apps que es mundialmente famoso por ofrecer servicios con encriptación punto a punto (E2EE por sus siglas en inglés), respetando la privacidad de los usuarios.
Uno de los últimos servicios de Proton en ser lanzados fue Proton Pass, un gestor de contraseñas (por supuesto, con E2EE) que quiere rivalizar con otros servicios ya establecidos como 1Password, Lastpass, Bitwarden, KeePass, entre muchos otros. Hace 1 semana desde la publicación de esta nota que Proton finalmente lanzó la app para computadoras con macOS, y por supuesto me emocioné, porque hasta la fecha solo estaba disponible a través de la app web y de las extensiones de navegador (que por cierto, Proton también lanzó la extensión de Proton Pass para Safari al mismo tiempo que la app de escritorio).
La emoción me duró muy poco, ya que el diseño seguía la misma línea de la versión web, y la verdad no es que sea muy fan del diseño actual. Por eso, como una forma de practicar lo que he aprendido de UI, decidí embarcarme en un ligero rediseño de la app de escritorio para macOS, y este es el resultado hasta el momento:
![](https://julirodriguez.co/wp-content/uploads/2024/08/Proton-pass-app-Main-Window-1200x896.webp)
En este ligero rediseño mantuve algunos elementos de la actual aplicación, mientras que otros elementos sí los pensé desde ceros con base en mi experiencia usando gestores de contraseñas. Además, siento que en la versión actual de la app de Proton Pass hay inconsistencias en el diseño, y por eso pensé en realizar este proyecto de UI para crear algo con lo que yo me sentiría cómodo usando.
Para dar contexto del rediseño que propongo, este es el diseño actual de la app de Proton Pass en escritorio (y muy similar en web):
![](https://julirodriguez.co/wp-content/uploads/2024/08/Proton-Pass-Juli-Current-version-1200x818.webp)
Tiene algunos elementos que en mi opinión no se ven muy bien, como las diferentes formas de los botones, ciertos colores usados, la forma de los favicons en los items, entre muchas otras cosas.
Iconos, fuentes y colores
Para realizar este rediseño, en la parte de iconos me apoyé en Font Awesome, una enorme librería de iconos que suelo usar bastante para practicar diseño de interfaces. Tiene todos los iconos que necesito, lo cual me ahorra mucho tiempo a la hora de prototipar.
Para las fuentes tipográficas, quería ser lo más fiel al producto actual. Inspeccionando Proton Pass en web me di cuenta de que usan la tipografía Inter de Google Fonts, y en el momento que descubrí esto la elección fue más que evidente.
Finalmente, para los colores me basé en la página del producto, que muestra la paleta de colores que los diseñadores en Proton decidieron usar para este producto puntual:
![](https://julirodriguez.co/wp-content/uploads/2024/08/Proton-Pass-website-1200x515.webp)
Centro de notificaciones
Algunas de las cosas que pensé que pueden funcionar en la app sería el centro de notificaciones (o notification center en inglés). Para mí es importante saber si hay algún problema con alguno de mis inicios de sesión, o con la cuenta, para poder actuar rápidamente. Por eso el centro de notificaciones me parece una buena adición al producto, así puedo consultar cualquier novedad a un solo clic de distancia. El centro de notificaciones funcionaría basándose en la información de Pass Monitor, una función que está disponible actualmente en la app.
![](https://julirodriguez.co/wp-content/uploads/2024/08/Notification-center-Proton-Pass-v2-2048x1539-1-1200x902.webp)
Siento que tener un menú desplegable en la parte del perfil es mucho más agradable, ahorra espacio en pantalla, y contiene opciones que son importantes, pero que no deben ser mostradas todo el tiempo en la app.
Prototipo
En este video presento algunas de las interacciones que agregué al prototipo en Sketch, para mostrar cómo se verían algunas de las opciones en la app:
Tengo claro que aún faltan muchos elementos por trabajar en la app, pero esta versión inicial da una idea muy clara de lo que me gustaría ver en la app de Proton Pass en un futuro.
La versión editable de este rediseño la he realizado en Sketch y puede ser consultada en este enlace.
Conclusiones
No quiero extenderme mucho en todos los detalles de la versión actual del proyecto, ya que esta es una versión muy temprana del prototipo, está sujeta a cambios y habría mucho que hablar en cuanto a las consideraciones que tuve para las elecciones de los elementos visuales, entre muchas otras cosas. Por ahora, esta es mi visión de cómo me gustaría que fuese la app de Proton Pass en un futuro no muy lejano.
Aún tengo mucho camino por recorrer con este diseño, pero es un vistazo a lo que he estado trabajando en mis tiempos libres, y que espero tener una versión aún más pulida en las próximas semanas.
Aclaraciones
No soy UI Senior Designer o cualquier otra posición similar. Siento que estoy en una etapa Junior en este aspecto, porque sé que me faltan muchas cosas por aprender, pero siento que voy por el camino correcto.
Este es un proyecto personal que realizo porque realmente me gustan los servicios de Proton, y me gustaría que mejoraran aún más en la parte de diseño para hacer del producto algo mucho más interactivo, funcional y atractivo.
Por el momento seguiré practicando de forma regular el diseño de interfaces para refinar mis habilidades y fomentar mi creatividad artística.
Discussion about this post