¿Tienes una Startup Ecommerce? Te mostramos como hemos planteado la tienda online de nuestro último proyecto

 Rent Event es un proyecto de alquiler de ropa y complementos para eventos y bodas. Está pensado para usuarios que quieren un vestido espectacular para un gran día sin gastarse una cantidad excesiva y sin tener que acumular prendas que nunca más van a volver a usar. Este proyecto, no solo incluye el alquiler sino la posibilidad de contratar un personal shopper que te asesore en todo el look.

Para este proyecto vimos interesante plantearlo como si de un ecommerce se tratara ya que aunque las prendas se alquilen, la aplicación debe mostrar distintos productos de distintas categorías y el usuario necesita ver el detalle de cada prenda antes de alquilarla.

A nivel de diseño queríamos transmitir ese aire de sofisticación, elegancia y exclusividad que ya se respiraba en las prendas de éste proyecto.

Algunas de las palabras clave que salieron en la lluvia de ideas, enfatizaron, aún más, esta sensación previa que ya tuvimos con el proyecto: luxury, dramática, elegante, V.I.P., único.

 Creando un Mapa del problema

Como ya he comentado en post anteriores, esta fase del proyecto en el que hacemos un mapa de como se siente el usuario con el problema que la aplicación resuelva, nos permite:

1. empatizar más con las necesidades del proyecto.
2. hacer una experiencia de usuario más adecuada y pulida
3. entender mejor cada parte del problema y como lo resuelven nuestros clientes

En este caso hemos creado dos mapas ya que la opción de contratar un especialista en moda es opcional y no se presentaba en todos los usuarios de la aplicación.

 Colores y Tipografía

Obviamente el primer color que se nos vino a la mente fue el dorado, no imaginábamos esta aplicación sin él, y es que este color expresa lujo por cada poro de su piel, aunque ojo con pasarse.

Por otro lado el color gris y el azul oscuro nos transmiten elegancia, pulcritud, seriedad, saber estar, cualidades que también valoramos a la hora de crear esta aplicación.

Por último el color vino nos transmite, pasión, sensualidad y romanticismo.

Cada uno de los colores representa una categoría de la aplicación y todos los componentes en cada página van cambiando según la categoría en la que se encuentre el usuario así los botones, fondos de cada prenda y textos irán variando así:

Color vino→ Complementos

Color dorado→ Invitada

Color Azul→ Novia

Color Gris→ Hombre

Con respecto a la tipografía hemos escogido la Ibarra Real Nova una con serifa que armoniza con la idea de elegancia, lujo y exclusividad a la vez siendo muy legible perfecta tanto para títulos como para párrafos con un tamaño más pequeño.

Componente y su funcionalidad

Botón flotante:

Un botón flotante representa la acción principal de una parte de la pantalla, en este caso de cada prenda.

En cada categoría este cambia de color como ya explique arriba y cuando el usuario lo pulsa le lleva directamente a la pantalla de detalle de la prenda.

Siempre es importante en este tipo de botones crear la sobra proyectada adecuada para dar la sensación de un botón que se eleva por encima del contenido y así hacer más visible y atrayente la idea de pulsar en él.

Este botón aparece solo en la versión móvil ya que en la versión de escritorio es sustituido por un contenedor que se sobrepone encima de la fotografía cuando pasamos por encima.

Pickers o calendario:

Los selectores de fechas permiten a los usuarios seleccionar una fecha o rango de fechas que en este caso concreto se utiliza para que el usuario decida las fechas en las que desea alquilar la prenda o complemento.

Se integra como menú desplegable de campos de texto en la página de detalle de cada producto para que, una vez escogido el siguiente paso sea alquilarlo definitivamente.

Una vez indicadas las fechas en el calendario y confirmarlas gracias al ok que aparece en éste, quedan escritas en el campo de texto rellenable.

Slider que muestra varias imágenes a la vez:

 Otra vez en este proyecto hemos utilizado slider o carousel para mostrar cada una de las prendas solo en la versión para pc. Pero en este caso vimos más útil poner tres prendas cada vez y que se vayan pasando de una en una, así el usuario puede ir comparándolas y decidiendo mejor.

Como has podido ver en este caso hemos hecho dos versiones de una misma aplicación, una para dispositivos móviles y tablets y otra para ordenadores.

A veces cuando creamos un proyecto vemos que modificando la disposición y creando una nueva composición es suficiente, pero en otras hacemos una modificación tan significativa y cambiamos tantos componentes que creamos dos versiones diferentes. Aún así si un usuario ve una u otra entiende que es la misma gracias a la coherencia visual entre ambas.

Y tu ¿tienes una startup ecommerce y crees que una aplicación como esta te ayudaría a visibilizarte de manera adecuada en tu mercado?

Si quieres saber cómo podemos ayudarte contacta con nosotros a través de contacto@onirotek.com

Y si quieres saber más sobre este proyecto puedes verlo en detalle en nuestra página de Behance. Te dejo aquí el enlace