skip to Main Content

Post Stamp Builder

Configura tu propio pliego de sellos

linea

Post, el servicio de correos en Austria, quería crear y mejorar su servicio de compra con un digital online que permitiera a los usuarios diseñar sus propios pliegos de sellos y finalmente comprarlos. Tuve que ceñirme a la identidad coorporativa ya existente de la marca para conseguir una unidad en el diseño. El resultado fue una herramienta muy intuitiva y útil.

Dirección artística, concepto y diseño

Christof Hofstaetter y Susanne Palmetzhofer (jefes de proyecto) | Marcin Gil y Milan Orszak (programación)

2014

Interfaz – UI | Experiencia de usuario – UX

Post Austria
(Ovos)

Customizar tu sello estaba al alcance de todos los usuarios, y desde casa

Desde el principio queríamos un proceso sencillo y muy fácil de manejar.
Para ello, primero desarrollamos unos wireframes que explicaban el proceso. A continuación unos ejemplos.

post-stamp-builder_wireframe-1
Sube tu imagen

De lo primero que podías hacer en el producto digital era escoger la foto que querías en ese sello. Podías subir la imagen través de tu ordenador o escoger una de tus imágenes publicadas en tu perfil de Facebook.

post-stamp-builder_wireframe-3
Personaliza tu sello

Con la imagen ya cargada, aparecía en la parte superior un menú con diferentes opciones para customizar tu sello. Podías cambiar la imagen, acercarla, girarla, cambiar el texto, poner un marco alrededor de tu foto, cambiar su color, etc.

post-stamp-builder_wireframe-2
Selecciona tu imagen

Una vez seleccionabas el método con el cuál subir la imagen. Aparecía una pantalla con un scroll interno, en la cual se mostraban todas las imágenes existentes de la carpeta escogida de tu ordenador o Facebook.

post-stamp-builder_wireframe-4
Información adicional

Con el proceso de compra y personalización del pliego, obviamente necesitábamos de mensajes adicionales que fueran informando al usuario de cada proceso en el que estaba. Como muestra de ello este pop up de confirmación.

Y el visual definitivo

Este es un ejemplo real de cómo se veía el digital.
El proceso de subir una imagen hasta tener tu pliego de sellos completo.

post-stamp-builder-1
post-stamp-builder-1
post-stamp-builder-2
post-stamp-builder-3
post-stamp-builder-4
post-stamp-builder-5
post-stamp-builder-6
El detalle está en el píxel

Cada línea, cada sombra, cada posición de cada elemento está cuidado con mucho mimo.

post-stamp-builder_interface-1
post-stamp-builder_interface-2
post-stamp-builder_device
Back To Top