Diseño de web-app marketplace CLYB

CLYB es una startup de marketing digital que buscaba crear un marketplace online donde poner en contacto a empresarios y freelances profesionales de marketing y diseño.

Como única diseñadora UX/UI del equipo mis funciones abarcaron:

• Redefinición de la identidad corporativa. La empresa contaba con tan solo un logotipo y mi primera tarea fue definir una línea gráfica completa para utilizarla como base de diseño del marketplace: vectorización y distintas versiones del logotipo, elección de tipografías, colores y guía de estilo.
• Especificación de requisitos. A través de la coordinación con el equipo directivo y el de desarrollo, identificamos cuáles eran las funcionalidades con las que querían dotar a este nuevo producto digital.
• Identificación del MVP (mínimo producto viable). Elegimos cuáles serían las funcionalidades suficientes para la fase inicial de lanzamiento y planificamos el resto para futuras fases de diseño y desarrollo.
• Diseño y prototipado. Llevé a cabo el diseño y prototipado de alta fidelidad del marketplace mediante Figma. De esta forma, obtuvimos un prototipo totalmente navegable que incluía interacciones entre las distintas pantallas y los distintos elementos de la aplicación.
• Desarrollo front-end. Junto al desarrollador, convertimos el prototipo en un producto tangible: una web/app responsive programada con HTML y CSS. El formato web fue seleccionado con el fin de tener un producto unificado que podía ser utilizado desde un navegador web o una aplicación para dispositivos móviles.

REDEFINICIÓN DE LA IDENTIDAD CORPORATIVA

Imagen corporativa de CLYB.

Tras vectorizar el antiguo logotipo de la compañía, identifiqué la tipografía que utilizaba y añadí a la identidad corporativa una tipografía alternativa sin coste para uso comercial.

Por otro lado, realicé las diferentes versiones de logotipo, adaptándolo a su uso en diferentes redes sociales, papelería y formato para registro de la marca.

Tarjetas de visita de CLYB.

ESPECIFICACIÓN DE REQUISITOS

En la primera etapa del proyecto, el equipo directivo definió los siguientes requisitos para el marketplace:

• Formato web-app para asegurar la compatibilidad con los distintos sistemas operativos y dispositivos.
• Aplicación para iOS y Android tipo visor web para utilizar la web-app en una app nativa en ambos sistemas operativos móviles.
• Muro social o feed donde la agencia publica noticias, ofertas e información de interés enfocadas al sector profesional de cada cliente.
• Posibilidad de presupuestar, contratar y gestionar servicios de marketing digital y diseño para el cliente (p.ej. gestión de sus redes sociales, desarrollo de su página web o creación de campañas publicitarias).
• Perfil personalizable con foto de perfil e información sobre el cliente.
• Tres vistas distintas para la app: cliente (empresa que quiere contratar servicios), freelance (persona que lleva a cabo los servicios) y administrador (miembros de la agencia CLYB que actúan como intermediarios).
• Chat entre administrador-freelance y administrador-cliente, actuando CLYB como intermediario para evitar que cliente y freelance prescindan de la agencia para otros servicios.

Además de estos requisitos para la creación del marketplace, CLYB decidió añadir un servicio más avanzado motivado por el escenario CoVID-19: el servicio de notificaciones PUSH. Este servicio permitía a distintos tipos de clientes (comercios, restaurantes o tiendas) generar códigos QR para almacenar sus catálogos o sus cartas y recibirlos impresos en distintos soportes y formatos.

Ejemplo de código QR generado por CLYB.

Cuando un usuario escaneaba el código para acceder a la carta o el catálogo, una notificación push aparecía en su dispositivo móvil tras un cierto tiempo para evaluar el servicio del establecimiento. El cliente de CLYB podía modificar el contenido al que dirigía el código QR, configurar el tiempo entre escaneo y notificación, enviar promociones o anuncios a sus usuarios y observar las reseñas y valoraciones de sus clientes

IDENTIFICACIÓN DEL MVP

El mínimo producto viable de este proyecto consistía en proporcionarle a los clientes la información de los servicios que la agencia pone a su disposición y la opción de contratarlos y gestionarlos en todo momento desde sus dispositivos móviles.

Así, en una primera etapa de desarrollo la empresa decidió posponer la creación de las vistas de administrador y freelance y dirigió el chat de los clientes a una plataforma de chat ya existente. Además, debido a limitaciones presupuestarias, solo se diseñó y desarrolló la versión de app nativa para Android, obligando a los usuarios de iOS a acceder a la aplicación mediante el navegador.

DISEÑO Y PROTOTIPADO

Una vez identificamos el MVP del producto y planificamos el resto de funciones, elegí Figma para realizar el prototipado de alta fidelidad del producto. Esta herramienta permitía visualizar las distintas etapas de desarrollo de forma colaborativa con el equipo en tiempo real, facilitando los cambios y las reuniones con el equipo. Por otro lado, se trata de una herramienta de diseño UI en pleno auge y que además facilita el paso del diseño al desarrollo con generación de código HTML.

Inicio de sesión y registro en CLYB.

La pantalla de entrada a la aplicación muestra el logotipo de CLYB sobre fondo blanco junto a dos botones para registrarse e iniciar sesión. Estas dos funcionalidades se muestran en pantallas separadas sobre un fondo degradado con los colores corporativos de la agencia y cuadros de texto blancos donde introducir la información necesaria. Además, en el proceso de registro se muestra al usuario una línea de tiempo que le permite estimar el tiempo necesario para el registro y saber en todo momento en qué punto del mismo se encuentra.

Esqueleto de navegación de CLYB

Una vez iniciada sesión, el esqueleto de la app se compone de dos barras de navegación (superior e inferior) y un espacio central que muestra el contenido de la sección. La navegación se realiza con 5 iconos que dirigen a las secciones de la app, divididos en las dos barras de navegación. Se tratan de formas huecas que se rellenan para indicar al usuario la sección en la que se encuentra.

• En la barra superior de navegación tenemos acceso al perfil del usuario (izquierda) y el chat con la agencia (derecha). En el centro de la barra se muestra el isotipo de la compañía.
• En la barra inferior, de izquierda a derecha, tenemos acceso al feed de la app, a la pantalla de información sobre los servicios ofrecidos por la agencia y, por último, la sección donde gestionar el servicio de notificaciones push.

Se eligió este esquema con doble barra de navegación porque es familiar para el usuario debido a aplicaciones populares que utilizan este esquema (Facebook, Instagram o Linkedin entre otros) y porque facilita la navegación y la ubicación dentro de la aplicación.

El feed de la aplicación se diseña en forma de tarjetas que se adaptan a distintos formatos de publicación: videos, enlaces, fotos o texto. Junto a estos elementos, se añade a la tarjeta el autor de la publicación en la parte superior y la descripción de la publicación en la parte inferior. La agencia decide no implementar la funcionalidad de likes y comentarios.

La pantalla de servicios muestra una rejilla de tarjetas cuyo layout se adapta al ancho del dispositivo. Cada tarjeta se compone de una pequeña imagen descriptiva en formato horizontal, el título del servicio y una breve descripción. Al pulsar sobre uno de los servicios se puede observar una descripción más extensa y mediante un CTA el usuario puede solicitar presupuesto por el chat a la agencia.

Feed y pantalla de servicios de CLYB.

La pantalla de perfil cuenta a su vez con tres secciones a las que se accede mediante pestañas:

• Mi perfil, donde el usuario puede modificar sus datos personales y de acceso y su foto de perfil.
• Mis servicios, donde se puede consultar el estado de contratación y la información de los distintos servicios contratados.
• Pagos, donde se configura la tarjeta de créditos para los pagos y se puede descargar las facturas de los pagos anteriores.

La pantalla de chat se diseña con una barra inferior donde se muestra la previsualización del borrador del mensaje y un icono para enviarlo. En la parte superior se muestra la información del contacto (nombre y estado) y un acceso directo para llamar a la agencia. Los mensajes del usuario se alinean a la derecha, tienen fondo blanco y texto en color negro. Por otro lado, los mensajes de parte de CLYB se alinean a la izquierda, tienen fondo azul y texto en color blanco.

Por último, la pantalla de notificaciones push también se compone de tres secciones a las que se accede mediante pestañas:

• Estadísticas de las valoraciones de los clientes mostrando el número de reseñas según puntuación, según característica evaluada o franja horaria. Además, también es posible filtrar las estadísticas por los parámetros anteriores.
• Reseñas de los clientes y opción de filtrar dichas valoraciones por fecha, franja horaria o puntuación.
• Configuración del servicio de notificaciones push: intervalo entre notificaciones, modificación del contenido mostrado al escanear los códigos QR, creación de campañas publicitarias o compra de más códigos QR.

Perfil, chat y pantalla de notificaciones push de CLYB.

DESARROLLO FRONT-END

El gran reto de este proyecto fue encargarme de la mayor parte del desarrollo front-end de la aplicación. Para ello, tuve que aprender los lenguajes de programación de HTML y CSS para crear una web-app responsive. Además de por su sencillez frente a otras alternativas, el formato web fue elegido para tener una versión única que podía ser utilizada desde un navegador web o desde una aplicación para dispositivos móviles.

Para conseguir que la web fuera responsive decidimos no utilizar media queries, si no limitar los tamaños máximos a los que podían escalar los elementos de la aplicación y definir las dimensiones en función de las dimensiones del dispositivo. De esta forma, los elementos se adaptan a los distintos tamaños de pantalla (desktop, tablets o smartphones) ocupando los espacios especificados y limitados.

La web-app está disponible en https://app.clyb.es. Además, si tienes un Android y quieres echarle un vistazo, también puedes descargarla en el Google Play Store.

Muchas gracias por leer el artículo, espero que te haya gustado.